Phaser 3 スニペットの使い方

このサイトでは、ゲーム開発フレームワーク Phaser 3 ですぐに使える演出やロジックの断片（スニペット）を紹介しています。

1. 前提条件

あなたのプロジェクトで Phaser 3 が既にセットアップされていることを前提としています。 まだの場合は、以下のコマンドでインストールしてください。

npm install phaser

2. スニペットの利用方法

各記事の「コードスニペット」セクションは、主に以下の構成になっています。

関数 (Function)

汎用的に使えるヘルパーメソッドです。これをあなたの Scene クラスにコピー＆ペーストしてください。

// 例: Sceneクラス内に追加
public myHelperFunction() {
    // ...
}

使い方 (Usage)

その関数を create() または update() メソッド内でどのように呼び出すかの例です。

// 例: createメソッド内で呼び出し
create() {
    this.myHelperFunction();
}

3. TypeScriptの型定義

スニペットは TypeScript で記述されています。 Phaser.GameObjects.Text などの型注釈が含まれているため、JavaScriptを使用している場合は型部分を削除してご利用ください。

4. フレームワークでの利用 (React / Next.js / Astro)

Phaser 3 はブラウザ（クライアントサイド）でのみ動作するライブラリです。 Next.js や Astro などの SSR (Server-Side Rendering) 環境で使用する場合、「window is not defined」エラー が発生することがあります。

これを防ぐには、以下のような対策が必要です。

• Next.js: next/dynamic を使い、ssr: false でコンポーネントを読み込む。
• Astro: client:only ディレクティブを使用してコンポーネントを読み込む。
• useEffect: Reactなどの場合、useEffect フックの中（マウント後）でのみ Phaser を初期化する。

例: Astroでのコンポーネント読み込み(参考)

// コンポーネント側での動的インポート例
const initGame = async () => {
    // Phaserを動的にインポートすることでSSR時の実行を防ぐ
    const Phaser = (await import('phaser')).default;
    new Phaser.Game(config);
};