game-ui-ux

ゲーム UI/UX

ゲームパッドとマウスのどちらを使う場合でも、スマートフォン、ウルトラワイドモニター、テレビで正しく表示される HUD やメニューを構築します。このスキルでは、エンジンに依存しない UI アーキテクチャ（レスポンシブレイアウト、スケーリング、フォーカスナビゲーション、画面遷移、UI とゲーム状態の連携方法）を扱い、具体的なウィジェット API についてはエンジン UI スキルに委ねます。

使用するタイミング

• HUD（体力／弾薬／スコア）、メニュー（メイン／ポーズ／設定）、インベントリやショップ画面、その他のオーバーレイを構築し、正しくスケーリングされ、操作できるようにしたい場合に使用します。
• 他の解像度やアスペクト比で UI が崩れる、ノッチやセーフエリアを考慮していない、コントローラーで操作できない、フレームごとのポーリングでゲーム状態に接続されている UI を修正する場合に使用します。
• 画面遷移（タイトル → ゲーム → ポーズ → 設定）を、フラグだらけではなくスタックとして構成する場合に使用します。

使用しない場合： エンジン固有の具体的な UI ノード／コンポーネントやスタイリングには、godot-ui-control または Unity UI（UGUI/UI Toolkit）を使用します。視覚的なインパクト（ボタンの弾み、ダメージ数値、揺れ）には game-feel を使用します。分岐する会話 UI には dialogue-systems を使用します。UI 文字列の翻訳はローカライズの対象です（キー割り当て変更画面については references/ と input-systems を参照）。カード／ボードのレイアウト固有の内容には、カードゲームのジャンルスキルがこのスキルを組み合わせて使用します。

基本ワークフロー

1. レイアウトモデルには、アンカーとコンテナを選びます。絶対ピクセル指定は使いません。 要素を端、角、中央にアンカーし、コンテナ（行、列、グリッド）で子要素を配置します。絶対位置 (x, y) は、新しい解像度を追加した時点で崩れます。
2. UI 全体のスケーリング戦略を選びます。 基準解像度に合わせてスケーリングし（多くのゲームで一般的）、他のアスペクト比で余る幅／高さをどう扱うか（レターボックス、拡張、HUD の角を外側にアンカーする）を決めます。
3. セーフエリアを尊重します。 ノッチ、丸みのある角、テレビのオーバースキャンで切れないよう、重要な UI を画面端から内側に配置します。
4. すべての画面をキーボード／ゲームパッドで操作できるようにします。 画面ごとに最初にフォーカスするコントロールを設定し、フォーカス順序／隣接先を定義して、明確なフォーカス表示を用意します。マウス操作とフォーカス操作を併用できるようにします。
5. 画面をスタックとしてモデル化します。 プッシュ（ゲーム画面の上にポーズ画面を重ねる）、ポップ（再開）を行い、入力と表示を最上位の画面に渡します。これにより、オーバーレイや「戻る」の処理が簡単になります。
6. ポーリングではなく、イベントを使って HUD を更新します。 HUD は health_changed、score_changed などを購読し、イベントが発生したときだけ更新します。毎フレームゲーム状態を読み取ることはありません。
7. 画面とデバイスを切り替えて検証します。 ウィンドウのサイズを変更し、アスペクト比を切り替え、マウスを取り外してゲームパッドだけで操作し、フォーカス、スケーリング、セーフエリアの余白を確認します。実際に確認した解像度と、そのときに観察した内容を報告します。

パターン

1. 絶対座標ではなく、アンカーとコンテナを使う

# Godot 4.7. Anchor a HUD label to the TOP-LEFT; let a container flow a row of hearts.
func _ready() -> void:
    $Score.set_anchors_preset(Control.PRESET_TOP_LEFT)   # sticks to the corner at any size
    # An HBoxContainer auto-lays-out children left-to-right; never position hearts by hand.
    for i in lives:
        $Hearts.add_child(make_heart())                   # HBoxContainer spaces them for you
# Unity 6.3 LTS uGUI: set RectTransform anchors to the corner; use a HorizontalLayoutGroup.
# RIGHT: anchors + layout groups. WRONG: rect.anchoredPosition = new Vector2(640, 360) (1080p-only).

2. 基準解像度に合わせてスケーリングする（ひとつの UI をさまざまな画面で使う）

# Godot 4.7 — Project Settings > Display > Window > Stretch:
#   Mode = "canvas_items", Aspect = "expand", reference size e.g. 1920x1080.
#   UI scales to the window; "expand" reveals extra space you anchor HUD corners into.
# Unity 6.3 LTS — Canvas > CanvasScaler:
#   UI Scale Mode = "Scale With Screen Size", Reference Resolution = 1920x1080,
#   Match = 0.5 (blend width/height) — pick 1.0 if your HUD is height-critical.

3. ノッチ／オーバースキャン用のセーフエリア余白

# Godot 4.7. Inset a margin container to the OS-reported safe rect (phones, TVs).
func _apply_safe_area() -> void:
    var safe: Rect2i = DisplayServer.get_display_safe_area()
    var win := DisplayServer.window_get_size()
    $Margin.add_theme_constant_override("margin_left", safe.position.x)
    $Margin.add_theme_constant_override("margin_top",  safe.position.y)
    $Margin.add_theme_constant_override("margin_right", win.x - safe.end.x)
    $Margin.add_theme_constant_override("margin_bottom", win.y - safe.end.y)
# Unity 6.3 LTS: read Screen.safeArea (Rect in pixels) and set a panel's anchorMin/anchorMax to
# safeArea.position / (position+size) normalized by Screen.width/height.

4. ゲームパッド／キーボードのフォーカス（これがないと、UI はコントローラーで操作できません）

# Godot 4.7. Give each screen a default focus and wire neighbors so a stick/d-pad walks it.
func _on_screen_shown() -> void:
    $PlayButton.grab_focus()                               # always focus SOMETHING on open
$PlayButton.focus_neighbor_bottom = $SettingsButton.get_path()
$SettingsButton.focus_neighbor_top = $PlayButton.get_path()
# Unity 6.3 LTS: EventSystem.SetSelectedGameObject(playButton) on enable; set each Selectable's
# Navigation (Explicit or Automatic). RIGHT: a control is focused on open. WRONG: nothing
# selected → the gamepad does nothing and the player is stuck.

5. イベント駆動型 HUD（UI とゲームロジックを分離する）

# RIGHT: HUD reacts to a signal; it updates only when health actually changes.
func _ready() -> void:
    player.health_changed.connect(_on_health_changed)     # emitted by gameplay
func _on_health_changed(current: int, max: int) -> void:
    $HealthBar.value = float(current) / max
# WRONG: func _process(dt): $HealthBar.value = player.hp / player.max_hp  # polls every frame,
# couples UI to the player's internals, and runs work even when nothing changed.

落とし穴

• 絶対的なピクセル位置／単一のデザイン解像度。 自分のモニターでは正しく見えても、ほかの環境では崩れます。端や中央を基準に配置し、コンテナに合わせて流れるようにします。
• アスペクト比の方針がない。 16:9 専用のレイアウトでは、ウルトラワイド画面やスマートフォンで大きく切り取られたり、黒帯が表示されたりします。拡張するか黒帯を表示するかを決め、外側へ移動する HUD を角に固定します。
• セーフエリアを無視する。 HUD がノッチの下に隠れたり、テレビのオーバースキャンで見切れたりします。重要な要素は内側に配置します。
• 初期フォーカス／フォーカス移動先がない。 ゲームパッドではゲームをプレイできず、何も選択されていないメニューにプレイヤーがたどり着きます。必ずいずれかのコントロールにフォーカスを設定し、ナビゲーションを定義します。
• _process／Update でゲームの状態をポーリングする。UI が内部実装と密結合になり、処理も無駄になります。 シグナル／イベントで更新を通知します。
• 小さく固定されたフォントサイズ。 離れた場所から見るテレビや、小さなスマートフォンでは読めません。UI に合わせてテキストを拡大縮小し、テキストサイズのオプションも用意します。
• メニュー遷移をブール値フラグ（isPaused、inSettings、…）で管理すると、手に負えなくなります。画面スタックの push/pop を使います。
• レイアウトに英語の文字列をハードコードする。 翻訳文がボタンからはみ出します。文字列を外部化し、コンテナのサイズがコンテンツに合わせて変わるようにします（references/ を参照）。
• マウス操作のみ、またはフォーカス操作のみ。 両方に対応し、入力デバイスを切り替えてもユーザーが操作できなくならないようにします。

参考資料

• エンジンごとのストレッチ／スケールモード、セーフエリアの計算方法、フォーカスナビゲーションと画面スタックの完全なパターン、ダイエジェティック UI とノンダイエジェティック UI、アクセシビリティ（テキストサイズ、コントラスト、色覚多様性に配慮した状態表示）、ローカライズ対応レイアウトについては、references/layout-and-flow.md をお読みください。

関連スキル

• godot-ui-control、Unity UI（UGUI/UI Toolkit） — 具体的なウィジェット、テーマ、スタイル設定。
• game-feel — このレイアウトに加わるボタンの弾み、トランジション、HUD の演出。
• dialogue-systems — この UI の枠組み内に配置される会話／選択肢 UI。
• input-systems — デバイスの切り替え、キー割り当ての変更画面、アクセシブルなコントロール。
• rpg、card-game、tower-defense、visual-novel — このスキルを組み合わせて使う、UI の比重が大きいジャンル。