phaser-gamedev

Phaser ゲーム開発

Phaser 3 のシーンベースのアーキテクチャと物理システムを使って、2D ブラウザーゲームを開発します。

---

停止：スプライトシートを読み込む前に

まず spritesheets-nineslice.md を読んでください。

スプライトシートの読み込みはデリケートです。数ピクセルのずれでも、気づかないうちにデータが破損し、見た目の問題が連鎖的に発生します。参照ファイルには、必須の確認手順が記載されています。

基本ルール（詳細は参照ファイルを確認してください）：

1. ローダーのコードを書く前にアセットを計測してください。フレームの寸法を推測してはいけません
2. キャラクターのスプライトには正方形のフレームを使います：frameWidth=56 と算出した場合は、まず高さも 56 にしてみてください
3. アニメーションごとにフレームサイズは異なります：走る動作には待機状態より幅の広いフレームが必要です。攻撃には武器を振るための追加幅が必要です。スプライトシートごとに計測してください
4. 間隔を確認してください：フレーム間に隙間がある場合は、ローダー設定で spacing: N が必要です
5. 計算を検証してください：imageWidth = (frameWidth × cols) + (spacing × (cols - 1))

---

参照ファイル

該当する機能に取り組む前に、以下を読んでください。

作業内容	先に読むファイル
スプライトシートの読み込み全般	spritesheets-nineslice.md
ナインスライス UI パネル	spritesheets-nineslice.md
Tiled タイルマップ、衝突レイヤー	tilemaps.md
物理演算の調整、グループ、プーリング	arcade-physics.md
パフォーマンスの問題、オブジェクトプーリング	performance.md

---

アーキテクチャの決定（早めに行う）

物理システムの選択

システム	使用する場面
Arcade	プラットフォーマー、シューティングゲーム、ほとんどの 2D ゲーム。高速な AABB 衝突判定
Matter	物理パズル、ラグドール、リアルな衝突判定。低速ですが、より正確です
なし	メニューシーン、ビジュアルノベル、カードゲーム

シーン構成

scenes/
├── BootScene.ts      # Asset loading, progress bar
├── MenuScene.ts      # Title screen, options
├── GameScene.ts      # Main gameplay
├── UIScene.ts        # HUD overlay (launched parallel)
└── GameOverScene.ts  # End screen, restart

シーン遷移

this.scene.start('GameScene', { level: 1 });     // Stop current, start new
this.scene.launch('UIScene');                     // Run in parallel
this.scene.pause('GameScene');                    // Pause
this.scene.stop('UIScene');                       // Stop

---

基本パターン

ゲーム設定

const config: Phaser.Types.Core.GameConfig = {
  type: Phaser.AUTO,
  width: 800,
  height: 600,
  scale: {
    mode: Phaser.Scale.FIT,
    autoCenter: Phaser.Scale.CENTER_BOTH
  },
  physics: {
    default: 'arcade',
    arcade: { gravity: { y: 300 }, debug: false }
  },
  scene: [BootScene, MenuScene, GameScene]
};

シーンのライフサイクル

class GameScene extends Phaser.Scene {
  init(data) { }      // Receive data from previous scene
  preload() { }       // Load assets (runs before create)
  create() { }        // Set up game objects, physics, input
  update(time, delta) { }  // Game loop, use delta for frame-rate independence
}

フレームレートに依存しない移動

// CORRECT: scales with frame rate
this.player.x += this.speed * (delta / 1000);

// WRONG: varies with frame rate
this.player.x += this.speed;

---

アンチパターン

アンチパターン	問題	解決策
window 上のグローバル状態	シーン遷移で状態が壊れます	シーンデータ、レジストリを使います
create() 内での読み込み	参照時にアセットの準備ができていません	preload() で読み込み、Boot シーンを使います
フレームのカウント	ゲーム速度が FPS によって変わります	delta / 1000 を使います
単純な衝突判定に Matter を使う	不必要に複雑になります	Arcade でほとんどの 2D ゲームに対応できます
ひとつの巨大なシーン	拡張が困難になります	ゲームプレイ、UI、メニューを分けます
マジックナンバー	バランス調整が困難になります	設定オブジェクト、定数を使います
オブジェクトプーリングがない	GC によるカクつきが発生します	setActive(false) を使ったグループを利用します

---

覚えておくこと

Phaser はシーン、スプライト、物理演算、入力といった強力な基本機能を提供しますが、アーキテクチャを設計するのはあなたの役目です。

コーディングの前に考えてください。どのようなシーンが必要ですか？ エンティティは何ですか？ それらはどのように連携しますか？ どの物理モデルを使いますか？

Claude は、完成度の高い Phaser ゲームを丸ごと構築できます。これらのガイドラインは道筋を示すものであり、制約を設けるものではありません。