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 游戏。这些指南为你指明方向，而不是设下限制。