phaser-2d-game

Phaser 2D ゲーム

概要

このプラグインのメインの実行経路には、このスキルを使用します。Phaser は、ゲームプレイのルールをフレームワークに押し込むことなく、レンダリング、タイミング、スプライト、カメラ、シーンの連携を適切に処理できるため、ここでの 2D ブラウザーゲームの標準スタックです。

推奨スタック：

• Phaser
• TypeScript
• Vite
• ゲームキャンバスに重ねる DOM ベースの HUD またはメニュー

アーキテクチャ

1. ゲームプレイの状態は Phaser シーンの外部に保持します。
   • システムがルール、手番順、移動、戦闘、インベントリ、目標、進行を管理します。
   • Phaser シーンは、システムの状態をスプライト、カメラの動き、アニメーション再生、エフェクトに反映します。
2. シーンは薄く保ちます。
   • 起動とアセットの事前読み込み
   • メニューまたはシェルシーン
   • ゲームプレイシーン
   • オプションのオーバーレイまたはデバッグシーン
3. レンダラー側のオブジェクトは破棄可能なものとして扱います。
   • スプライトコンテナー、エミッター、トゥイーン、カメラリグはビューの状態であり、信頼できる情報源ではありません。
4. ゲームプレイコード全体で、ファイルパスを直接参照するより、安定したアセットマニフェストキーを優先します。

実装ガイダンス

• シーンがシミュレーションの状態を読み取り、入力アクションを返す統合境界を 1 つ設けます。
• シーン内での局所的な状態変更より、決定論的なシステム更新を優先します。
• テキスト、ステータスの情報量、または応答性が重要な場合、HUD とメニューには DOM を使用します。
• アニメーションの状態は、場当たり的なスプライトフラグではなく、ゲームプレイの状態から導出します。

相性の良い 2D モード

• ターン制グリッドと戦術ゲーム
• トップダウン型の探索
• 横視点のアクションプラットフォーマー
• スプライトアニメーションを使ったキャラクターアクション戦闘
• 軽量な運営ゲームやデッキ主導型のバトルシーン

カメラと演出

• カメラモデルは早い段階で決めます。固定、追従、部屋単位、または戦術的なパンから選びます。
• カメラのロジックはゲームルールと分離します。
• 画面揺れ、ヒットストップ、視差効果は控えめに使います。エフェクトは見やすさを高めるものであり、妨げるものであってはなりません。

UI の統合

• HUD、コマンドメニュー、設定、ナラティブパネルには DOM オーバーレイを使用します。
• キャンバスはゲーム世界、戦闘の見やすさ、動きの表現を担います。
• プロジェクトでキャンバス内の表示が明示的に必要でない限り、情報量の多いテキストや複雑な設定 UI を Phaser に詰め込まないでください。

アセットの整理

• characters/
• environment/
• ui/
• fx/
• audio/
• data/

マニフェストキーは、人が読みやすく安定したものにします。

標準のディレクトリ構成

具体的なモジュール分割については、../../references/phaser-architecture.md を参照してください。

アンチパターン

• システムとの境界を設けずに、update() ループ内にゲームルールを記述する
• 変更可能なグローバルオブジェクトを介して、シーン間で状態を渡す
• 手軽だからという理由だけで、ゲームキャンバスに HUD テキストを描画する
• マニフェスト層を使わず、アセットパスをあらゆる場所に埋め込む
• ゲーム UI に汎用的な React ダッシュボードのパターンを使いすぎる

参考資料

• 共通アーキテクチャ：../web-game-foundations/SKILL.md
• フロントエンドの方針：../game-ui-frontend/SKILL.md
• スプライトのワークフロー：../sprite-pipeline/SKILL.md
• Phaser の構成：../../references/phaser-architecture.md