🖼️

【Phaser3】画像を用意せずにテクスチャを生成する方法

2025/01/17に公開

Phaser3を使ってゲームを開発していると、プロトタイプを作る際に簡単な図形をスプライトとして利用したいことがあると思います。
そんな時に便利なのがPhaser.GameObjects.Graphics.generateTextureです。

Phaser.GameObjects.Graphics.generateTexture を利用する基本手順

1. Graphics オブジェクトを生成する

まず、Phaser.GameObjects.Graphics を生成します。

const graphics = this.add.graphics();

2. 描画を行う

次に、Graphics オブジェクトを使って図形を描画します。
以下のコードでは、例として白色 (0xffffff) の矩形を描画しています。

graphics.fillStyle(0xffffff, 1); // 色を指定
graphics.fillRect(0, 0, 100, 100); // 矩形を描画

3. テクスチャを生成する

描画が完了したら、Graphics オブジェクトを元にテクスチャを生成します。
このテクスチャは後でスプライトとして利用可能です。

graphics.generateTexture("rect", 100, 100); // Graphics を元にテクスチャを生成

ここで生成したテクスチャには "rect" というキーが付けられます。

4. 生成したGraphicsオブジェクトを削除←ここ大事

最後に、生成したGraphicsオブジェクトを削除します。

graphics.destroy(); // Graphics を削除

これをやらないとリソースが解放されません。

5. 使用方法

画像のテクスチャを使用するときと同様にスプライトを生成できます。

const sprite = this.add.sprite(0, 0, "rect"); // スプライトを生成

完成コード

以上の手順をまとめたコードはこちらです。

// preload
const graphics = this.add.graphics(); // Graphics を生成
graphics.fillStyle(0xffffff, 1); // 色を指定
graphics.fillRect(0, 0, 100, 100); // 矩形を描画
graphics.generateTexture("rect", 100, 100); // Graphics を元にテクスチャを生成
graphics.destroy(); // Graphics を削除

// create
const sprite = this.add.sprite(0, 0, "rect"); // スプライトを生成

応用例

この方法を使えば、矩形だけでなく円や線、複雑な図形も描画してスプライトとして利用できます。
例えば、円のテクスチャを生成する場合は以下のように書きます。

// preload
const graphics = this.add.graphics();
graphics.fillStyle(0xff0000, 1); // 赤色を指定
graphics.fillCircle(50, 50, 50); // 半径 50 の円を描画
graphics.generateTexture("circle", 100, 100); // テクスチャを生成
graphics.destroy(); // Graphics を削除

// create
const sprite = this.add.sprite(0, 0, "circle");

もっと複雑な図形を描きたい場合はHiro256さんの以下の記事が参考になると思います。
https://zenn.dev/hiro256ex/articles/20240307_phaser3gameobjects

まとめ

Phaser.GameObjects.Graphics.generateTexture を使うと、画像ファイルを用意せずにテクスチャを生成し、それをスプライトとして利用できます。
シンプルな図形を多用するミニゲームやプロトタイプの開発に便利だと思います。

Discussion