🔖

【RPGツクールMZ】タイトル画面表示の辺りまでの処理を追ってみる

に公開
RPGツクールMZ
tech

概要

RPGツクールMZのゲーム起動からタイトル画面までの処理を追っていく。

  • 手元にRPGツクールMZがある（ソースコードを見れる）人向け。
  • 流れを把握するのが目的なので、主に正常系を確認し、メソッド内の処理を深く追わないことがある。

環境

RPGMZ 1.0.2

1. index.html

body要素内でjs/main.jsを読み込む。

<script type="text/javascript" src="js/main.js"></script>

2. js/main.js（スクリプト読込前）

Mainオブジェクトを作成し、runメソッドを実行する。

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

runメソッドでは、以下のメソッドを実行する。

  • showLoadingSpinner
  • testXhr
  • loadMainScripts

2.1. Main.showLoadingSpinner

ローディング表示（読み込み中のぐるぐる回るやつ）をbody要素に追加する。

2.2. Main.testXhr

XMLHttpRequestが動くかのテスト？🤔

2.3. Main.loadMainScripts

scriptUrls配列のURLの数だけbody要素にscript要素を追加する。

追加されたscript要素は、URLの読み込みが終わる毎にonScriptLoadメソッドを実行する。onScriptLoadメソッドでは、スクリプトが全て読み込まれていた場合にPluginManager.setupを実行する。

3. PluginManager (js/rmmz_managers.js)

3.1 PluginManager.setup

プラグインの数だけbody要素にscript要素を追加する。

4. js/main.js（スクリプト読込後）

Main.onWindowLoadをイベントリスナーに登録する。

4.1. Main.onWindowLoad

Main.initEffekseerRuntimeメソッドを実行する。

4.1.1. Main.initEffekseerRuntime

effekseer.initRuntimeメソッドを実行する。

読み込み後にMain.onEffekseerLoadメソッドを実行する。

4.1.1.1. Main.onEffekseerLoad

Main.eraseLoadingSpinnerメソッド（ローディング画面を終了する）を実行した後、SceneManager.runメソッドを実行する。

5. SceneManager (js/rmmz_managers.js)

5.1. SceneManager.run

以下のメソッドを実行する。

  • SceneManager.initialize
  • SceneManager.goto
  • Graphics.startGameLoop

5.1.1. SceneManager.initialize

SceneManagerの初期化を行うため、以下のメソッドを実行する。

  • checkBrowser
  • checkPluginErrors
  • initGraphics
  • initAudio
  • initVideo
  • initInput
  • setupEventHandlers

5.1.1.1. SceneManager.checkBrowser

使用しているブラウザでプログラムの実行に問題がないか確認する。

5.1.1.2. SceneManager.checkPluginErrors

導入したプラグインでエラーが発生していないか確認する。

5.1.1.3. SceneManager.initGraphics

描画周りの初期化を行う。

5.1.1.3.1. Graphics.setTickHandler

このメソッドの引数に取った関数（メソッド）をGraphics._tickHandlerに格納する。格納された関数はPIXI.Applicationオブジェクトのtickerに追加され、レンダリングの更新時に関数が実行されるようになる？🤔

ざっくり書くとSceneManager.updateが繰り返し実行されるようになる。

5.1.1.4. SceneManager.initAudio

音声系の初期化を行う。

5.1.1.5. SceneManager.initVideo

動画系の初期化を行う。

5.1.1.6. SceneManager.initInput

入力系の初期化を行う。

Input.initialize();
TouchInput.initialize();

Inputはキーボードとゲームパッドの入力、TouchInputはマウスとタッチスクリーンの入力を受け持つ。

5.1.1.7. SceneManager.setupEventHandlers

イベントリスナーの登録を行う。

5.1.2. SceneManager.goto

SceneManager.runの引数に渡されたScene_Boot（js/rmmz_scenes.js）オブジェクトを作成する。

5.1.3. SceneManager.update

SceneManager.updateMainを実行する。

5.1.3.1 SceneManager.updateMain

以下のメソッドを実行する。

  • SceneManager.updateFrameCount
  • SceneManager.updateInputData
  • SceneManager.updateEffekseer
  • SceneManager.changeScene
  • SceneManager.updateScene
5.1.3.1.1 SceneManager.updateFrameCount

合計フレーム数を更新している？（ドキュメントにtotal frameとあるので、ゲーム起動からのフレーム数？🤔）

5.1.3.1.2 SceneManager.updateInputData

InputとTouchInputの状態を更新する。

5.1.3.1.3 SceneManager.updateEffekseer

Effekseerの状態を更新する。

5.1.3.1.4 SceneManager.changeScene

条件を満たした時、に_nextSceneに格納されているオブジェクトを_sceneに格納し、createメソッドを実行する。

5.1.3.1.5 SceneManager.updateScene

Scene_Bootのstartメソッドを実行し、その中のstartNormalGameメソッドからScene_Titleシーン（タイトル画面）を呼び出す。

5.1.4. Graphics.startGameLoop (js/rmmz_core.js)

PIXI.Applicationのstartメソッドを叩いている？🤔

参考

あとがき

オブジェクト指向とのロードイベント（主にイベントリスナーの）とゲームループが入り乱れていて時折迷子になった🙄（今後丁寧な解説を書くことがあったらこの3要素はしっかり押さえたい）

何よりオブジェクト指向の流れを文章にし辛かった。パンくずリストっぽいものを書くなり、途中途中で呼び出しの図みたいなものがあれば幾らか分かり易くなるかもしれない🤔

Discussion