(1) 游戏生命周期

探究游戏生命周期

程序入口

  const main = new Main();
  main.run();

主线: 程序入口 Main

// in Main.prototype.run
showLoadingSpinner();
testXhr();
loadMainScripts(); // ※ 异步执行, 加载RM脚本

// 异步回调
// in Main.prototype.onWindowLoad
initEffekseerRuntime() // 异步执行

// 这期间发生了各个RM脚本的加载

// 异步回调 (当所有脚本初始化完毕)
// in Main.prototype.onEffekseerLoad
SceneManager.run(Scene_Boot); // ※ SceneManager启动

主线: SceneManager 初始化

SceneManager.run = function(sceneClass) {
    try {
        this.initialize(); // ※ 执行各种初始化
        this.goto(sceneClass);
        Graphics.startGameLoop(); // ※ 启动PIXI.Application 见下文
    } catch (e) {
        this.catchException(e);
    }
};

// 初始化函数, 省略部分代码
SceneManager.initialize = function() {
    this.initGraphics(); // ※ 初始化图像
};

// 初始化图像
SceneManager.initGraphics = function() {
    // ※ 初始化Graphics静态类, 包括PIXI对象, 见下文
    if (!Graphics.initialize()) {
        throw new Error("Failed to initialize graphics.");
    }
    // ※ 绑定SceneManager的update到PIXI的ticker上面
    Graphics.setTickHandler(this.update.bind(this));
};

支线: PIXI.Ticker 初始化

// Graphics静态类初始化, 省略部分代码
Graphics.initialize = function() {
  this._tickHandler = null;
  this._app = null;
  this._createPixiApp();
}

// 初始化PIXI.Application
Graphics._createPixiApp = function() {
    try {
        this._setupPixi();
        this._app = new PIXI.Application({
            view: this._canvas,
            // ※ ticker 默认是停止状态
            autoStart: false
        });
        // 使用了默认的公用计时器:PIXI.Ticker.shared
        // 移除默认render
        this._app.ticker.remove(this._app.render, this._app);
        // ※ 绑定_onTick事件, 等价于绑定_tickHandler, 等价于绑定SceneManager.update
        this._app.ticker.add(this._onTick, this);
    } catch (e) {
        this._app = null;
    }
};

// 包含了帧数修正的_onTick方法
// Ticker的默认FPS是60
Graphics._onTick = function(deltaTime) {
    this._fpsCounter.startTick();
    if (this._tickHandler) {
        this._tickHandler(deltaTime);
    }
    if (this._canRender()) {
        this._app.render();
    }
    this._fpsCounter.endTick();
};

支线: PIXI.Ticker 启动

// 在 SceneManager.run中
Graphics.startGameLoop()

// 计时器启动, 周期性触发SceneManger.update, 从而更新整个游戏画面
Graphics.startGameLoop = function() {
    if (this._app) {
        this._app.start();
    }
};

总结

image.png