phaser-2d-game

Phaser 2D 游戏

概述

在此插件的主执行路径中使用此技能。Phaser 是此处 2D 浏览器游戏的默认技术栈，因为它能很好地处理渲染、计时、精灵、摄像机和场景编排，同时不会强迫你将游戏规则写进框架。

首选技术栈：

• Phaser
• TypeScript
• Vite
• 叠加在游戏画布上的基于 DOM 的 HUD 或菜单

架构

1. 将游戏状态保存在 Phaser 场景之外。
   • 系统负责规则、回合顺序、移动、战斗、物品栏、目标和进度。
   • Phaser 场景将系统状态适配为精灵、摄像机移动、动画播放和特效。
2. 让场景保持精简。
   • 启动和资源预加载
   • 菜单或外壳场景
   • 游戏场景
   • 可选的覆盖层或调试场景
3. 让面向渲染器的对象可丢弃。
   • 精灵容器、发射器、补间动画和摄像机架是视图状态，不是事实来源。
4. 在整个游戏代码中，优先使用稳定的资源清单键，而不是直接引用文件路径。

实现指南

• 只设置一个集成边界，由场景读取模拟状态并将输入操作发送回系统。
• 优先采用确定性的系统更新，而不是在场景内直接修改状态。
• 当文本、状态信息密度或响应式布局很重要时，将 HUD 和菜单视为 DOM 元素。
• 动画状态应从游戏状态推导，而不是依赖临时设置的精灵标记。

擅长处理的 2D 类型

• 回合制网格和战术游戏
• 俯视角探索
• 横版动作平台游戏
• 带精灵动画的角色动作战斗
• 轻量级经营或卡组驱动的战斗场景

摄像机和呈现

• 尽早确定摄像机模式：固定、跟随、房间式或战术平移。
• 将摄像机逻辑与游戏规则分开。
• 谨慎使用屏幕震动、受击停顿和视差效果。特效应提升可读性，而不是遮挡画面。

UI 集成

• 使用 DOM 覆盖层实现 HUD、命令菜单、设置和剧情面板。
• 让画布负责呈现世界、战斗可读性和动态效果。
• 除非项目明确需要在画布内呈现，否则不要为了方便就在 Phaser 中塞入密集文本或复杂的设置 UI。

资源组织

• 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