State System

A state system becomes really useful when we start actually making a game. It allows us to create independent scenes for our game and easily switch between theme. For example, you can have a "menu" state, "game" state, and "game over state", and easily switch between them.

For more complicated games, you might have a state for each level, or area etc..

Creating a new state
We've actually already been using a state, that's the default one. When we initialize a game like this:

We're actually creating a state. A full list of all the function/callbacks in a state can be found here:

http://phaser.io/docs/2.4.2/Phaser.State.html#methods

To add a new state, we use the game.state.add function.

A state object is just an object that defines the function callbacks, as we've seen above.

Switching states
Once you've created your states, you can switch between them by just calling:

Doing this will call the shutdown function of whatever state is currently running, and then run the create function of this new state (which is the default one in this case).

Always remember: If you're using multiple states, make sure to remove everything created in the shutdown state. Otherwise, every time you switch, more objects will be created, and that's just a mess!

Challenges

 * Can you create two states, one with 100 objects moving around, and another with only one object, and toggle between them using the mouse?