Animating back and forth

[Pooths]

Hello,

I am relatively new to both JS and Phaser so bare with me.

I have run into a problem with animating an object from one point to another and then wait for a mouse click and then move back to the original position.

So I am trying to create a chain of tweens and also adding an eventlistener in the middle to wait for a mouseclick before continuing the tween chain. And through this chain I need to pass the object (card) that I am doing animations on.

The problem at the moment is that I want to send a parameter with the eventlistener from clickCallback to clickWait.

        function clickCallback(currentCard) {
            this.addEventListener("click", clickWait(currentCard), false);
        }

        function clickWait(cur) {//Here is the problem, I can get the eventlistener or the argument, not both..
            removeEventListener("click", clickWait);
        //...
        }

        function clickCallback(currentCard) {
            this.addEventListener("click", clickWait, false);
        }

        function clickWait(e) {//Same as above but I get the event
            removeEventListener("click", clickWait);
        //...
        }

I did a ugly solution earlier which worked, but it was not practical. I also recently found out how functions that you add with onComplete/onStart send arguments which made me think I could solve it in another fashion.

Is there anyway to solve this, or do I have to stick with my ugly solution?

 

Full code below (at least the relevant stuff):

function moveCard(card, tutoBox) {
        var tempGroup = card.parent;
        var tempPositions = [{x:card.position.x,y:card.position.y},{x:card.paired.position.x,y:card.paired.position.y}];
        var cards = [];
        cards.push(card);
        cards.push(card.paired);

        var tweenList = createCardTweens(card,tutoBox.position,30,90);

        for(var i = 0; i < tweenList.length; i++) {
            tweenList[i].onStart.add(scaleCard, this);

            tweenList[i].start();

            objGroup.addChild(cards[i]);//Moves the selected card infront of tutoBox

            tweenList[i].onComplete.add(clickCallback, this);
        }

        function scaleCard(currentCard){
            var scaleCard = game.add.tween(currentCard.scale);
            if (currentCard.scale.x === 1.125 || currentCard.scale.y === 1.125)
                scaleCard.to({x: 0.7, y: 0.7}, 450, Phaser.Easing.Linear.None);
            else
                scaleCard.to({x: 1.125, y: 1.125}, 450, Phaser.Easing.Linear.None);
            scaleCard.start();
        }

        function clickCallback() {
            addEventListener("click", clickWait, false);
        }

        function clickWait(e) {
            removeEventListener("click", clickWait);
            for (var i = 0; i < cards.length; i++) {
                var cardMoveBack = game.add.tween(cards[i]);
                cardMoveBack.to(tempPositions[i], 500, Phaser.Easing.Linear.None);
                cardMoveBack.start();
            }
            cardMoveBack.onStart.add(scaleCard,this);
            cardMoveBack.onComplete.add(function(currentCard){
                tempGroup.addChild(currentCard);
                cardsManager.enableClickAll();
                tutoBox.destroy();
            },this);
        }
    }

 

[drhayes]

If this is all happening inside a Phaser game, then you probably don't want to use "addEventListener" and "removeEventListener"... unless those happen to be names you picked for custom methods inside your state. Those methods interact with the DOM, the entire web page; Phaser only deals with things in the canvas, in its special Phaser-land of Sprites and Images and things. You didn't ask about it, I'm just making sure.

One solution to consider is making the tweens happen inside a custom Sprite class; that way you don't have to pass the cards around since they know about themselves. So instead of maintaining an array of sprites you have to pass around, you make a custom Card class that has a "startClickTween" method (or something). That method can then tween the card's own properties via "this.position" or "this.scale". If the cards are "paired" then you wouldn't need the cards array, either.

[Pooths]

Do you mean there is a way in phaser to "pause" a tween chain? That's what I need and this was only a solution I came up with that worked.
And the cards array is already gone from the code, I just forgot to clean-up the code before posting.

Do you have a example that implement a custom sprite class similar to what you are describing or any tips where to start looking?

[drhayes]

Examples site to the rescue! http://phaser.io/examples/v2/sprites/extending-sprite-demo-1

There is a "pause" method on tween, but I'm not sure that's what you mean. Is it?