build-hud

ゲームインターフェース

HUD はゲーム状態を表示するものであり、その状態の情報源ではありません。毎フレーム、または遷移ごとに現在の状態から描画してください。ゲームプレイ上の真実を DOM や UI 要素に保存してはいけません。

UI レイヤーを選ぶ

• build-app スキルで決定した、対象に適した UI レイヤー（DOM または React のオーバーレイ、あるいは Engine の screen と element UI）でインターフェースを構築します。assemble-scene の要件に従い、ゲームプレイモデルの階層外に配置してください。
• 画面空間の Engine UI では、要素のアンカー設定、スケーリング、フォントの扱いを推測するのではなく、find-examples を使ってユーザーインターフェースの例を応用してください。

状態を反映する

• 各オーバーレイをゲーム状態に、各インジケーターをスナップショットのフィールドに対応付けます。遷移によってオーバーレイを表示または非表示にします。ゲームがすでに管理している状態を重複して保持してはいけません（manage-game-state を参照）。
• 通常はアイドル状態のインジケーターは、表示状態に応じて enabled を切り替えます。透明度 0 のまま描画される要素も、毎フレーム描画呼び出しのコストがかかります（reduce-draw-calls を参照）。
• 要素をビューポートに合わせてアンカー設定し、スケーリングすることで、目標解像度やリサイズ時にもレイアウトが保たれるようにします。デフォルトのウィンドウサイズではなく、受け入れ確認用の解像度で検証してください。
• シーン上でも読みやすく、簡潔なテキストにします。画面が明るい部分ではプレートや影でテキストの背景を補い、light-scene で設定したシーンの色調にインターフェースの色を合わせてください。

状態の反映を確認する

すべての遷移で実際に入力を行い、正しいオーバーレイが表示され、各インジケーターがスナップショットに追従していることをスクリーンショットで確認します。リロードメーターが空になってから再び満たされること、タイマーが進むこと、該当する状態でのみメニューが表示されることを確認してください。保存されたファイルパスや表示フラグは、視覚的な証拠にはなりません。ローカルエージェントガイドの要件に従い、返されたピクセルを確認してください。

build-app スキルで作成する UI の種類を選び、Engine に手を加える前に、その UI 独自のプリミティブを使ってインターフェースを構築してください。