Phaser uses states in game development. You can divide your game into blocks depending on its state. For example:
- splash screen
- main menu
- game screen
- score screen
Each one of these screens can be developed as states and each state can be saved in a separate file. State management releases resources for the game to use and manages memory. You can go back and forth between states but only one state can ever be active at a time. For example you can go from the pause state to the game play state and vice versa but you can’t be in these 2 states at the same time.
Some common states in Phaser.js are:
- Game over
Each state has public methods such as init(), loadRender() etc. The most common methods are preload(), create() and update().
States are useful as they help us to moduralize our code and manage it. Since each screen is in a separate state and each state in its own file, we won’t have to manage all our code in one big file. If your game has more than 1 level, each game level can be a state of its own.
The Boot state handles any set up configuration needed for the game for example, setting the screen dimensions, setting up the physics engine etc. It also calls the next state. The main purpose of the Boot’s state is to load assets for the Preloader state. In turn the Preloader state will loads assets for our game. The Boot state is not seen on the screen, so to speak it “boots up the system”
Phaser loads images and assets uinto memory before launching the game, since the gam,e heavily depends on those assets being available for a player to play the game. In the preload state the preload() method will make the assets available to the game scene.
In the Main state the game logic for the game is handled. This is where you will put the chunk of your code for the game itself.
Game over state
In this state, the game over screen will display the total score, quit and reset buttons and any other information you want to convey once the game is over.