【Phaser3】GameConfig に独自の値を設定し受け取りたい

Phaser3でGameConfig に独自の値を設定し受け取りたい 技術ネタ

Phaser.Game でオブジェクトを作って実行する際に、オブジェクト(Scene)に独自の値を渡したかったのですが、やり方がわからず苦戦しました。
その時の対応方法について紹介したいと思います。

環境情報
本説明は、以下の環境で行っております。

  • Phaser3 : v3.16.2
  • TypeScript : 3.4.5


対応方法

DataManager を使うことで値の受け渡しが可能です。

具体的には、GameConfig に callbacks で game.registry.merge() を使って値を設定し、シーン側で this.registry.get() を使って、その値を受け取ります。

実際のソースコードで説明した方が解りやすいと思いますので、以下のサンプルソースを参照してください。

サンプルソース

実行すると、画面に「あいうえお」と表示されます。
「あいうえお」が、きちんとシーン側に渡っていることが確認できます。

最初に呼び出されるソース

let config: GameConfig = {
  scene: [MyScene.Scene],
  backgroundColor: "#fff",
  width: 800,
  height: 600,
  type: Phaser.AUTO,
  callbacks: {
    preBoot: (game: Phaser.Game) => {
      game.registry.merge({ CustomKey: "あいうえお" });
    }
  }
};

window.onload = () => {
  new Phaser.Game(config);
};

シーン側のソース

module MyScene {
  export class Scene extends Phaser.Scene {

    private create() {
      let customValue: string = this.registry.get("CustomKey");
      this.add.text(
        100,
        100,
        customValue,
        {
          fontFamily: "Arial Black",
          fontSize: 30,
          color: "#000000",
          fontStyle: "bold"
        }
      );
    }
  }
}

最後に

Phaser3 は Example が充実していますがが、それでもわからないことが多く、日本語で説明しているサイトもあまり無いので、調べるのに苦労しています。

今回説明した方法も適切なのかわかりませんが、1つの解として参考にしていただければと思います。