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\$ – Pooya Estakhri Aug 1 '15 at 7:23
  • \$\begingroup\$ I have read it in the first answer of the link link \$\endgroup\$ – Shohanur Rahaman Aug 1 '15 at 11:17
  • 1
    \$\begingroup\$ This is the best way to manage it. \$\endgroup\$ – David 'mArm' Ansermot Sep 17 '15 at 10:08

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

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.