上海浦东新区做网站,一个完整的品牌策划方案范文,山西+网站建设,招商网站平台用phaserjs开发了好多游戏了#xff0c;但是对phaser还是了解不深#xff0c;只知道怎么去用#xff0c;今天就特意花点时间研究下phaser的状态管理到底是怎么回事。 首先#xff0c;new Phaser.Game#xff0c;以下是Phaser.Game的部分源码#xff1a; Phaser.Game fun…用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事件的回调一切准备就绪执行bootboot源码如下 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);}} 很有序的初始化一些事件回调和方法其中worldstage等等都有boot初始化方法整个Phaser里Phaser.Stage只在这里实例化一次仅此一次游戏的舞台就只有这一个stagestage继承PIXI.DisplayObjectContainer到这里就都清楚了。 Phaser.World也仅此一次被实例化它继承自Phaser.GroupPhaser.Group也继承自PIXI.DisplayObjectContainer但是实例化它的时候默认是把它添加到Phaser.World里的 if (parent undefined){parent game.world;} 所以Group都是在World里除非显示指定stage为其parent实际开发几乎没这个必要。 Phaser.GameObjectFactory类封装了Phaser的组件如imagesprite等显示组件基本都是通过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和stategame就是我们的游戏对象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;}, 就是一个包含initpreloadcreate等的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 ignoredif (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 queuethis.game.load.start();}}else{// No init? Then there was nothing to load eitherthis.loadComplete();}}}, start的时候this._pendingState设置了当前的statepreUpdate方法先清除上一个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包括initpreloadcreate等等。 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 statethis.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 statethis.onShutDownCallback state[shutdown] || this.dummy;// Reset the physics system, but not on the first state startif (this.current ! ){this.game.physics.reset();}this.current key;this._created false;// At this point key and pendingState should equal each otherthis.onInitCallback.apply(this.callbackContext, this._args);// If they no longer do then the init callback hit StateManager.startif (key this._pendingState){this._args [];}this.game._kickstart true;}, 每个state在start的时候都会重新执行initpreloadcreateupdate等方法一遍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 独立模块或场景都可添加stateUI界面最好是继承Group不要做state注意由于state切换的时候会destroy world所以单例或共享View界面最好在start之前全部先移除否则会出现destroy摧毁当前的单例view的child等所有 导致单例undefined 错误。 转载于:https://www.cnblogs.com/wangzisheng/p/9051839.html
