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);

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

  • \$\begingroup\$ Where youve heard this? This is the noly way i saw in complete game tutorials \$\endgroup\$ Commented Aug 1, 2015 at 7:23
  • \$\begingroup\$ I have read it in the first answer of the link link \$\endgroup\$ Commented Aug 1, 2015 at 11:17
  • 1
    \$\begingroup\$ This is the best way to manage it. \$\endgroup\$ Commented Sep 17, 2015 at 10:08

1 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)

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 =)

  • \$\begingroup\$ The management you followed here is bit complex. \$\endgroup\$ Commented Aug 4, 2015 at 1:13
  • \$\begingroup\$ Sorry... but what goals do you have? \$\endgroup\$
    – Timopheym
    Commented Aug 4, 2015 at 23:31
  • \$\begingroup\$ I am looking for an effective and comfortable way to manage state. any way thanks for the reply \$\endgroup\$ Commented Aug 6, 2015 at 7:03

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .