If you are a follower of this blog, you should know what Phaser states
are and how you should use them to better organize your game.
Unfortunately, when you switch from one state to another, there isn’t any transition as Phaser just removes everything from the canvas, placing new state’s stuff at once. It’s not a big issue, all in all your game will work no matter the transition between a state and another, but we have to produce games as much polished as possible.
That’s why in my games like DrawSum
I created a fake fade out transition which is actually just an image covering the canvas which fades in to hide the content before calling next state.
Now Cristian Bote
helps us to create virtually any kind of transition between states with his State Transition Plugin for Phaser
The plugin heavily relies on taking snapshots of the state we are about to leave and the state we are about to call, then tweening them as you want. The plugin comes with some built in transitions but it’s obvious the real deal of the plugin is allowing you to create your own transitions.
While I am creating my own transitions, I am going to show you the example you can find at Create a HTML5 level select screen controlled by swipe – new features: bug fixes and animation when selecting locked levels
with and without states transitions:
WITHOUT STATE TRANSITIONS
The difference is quite noticeable, the rightmost example looks way more polished.
And talking about the code, you just need to include the file in your index page:
<script src = "phaser-state-transition.js"></script>
<script src = "game.js"></script>
Then you can call the state with
as usual, in the original example
While now you will be using, for example:
game.state.start("PlayGame", Phaser.Plugin.StateTransition.Out.SlideRight, Phaser.Plugin.StateTransition.In.SlideRight);
There’s nothing more to do. I will surely use State Transition Plugin for Phaser
in every game I will make, meanwhile you can download the full source code
of the example, plugin included.