When making a game using Phaser ce as a framework, there might comes a time that for one reason of another I will want to have the game run in a frame by frame basis. For the sake of some kind of turn based game, or I need to hunt down a hard to find bug, there comes a time that I need to do this now and then. In phaser ce there is the game.enableStep method along with game.step, that can be used to enable frame by frame stepping. In this post I will be writing about a quick demo I put together to help show how easy this is.
For a full working phaser example that demonstrates the use of game.enableStep, and game.step, I came up with a quick idea for a project that involves a group of circles. The group will have a data object that contains an index that will be the current circle index, each time the game world is clicked the index will step forward looping around again to zero when it reaches the count of circles. So this demo also makes use of groups, and making a sprite sheet with canvas, along with basic state management.
In a real project I might have a complex game consisting of many modules, and lines of code, and I want to hunt down a bug. However for just demonstrating the effect of game.enableStep this should do.
So for this example I will want a way to quickly make a simple sprite sheet that has two frames, one for an inactive state for the circle, and another for an active state when the circle is the current index in a group.
To read more on making a sprite sheet using the canvas 2d drawing api I wrote a post on that a while back. This way of making a sprite sheet works great for me when it comes to making quick demos like this.
This helper will add a new group, and create a bunch of sprites using the sheet that will be made with my makeCircleSheet helper above.
Next I have another method that will be called in the update method of a state in which I have created a group of circles with my makeCircleGroup method.
Now to put everything together with the Phaser.Game instance, and a few state objects. In the boot state I call my makeCircleSheet helper, and enable frame by frame steeping by calling game.enableStep. Once I have my sheet to work with, and have called game.enableStep, I then start my demo state. The reason why I call game.enableStep in the boot state is that the update method ends by being called twice for the first time rather than juts once.
In my demo state I set up an onDown event that calls game.step each time I click or touch the canvas. The game.step method is what needs to be called one way or another to advanced the game to the next frame tick. I then call the tickCircleGroup method To update the state of the group of circles.
So the game.enableStep method is useful for hunting down those hard to find bugs, by making it so the update method is called manually each time game.step is called. This is just what needs to happen sometimes when a project starts to get a little complicated, as the method allow me to follow the state of things one frame at a time.