build-hud

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Game interface

游戏界面

A HUD is a view of game state, not a source of it. Render it from the current state each frame or on each transition; never store gameplay truth in the DOM or a UI element.

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

Choose the UI layer

选择UI层

Build the interface in the natural UI layer for the surface — a DOM or React overlay, or the Engine
```
screen
```
and
```
element
```
UI — decided with the
```
build-app
```
skill. Keep it outside gameplay model hierarchies, as
```
assemble-scene
```
requires.
For a screen-space Engine UI, adapt a user-interface example with
```
find-examples
```
rather than guessing element anchoring, scaling, and font handling.

根据目标平台的特性选择合适的UI层来构建界面——DOM或React叠加层，或是引擎的
```
screen
```
和
```
element
```
UI——这可通过
```
build-app
```
技能来确定。需将其置于游戏玩法模型层级之外，正如
```
assemble-scene
```
技能所要求的那样。
对于屏幕空间的引擎UI，建议使用
```
find-examples
```
技能参考用户界面示例，而非自行猜测元素锚定、缩放和字体处理方式。

Drive from state

由状态驱动

Map each overlay to a game state and each indicator to a snapshot field. A transition shows or hides overlays; it does not duplicate the state the game already owns (see
```
manage-game-state
```
).
Anchor and scale elements to the viewport so the layout holds at the target resolution and on resize. Verify at the acceptance resolution, not the default window size.
Keep copy minimal and legible over the scene: back text with a plate or shadow where the frame is bright, and unify interface colour with the scene's grade from
```
light-scene
```
.

将每个弹窗映射到一种游戏状态，将每个指示器映射到一个快照字段。状态切换时只需显示或隐藏弹窗；无需重复存储游戏已有的状态（详见
```
manage-game-state
```
技能）。
将元素锚定并缩放到视口，确保布局在目标分辨率和窗口调整大小时保持一致。需在验收分辨率下验证，而非默认窗口尺寸。
保持文本简洁且在场景上方清晰可读：当画面明亮时，为文本添加底板或阴影；并根据
```
light-scene
```
技能确定的场景色调统一界面颜色。

Prove it reflects state

验证界面与状态一致

Drive real input through every transition and confirm with screenshots that the correct overlay shows and each indicator tracks the snapshot — a reload meter empties and refills, a timer advances, a menu appears only in its state. A saved filepath or a visibility flag is not visual evidence; inspect the returned pixels as the local agent guide requires.

Choose the authoring surface with the

build-app

skill and build the interface through its own UI primitives before reaching into the Engine.

通过真实输入触发每一种状态切换，并通过截图确认正确的弹窗显示，且每个指示器都能跟踪快照变化——例如reload meter清空并重新填充、计时器推进、菜单仅在对应状态下显示。仅保存文件路径或设置可见性标记并非视觉证据；需按照本地Agent指南要求检查输出的像素画面。

先通过

build-app

技能选择创作平台，再通过其原生UI组件构建界面，之后再深入引擎进行开发。