If you followed previous articles I wrote on making of a responsive game in Phaser, one task was to implement smooth transition from one state to another in the game. Phaser states work by loading new state in the view and removing old state from the view which happens instantly and does not give a transition effect as if we are changing the state (or screen). In a polished game you would want to implement something which gives an impression of a transition from one screen to another. For example a sliding effect where player sees one screen sliding out of the view and another screen sliding in giving impression that something is changing in the game.
Cristian Bote wrote a nice Phaser plugin State Transition Plugin for Phaser which gives many options to achieve this and good thing about it is that you don’t have to do much and can get away with changing a couple of code lines in your game.
There is another plugin written on top of Cristian Bote’s plugin by Alan Accurso called Refactored State Transition Plugin for Phaser which gives some more control to the developer.
In Making of a responsive game in Phaser: Part 2 article we used the standard Phaser transition to switch between two states as can be seen below
Using Cristian Bote’s original state transition plugin we get a sliding transition effect as shown below
Integration of the plugin in a game is a simple two step process
Include the plugin code in your game
<script src="phaser-state-transition.min.js"></script>
Replace the Phaser state start code below
this.state.start("TheGame");
with the new code as
this.state.start("TheGame", Phaser.Plugin.StateTransition.Out.SlideLeft, Phaser.Plugin.StateTransition.In.SlideLeft);
And that would be it. There are many options for Exit and Entry slide effects. You can check sample examples put up by Christian on codepen at the link below
Phaser State Transition Plugin Examples
Update: This article was written for Phaser 2. Refer to Plugin’s Github page for examples related to later Phaser versions.