What is the best way to manage 'state' in Phaser?

Question

I have heard that this is not the best way to manage state in phaser

var game = new Phaser.Game(800, 600, Phaser.CANVAS,'YourGameName');
game.state.add("Boot", Boot);
game.state.add("Preload", Preload);
game.state.add("MainMenu", mainMenu);
game.state.add("Play", Play);
game.state.add("GameOver", GameOver);
game.state.start("Boot");

so what is the best way to do it. I am newbie in Phaser game development.

Answer 1

The point is - what are you really want form your state manager. In my case i created SceneManager that has method

addScene(name, state, options) {
    this.game.state.add(name, state);
    this.scenes.add(name, options);
}

And it can decided based on options what kind of scene should be loaded. So in initial phase a do fill it with states like this:

config.scenes.forEach( (scene) => deridara.addScene(scene[0], scene[1], scene[2])); 

Where config.scenes is something like:

scenes : [
    ['DreamForest', DreamForest],
    ['Hills', Hills],
    ['TreeСreature', TreeСreature],
    ['Waterfall', Waterfall],
    ['Astral', Astral] //Third param could be options
]

And thouse objects are just classes that extends class Scene

class Scene {
constructor(game) {}

init() {}

preload() {
    this.preloadBar = this.game.add.graphics(0, 50);
    this.preloadBar.lineStyle(3, 0xffffff, 1);
    this.preloadBar.moveTo(0, 0);
    this.preloadBar.lineTo(this.game.width, 0);

    this.preloadBar.scale.x = 0; // set the bar to the beginning position

    PubSub.publish('scene:loading:start', {
        name : this.name
    }); 
}

create() {  
    this.game.scale.fullScreenScaleMode = Phaser.ScaleManager.NO_SCALE;     
    this.game.input.keyboard.onPressCallback = this.keyboardListener;
}

keyboardListener(key) {
    switch (key) {
        case 'а':
        case 'f':
            if (this.game.scale.isFullScreen)
            {
                this.game.scale.stopFullScreen();
            }
            else
            {
                this.game.scale.startFullScreen(false);
            }
            break;
    }   
}

update() {}


shutdown() {}

loadUpdate() {
  // every frame during loading, set the scale.x of the bar to the progress (an integer between 0
  // and 100) divided by 100 to give a float between 0 and 1
  this.preloadBar.scale.x = this.game.load.progress * 0.01;
}

}

So i have place to pass common code like events triggers and loaders, and clever enough controller to rule them all =)