State Management

[Luketep]

Hello fellow Game-Devs!

I am building a local multiplayer bomberman prototype to learn Phaser. I've split up the game code into different states. When I switch from one state to another the content of the previous state is still rendered.

If you want to trigger the state change manually (in case you dont have a 360 controller) just open the browser console and type: bomberman.engine.state.start('Menu');

The complete source code is available here: https://github.com/Luketep/bomberman/tree/bomberman-local-multiplayer

How to run the game locally:

# Checkout the repo and correct branch
git clone https://github.com/Luketep/bomberman.git && cd bomberman
git checkout bomberman-local-multiplayer

# install deps
npm install -g gulp
npm install

# run express server
node app.js

# in a separate cli window, run file watcher
gulp watch

Game.js create function

// setup states
game.state.add('SplashScreen', new SplashScreen());
game.state.add('Menu', new Menu());
game.state.add('Credits', new Credits());
game.state.add('Level', new Level());
game.state.add('Score', new Score());
game.state.add('PlayerSelect', new PlayerSelect());
        
// run initial state
game.state.start('SplashScreen');

Console output 

// Game is loading
SplashScreen: preload
SplashScreen: create
SplashScreen: startPreload
SplashScreen: loadStart
SplashScreen: fileComplete xbox360
SplashScreen: loadComplete

// Manual state change trigger
bomberman.engine.state.start('Menu');

// Splashscreen is cleaning up
Destroying 3 entities for SplashScreen

// Menu State is loaded
Menu: preload
Menu: create
Menu: startPreload
// somehow SplashScreen also starts loading
SplashScreen: loadStart
Menu: loadStart
SplashScreen: fileComplete xbox360
Menu: fileComplete xbox360
SplashScreen: loadComplete
Menu: loadComplete

 

[stupot]

Hi Luketep,

You forgot to say that the browser should be pointed at http://localhost:5555/

Anyway it looks like your SplashScreen state is hooked into the loaders onLoadComplete, so when you move to the 'Menu' state it will then trigger a load of controller.json, the SplashScreen gets notification when this is loaded.

The problem is that your SplashScreen loadComplete() does some construction and it does this everytime it gets notified of loading completion whether it was triggered by itself or another state.

So it isn't actually rendering multiple states rather than adding stuff from other states into the current states, which in this case is the following SplashScreen stuff.

        this.createTexts(game);
        this.createControllerButtons(game);

 

[Luketep]

Ahh! Right, cause I am binding the the "global" events of game.load with each state. I've now added the following code to the AbstractState's shutdown function wich seem to do the trick:

game.load.onLoadStart.removeAll();
game.load.onFileComplete.removeAll();
game.load.onLoadComplete.removeAll();

 

[Luketep]

I've tested the different states and it works great. Thanks!

[stupot]

Great, glad you got it sorted.  Theres also the addOnce() instead of add() which might be an easier way of controlling it, especially if you add many states.  Or in your load handler you could check the current state matches itself before doing anything.

[Luketep]

I think I will try out the addOnce instead of add. The self-check idea I already had, but I discarded that since I felt it would look odd in the code.