Phaser.jsでもっとコードを読みやすく
Phaser.jsを使用してコードを書いていると、一つのクラスが異常に長くなりコードが読みにくくなるということが発生することがあります。この記事ではそのようなことが起こった際の、読みやすくするテクニックを紹介します。
またこの記事ではJavaScriptのClassについて理解していることを前提に書いています。知らない人や曖昧な人は、侍エンジニアでも読みましょう。
1.シーンで分ける
これはPhaser.jsの「基本のき」ですが、Phaser3にはシーンという機能があります。この機能を使うとより高度なゲームを作成することができます。また、シーンをうまく活用することで、コードを見やすくすることも可能です。
//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のコード
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に以下のコードを追加すると、
update(time: number): void {
if (time > 5000) this.scene.start("two");
}
5秒後に二つ目のシーンであるtwoが表示されます。
one.tsのcreate関数内に以下のコードを書くと
this.scene.launch("two");
二つのシーンが同時に実行されます。
ほかにも、それぞれのシーンを一時停止したり、削除したり、インスタンスを取得したりすることができます。興味がある人は調べてみてください。
2.ゲームオブジェクトを別のクラスに切り出す
どちらかというとこのやり方のほうが本命です。色々とコードを書いているとプレイヤーなどの特定のゲームオブジェクトに関する処理が増え、コードが読みづらくなることがよくあります。そのようなときは、そのゲームオブジェクトをシーンとは別のクラスとして切り出してしまいましょう。以下がその例です。
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にコードを公開しているのでよかったら参考にしてください。
Discussion