Better way to change states in phaser tween.

[Krasen]

Hello, I am making a simple Matching game, that uses phaser tween animation to tween the animation for flipping game tiles.

 

when the tile is flipped I need to set a state to OPEN or CLOSED

however its currently using 4 methods to do the flip.

I want to make it faster, so the user can not click on a new tile before the last one is completed

 

here are 2 examples:

I am writing the app in typescript.

// Main.ts NEW click methods        public startNewFlip():void {            var tileNewTween:Phaser.Tween;            tileNewTween = this.game.add.tween(this.face.scale).to({x: 0}, 300, Phaser.Easing.Quartic.In);            tileNewTween.onComplete.add(this.onCompleteNewTileFlip1, this);            tileNewTween.start();        }        private onCompleteNewTileFlip1():void {            if (this.currentState == TileState.OPEN) {                this.face.frameName = "closedCard";            }            else {                this.face.frameName = this._id;            }            this.continueNewTileFlip();        }        public continueNewTileFlip():void {            var tileNewTween2 = this.game.add.tween(this.face.scale).to({x:1},300,Phaser.Easing.Quartic.Out);            tileNewTween2.onComplete.add(this.onCompleteNewTileFlip2,this);            tileNewTween2.start();        }        private onCompleteNewTileFlip2():void {            if(this.currentState == TileState.OPEN){                this.currentState = TileState.CLOSED;            } else {                this.currentState = TileState.OPEN;            }        }

and here is what I tried to do to simplyfiy it

public flip():void {            if (this.currentState == TileState.OPEN) {                var tileNewTween = this.game.add.tween(this.face.scale).to({x: 0}, 3300, Phaser.Easing.Quartic.In);                tileNewTween.start();                tileNewTween.onComplete.add(function(){this.face.frameName = "closedCard"} , this);            } else {                var tileNewTween = this.game.add.tween(this.face.scale).to({x: 0}, 3300, Phaser.Easing.Quartic.In);                tileNewTween.start();                tileNewTween.onComplete.add(function(){this.face.frameName = this._id;} , this);            }            console.log(this.currentState);            this.contFlip();        }        public contFlip():void {            if(this.currentState == TileState.OPEN){                var tileNewTween2 = this.game.add.tween(this.face.scale).to({x:1},3300,Phaser.Easing.Quartic.Out);                tileNewTween2.start();                tileNewTween2.onComplete.add(function(){this.currentState = TileState.CLOSED;},this);            } else {                var tileNewTween2 = this.game.add.tween(this.face.scale).to({x:1},3300,Phaser.Easing.Quartic.Out);                tileNewTween2.start();                tileNewTween2.onComplete.add(function(){this.currentState = TileState.OPEN;},this);            }            console.log(this.currentState);        }

the anonymous function does not work correctly as it stops the animation from working, and swithes the tile after the 300 ms elapsed but without showing anything moving.

 

 

This methods runs on a onFaceClicked() methhod, that lisens for mouse clicks on the tiles.

if its tilestate is CLOSED, then runs this.
But if click fast, the CLOSED state is not yet confirmed, so the app lets me click it.

[o0Corps0o]

Without thinking about it too much, could you not just set the open/closed state without it in the tween?

 

ie:

 

public flip():void {

       if(this.currentState == TileState.CLOSED) this.currentState =TileState.OPEN;

       else this.currentState = TileState.CLOSED;

      

      if (this.currentState == TileState.OPEN) { .......

      ...

      ..

[Krasen]

The problem appears that the tween has to be completed before setting the State, but I must not be able to click on the Tile.

 

What I tried is to set a boolean isAnimating  to true when starting the tween and isAnimating  to false when the state is set  to CLOSED or OPEN.

 

Then I added a check 

 

if ((this.currentState == TileState.CLOSED) && (this.isAnimating == false)) {
this.startFlip();
this.tileClick.dispatch(this.uniqueId);
} else {
this.tileClick.dispatch(this.uniqueId);
console.log("Tile is open, so do nothing.");
}

 

however I still get bugs, when I click on some other Tile and the current state is still not compleated, when i click its running some weird animations...