build-hud

游戏界面

HUD 是游戏状态的一种视图，而不是状态的来源。应在每一帧或每次状态转换时根据当前状态渲染它；切勿将游戏逻辑的真实数据存储在 DOM 或 UI 元素中。

选择 UI 层

• 在适合该表面的自然 UI 层中构建界面——DOM 或 React 覆盖层，或 Engine 的 screen 和 element UI——并通过 build-app 技能决定。按照 assemble-scene 的要求，将其保持在游戏模型层级之外。
• 对于屏幕空间的 Engine UI，应通过 find-examples 改编一个用户界面示例，而不是猜测元素锚定、缩放和字体处理方式。

由状态驱动

• 将每个覆盖层映射到一个游戏状态，将每个指示器映射到一个快照字段。状态转换会显示或隐藏覆盖层；它不会复制游戏已经拥有的状态（参见 manage-game-state）。
• 一个大部分时间处于空闲状态的指示器会随其可见性切换 enabled；一个以不透明度 0 继续绘制的元素仍然会每帧消耗一次绘制调用（参见 reduce-draw-calls）。
• 将元素锚定并缩放到视口，以便布局在目标分辨率下和调整大小时保持稳定。应在验收分辨率下验证，而不是默认窗口大小。
• 保持文案精简且在场景上清晰可读：在画面明亮处为文字添加底板或阴影，并根据 light-scene 中的场景调色统一界面颜色。

证明它反映状态

通过每次状态转换驱动真实输入，并用截图确认正确的覆盖层显示且每个指示器都跟随快照——重新装填计量条会清空并重新填满，计时器会前进，菜单只在其对应状态下出现。保存的文件路径或可见性标志不是视觉证据；应按照本地 Agent 指南的要求检查返回的像素。

使用 build-app 技能选择创作表面，并先通过其自身的 UI 原语构建界面，然后再接触 Engine。