Phaser.jsでもっとコードを読みやすく

Phaser.jsを使用してコードを書いていると、一つのクラスが異常に長くなりコードが読みにくくなるということが発生することがあります。この記事ではそのようなことが起こった際の、読みやすくするテクニックを紹介します。
またこの記事ではJavaScriptのClassについて理解していることを前提に書いています。知らない人や曖昧な人は、侍エンジニアでも読みましょう。
https://www.sejuku.net/blog/49551

1.シーンで分ける

これはPhaser.jsの「基本のき」ですが、Phaser3にはシーンという機能があります。この機能を使うとより高度なゲームを作成することができます。また、シーンをうまく活用することで、コードを見やすくすることも可能です。

one.tsx

//Phaser.Sceneを継承したクラスにする
export class one extends Phaser.Scene {
  constructor() {
    //ここでシーンのキーを渡す
    super("one");
  }
  create() {
    this.add.text(200, 300, "1").setOrigin(0.5, 0.5).setFontSize(100);
  }
}

このように書くと、以下のように表示されます。

シーンはいくつも書いて同時に実行したり、ほかのシーンに移ったりすることが可能です。

二つ目のシーン、two.tsのコード

two.ts

export class two extends Phaser.Scene {
  constructor() {
    super("two");
  }
  create() {
    this.add.text(400, 300, "2").setOrigin(0.5, 0.5).setFontSize(100);
  }
}

one.tsに以下のコードを追加すると、

one.ts

update(time: number): void {
if (time > 5000) this.scene.start("two");
}

5秒後に二つ目のシーンであるtwoが表示されます。

one.tsのcreate関数内に以下のコードを書くと

one.ts

this.scene.launch("two");

二つのシーンが同時に実行されます。

ほかにも、それぞれのシーンを一時停止したり、削除したり、インスタンスを取得したりすることができます。興味がある人は調べてみてください。

2.ゲームオブジェクトを別のクラスに切り出す

どちらかというとこのやり方のほうが本命です。色々とコードを書いているとプレイヤーなどの特定のゲームオブジェクトに関する処理が増え、コードが読みづらくなることがよくあります。そのようなときは、そのゲームオブジェクトをシーンとは別のクラスとして切り出してしまいましょう。以下がその例です。

player.ts

export default class player extends Phaser.GameObjects.Sprite {
  constructor(parent: Phaser.Scene) {
    //スプライトの情報を渡す
    super(parent, 300, 300, "test");
    //親のシーンに自身を追加する
    parent.add.existing(this);
  }
}

見て分かるように、スプライトのクラスを拡張したクラスを作成して、それを親のシーンに追加しています。これを特定のシーンで利用したい場合、次のように書きます。

new player(this);

引数に親となる自分自身のシーンを渡しています。このようにして作成したスプライトは、大きさや座標などを変えることが可能です。また切り出したゲームオブジェクトが物理演算を使用するものだった場合、parent.add.existing(this)でシーンに追加する以外に、物理エンジンに追加する必要があります。Arcadeを使用している場合scene.physics.world.enable(this)とconstructorに書けばいいです。

最後に

最後に宣伝の時間です。今回この記事で書いたようなテクニックも利用して、ゲームサイトを開発しているのでよかったら見ていってください。GitHubにコードを公開しているのでよかったら参考にしてください。
https://kyouryoku.net/
https://github.com/goshieta/kyouryoku-play