用phaserjs开发了好多游戏了，但是对phaser还是了解不深，只知道怎么去用，今天就特意花点时间研究下phaser的状态管理到底是怎么回事。

首先，new Phaser.Game，以下是Phaser.Game的部分源码：

Phaser.Game = function (width, height, renderer, parent, state, transparent, antialias, physicsConfig) {

/\*\*  
\* @property {number} id - Phaser Game ID  
\* @readonly  
\*/  
this.id = Phaser.GAMES.push(this) - 1;

………………………(省略的代码)
// Parse the configuration object (if any)
if (arguments.length === 1 && typeof arguments[0] === 'object')
{
this.parseConfig(arguments[0]);
}
else
{
this.config = { enableDebug: true };

    if (typeof width !== 'undefined')  
    {  
        this.\_width = width;  
    }

    if (typeof height !== 'undefined')  
    {  
        this.\_height = height;  
    }

    if (typeof renderer !== 'undefined')  
    {  
        this.renderType = renderer;  
    }

    if (typeof parent !== 'undefined')  
    {  
        this.parent = parent;  
    }

    if (typeof transparent !== 'undefined')  
    {  
        this.transparent = transparent;  
    }

    if (typeof antialias !== 'undefined')  
    {  
        this.antialias = antialias;  
    }

    this.rnd = new Phaser.RandomDataGenerator(\[(Date.now() \* Math.random()).toString()\]);

    this.state = new Phaser.StateManager(this, state);  
}

this.device.whenReady(this.boot, this);

return this;

};

先看this.device.whenReady(this.boot, this);这段代码，源码的意思是设备准备就绪或者dom文档准备就绪后就执行boot，说白了就是DOMContentLoaded这个事件或者window的load事件的回调，一切准备就绪，执行boot，boot源码如下：

boot: function () {

    if (this.isBooted)  
    {  
        return;  
    }

    this.onPause = new Phaser.Signal();  
    this.onResume = new Phaser.Signal();  
    this.onBlur = new Phaser.Signal();  
    this.onFocus = new Phaser.Signal();

    this.isBooted = true;

    PIXI.game = this;

    this.math = Phaser.Math;

    this.scale = new Phaser.ScaleManager(this, this.\_width, this.\_height);  
    this.stage = new Phaser.Stage(this);

    this.setUpRenderer();

    this.world = new Phaser.World(this);  
    this.add = new Phaser.GameObjectFactory(this);  
    this.make = new Phaser.GameObjectCreator(this);  
    this.cache = new Phaser.Cache(this);  
    this.load = new Phaser.Loader(this);  
    this.time = new Phaser.Time(this);  
    this.tweens = new Phaser.TweenManager(this);  
    this.input = new Phaser.Input(this);  
    this.sound = new Phaser.SoundManager(this);  
    this.physics = new Phaser.Physics(this, this.physicsConfig);  
    this.particles = new Phaser.Particles(this);  
    this.create = new Phaser.Create(this);  
    this.plugins = new Phaser.PluginManager(this);  
    this.net = new Phaser.Net(this);

    this.time.boot();  
    this.stage.boot();  
    this.world.boot();  
    this.scale.boot();  
    this.input.boot();  
    this.sound.boot();  
    this.state.boot();

    if (this.config\['enableDebug'\])  
    {  
        this.debug = new Phaser.Utils.Debug(this);  
        this.debug.boot();  
    }  
    else  
    {  
        this.debug = { preUpdate: function () {}, update: function () {}, reset: function () {}, isDisabled: true };  
    }

    this.showDebugHeader();

    this.isRunning = true;

    if (this.config && this.config\['forceSetTimeOut'\])  
    {  
        this.raf = new Phaser.RequestAnimationFrame(this, this.config\['forceSetTimeOut'\]);  
    }  
    else  
    {  
        this.raf = new Phaser.RequestAnimationFrame(this, false);  
    }

    this.\_kickstart = true;

    if (window\['focus'\])  
    {  
        if (!window\['PhaserGlobal'\] || (window\['PhaserGlobal'\] && !window\['PhaserGlobal'\].stopFocus))  
        {  
            window.focus();  
        }  
    }

    if (this.config\['disableStart'\])  
    {  
        return;  
    }

    if (this.cache.isReady)  
    {  
        this.raf.start();  
    }  
    else  
    {  
        this.cache.onReady.addOnce(function () {  
            this.raf.start();  
        }, this);  
    }

}

很有序的初始化一些事件回调和方法，其中world，stage等等都有boot初始化方法，整个Phaser里Phaser.Stage只在这里实例化一次，仅此一次，游戏的舞台就只有这一个stage，stage继承PIXI.DisplayObjectContainer，到这里就都清楚了。

Phaser.World也仅此一次被实例化，它继承自Phaser.Group，Phaser.Group也继承自PIXI.DisplayObjectContainer，但是实例化它的时候，默认是把它添加到Phaser.World里的，

if (parent === undefined)
{
parent = game.world;
}

所以Group都是在World里，除非显示指定stage为其parent，实际开发几乎没这个必要。

Phaser.GameObjectFactory类封装了Phaser的组件，如image，sprite等，显示组件基本都是通过game.add直接被添加到World里（bitmapData除外这里不作研究）：

image: function (x, y, key, frame, group) {

    if (group === undefined) { group = this.world; }

    return group.add(new Phaser.Image(this.game, x, y, key, frame));

},

接下来看下this.state = new Phaser.StateManager(this, state);这段代码，Phaser.StateManager也是仅被实例化一次，主要用来管理游戏state的，构造函数有两个参数game和state，game就是我们的游戏对象，stage是默认的

boot: function () {

    this.game.onPause.add(this.pause, this);  
    this.game.onResume.add(this.resume, this);

    if (this.\_pendingState !== null && typeof this.\_pendingState !== 'string')  
    {  
        this.add('default', this.\_pendingState, true);  
    }

},

默认state的key为'default'，通过game.state.add添加state的源码：

add: function (key, state, autoStart) {

    if (autoStart === undefined) { autoStart = false; }

    var newState;

    if (state instanceof Phaser.State)  
    {  
        newState = state;  
    }  
    else if (typeof state === 'object')  
    {  
        newState = state;  
        newState.game = this.game;  
    }  
    else if (typeof state === 'function')  
    {  
        newState = new state(this.game);  
    }

    this.states\[key\] = newState;

    if (autoStart)  
    {  
        if (this.game.isBooted)  
        {  
            this.start(key);  
        }  
        else  
        {  
            this.\_pendingState = key;  
        }  
    }

    return newState;

},

就是一个包含init，preload，create等的object或function，或者是Phaser.State类，这个类就是封装一个state包含的所有方法，所有方法没有任何实现。

game.state.start源码：

start: function (key, clearWorld, clearCache) {

    if (clearWorld === undefined) { clearWorld = true; }  
    if (clearCache === undefined) { clearCache = false; }

    if (this.checkState(key))  
    {  
        //  Place the state in the queue. It will be started the next time the game loop begins.  
        this.\_pendingState = key;  
        this.\_clearWorld = clearWorld;  
        this.\_clearCache = clearCache;

        if (arguments.length > 3)  
        {  
            this.\_args = Array.prototype.splice.call(arguments, 3);  
        }  
    }

},

就是检查下是否是一个State，没什么啊，其实真正的start是在preUpadte里，

preUpdate: function () {

    if (this.\_pendingState && this.game.isBooted)  
    {  
        var previousStateKey = this.current;

        //  Already got a state running?  
        this.clearCurrentState();

        this.setCurrentState(this.\_pendingState);

        this.onStateChange.dispatch(this.current, previousStateKey);

        if (this.current !== this.\_pendingState)  
        {  
            return;  
        }  
        else  
        {  
            this.\_pendingState = null;  
        }

        //  If StateManager.start has been called from the init of a State that ALSO has a preload, then  
        //  onPreloadCallback will be set, but must be ignored  
        if (this.onPreloadCallback)  
        {  
            this.game.load.reset(true);  
            this.onPreloadCallback.call(this.callbackContext, this.game);

            //  Is the loader empty?  
            if (this.game.load.totalQueuedFiles() === 0 && this.game.load.totalQueuedPacks() === 0)  
            {  
                this.loadComplete();  
            }  
            else  
            {  
                //  Start the loader going as we have something in the queue  
                this.game.load.start();  
            }  
        }  
        else  
        {  
            //  No init? Then there was nothing to load either  
            this.loadComplete();  
        }  
    }

},

start的时候，this._pendingState设置了当前的state，preUpdate方法先清除上一个state，再设置当前state，

setCurrentState里调用了link方法同时初始化一些事件监听，clearCurrentState方法调用了unlink方法同时移除一些事件监听，link方法如下：

link: function (key) {

    var state = this.states\[key\];

    state.game = this.game;  
    state.add = this.game.add;  
    state.make = this.game.make;  
    state.camera = this.game.camera;  
    state.cache = this.game.cache;  
    state.input = this.game.input;  
    state.load = this.game.load;  
    state.math = this.game.math;  
    state.sound = this.game.sound;  
    state.scale = this.game.scale;  
    state.state = this;  
    state.stage = this.game.stage;  
    state.time = this.game.time;  
    state.tweens = this.game.tweens;  
    state.world = this.game.world;  
    state.particles = this.game.particles;  
    state.rnd = this.game.rnd;  
    state.physics = this.game.physics;  
    state.key = key;

},

由此可见每个状态都有game所拥有的几乎所有属性，所以每个state都相当于一个单独的game，包括init，preload，create等等。

setCurrentState：

setCurrentState: function (key) {

    var state = this.states\[key\];

    this.callbackContext = state;

    this.link(key);

    //  Used when the state is set as being the current active state  
    this.onInitCallback = state\['init'\] || this.dummy;

    this.onPreloadCallback = state\['preload'\] || null;  
    this.onLoadRenderCallback = state\['loadRender'\] || null;  
    this.onLoadUpdateCallback = state\['loadUpdate'\] || null;  
    this.onCreateCallback = state\['create'\] || null;  
    this.onUpdateCallback = state\['update'\] || null;  
    this.onPreRenderCallback = state\['preRender'\] || null;  
    this.onRenderCallback = state\['render'\] || null;  
    this.onResizeCallback = state\['resize'\] || null;  
    this.onPausedCallback = state\['paused'\] || null;  
    this.onResumedCallback = state\['resumed'\] || null;  
    this.onPauseUpdateCallback = state\['pauseUpdate'\] || null;

    //  Used when the state is no longer the current active state  
    this.onShutDownCallback = state\['shutdown'\] || this.dummy;

    //  Reset the physics system, but not on the first state start  
    if (this.current !== '')  
    {  
        this.game.physics.reset();  
    }

    this.current = key;  
    this.\_created = false;

    //  At this point key and pendingState should equal each other  
    this.onInitCallback.apply(this.callbackContext, this.\_args);

    //  If they no longer do then the init callback hit StateManager.start  
    if (key === this.\_pendingState)  
    {  
        this.\_args = \[\];  
    }

    this.game.\_kickstart = true;

},

每个state在start的时候都会重新执行init，preload，create，update等方法一遍，this.onInitCallback.apply的时候还把参数传进来了，所以如果想start state的时候传参数，请定义个init方法，接受初始化传过来的data，这种模式犹如class的contructor一样使得

state之间相互独立，又可以相互传值，形成一条state网状链式结构，由于clearCurrentState默认clearWorld = true,所以在切换state的时候会先game.world.shutdown();相当于移除所有舞台元素，同时提供了shutdown方法用于关闭state时做的处理。

整个phaser的state流程是----》

初始化Phaser.Game可设置默认state ==》game.state.add(key,state);添加state，==》start state:game.state.start(key1) ==> 移除key1,game.state.start(key2) ==》如此循环，整个过程所有state共享game同时共享其所有方法和属性。

Phaser的初衷也是以最快的速度完成一个游戏，的确这种相互独立e又可以相互连接的state真是可以为开发节省很多很多时间。

设计思路：一个游戏先preload（一般之前会加个boot）=》menuState = 》gameState1=》gameState2=》gameState3等等=》overState  独立模块或场景都可添加state，UI界面最好是继承Group，不要做state，注意由于state切换的时候会destroy world，所以单例或共享View界面最好在start之前全部先移除，否则会出现destroy摧毁当前的单例view的child等所有 导致单例undefined 错误。