Apply transitions between your Phaser states with a single line of code thanks to State Transition Plugin

Talking about Game development, HTML5, Javascript and Phaser.

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

WITH 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:

<!DOCTYPE html>
<html>
	<head>
	<style type="text/css">
		body{
			background: #000000;
			padding:0px;
			margin:0px;
		}
	</style>
	<script src="phaser.min.js"></script>
     <script src = "phaser-state-transition.js"></script>
     <script src = "game.js"></script>     
	</head>
	<body>
	</body>
</html>

Then you can call the state with state.start as usual, in the original example I used

game.state.start("PlayGame");

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.

Never miss an update! Subscribe, and I will bother you by email only when a new game or full source code comes out.