Jump to content

Better way to change states in phaser tween.


Recommended Posts

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.

Link to post
Share on other sites

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) { .......

      ...

      ..

Link to post
Share on other sites

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...

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...