roblox-ui-implementation

Roblox UI の実装

目標

読みやすく、画面サイズに応じて適切に調整され、タッチ操作に適した Roblox UI を構築します。価値のある判断についてクライアントを信頼せず、実際のゲーム状態と連携させます。

デザインゲート（構築前に読む）

UI を独自の判断で作らないでください。複雑な UI を構築する前に、承認済みのデザイン概要を読んでください。

• design/DESIGN.md — 全体の配色、文字サイズ、間隔、パターン。
• design/features/<feature-slug>/design.md — この UI のレイアウト、状態、モバイル／タブレット／デスクトップでの動作。Status: approved と記載されている必要があります。

概要が存在しないか、まだ draft の場合は作業を中止し、まず roblox-game-ux を実行して概要を作成・承認してください（またはユーザーから明示的な上書き指示を得てください）。概要に記載されたすべての状態（デフォルト、空、読み込み中、エラー、権限不足／ロック中）を構築してください。正常に動作する場合だけでなく、説明されているモバイル／タブレット／デスクトップでの動作にも合わせてください。

アーキテクチャ

• UI の構築と状態の更新は、クライアント側のコントローラーで行います。
• 報酬、購入、インベントリ、通貨に関する判断はサーバー側で行います。
• 共通の UI 定数や書式設定ヘルパーは ReplicatedStorage に配置します。
• リモートは操作の要求に使用し、価値を直接付与するためには使用しません。
• UI が大きくなったら、HUD の状態、メニューの状態、通知の状態、入力処理を分離します。

レイアウトルール

• スマートフォンを優先して設計します。
• UIScale、制約、アンカーを意図的に使用します。
• 重要なボタンは、画面の隅やシステムジェスチャー領域から離して配置します。
• タップしやすい大きさにし、押下時／無効時／読み込み中の状態を明確にします。
• 小さなボタンやコンパクトなパネルに、はみ出すおそれのあるテキストを入れないでください。
• プレイフィールドを遮らず、基本的な HUD を表示し続けます。

共通の UI

• HUD：目標、通貨、体力／エネルギー、進行状況、次の報酬。
• アップグレードパネル：現在の値、次の値、コスト、購入可能かどうか。
• ショップ：任意のオファー、明確なメリット、初回プレイ中に購入を急かさないこと。
• 報酬：短い演出、目に見える増減、次の目標。
• 設定：オーディオ、グラフィックス／パフォーマンス、入力設定。

MCP の構築ワークフロー

1. script_search、script_grep、search_game_tree を使って UI スクリプトと GUI インスタンスを探します。
2. script_read でスクリプトを読み、inspect_instance で GUI インスタンスを調べます。
3. コードの変更には multi_edit を、対象を絞った GUI の構築には execute_luau を使用します。
4. start_stop_play、user_mouse_input、user_keyboard_input、screen_capture を使って動作を確認します。
5. get_console_output を確認します。

検証

以下を確認してください。

• モバイルサイズの画面にテキストが収まること。
• ボタンの操作可能性と状態が明確であること。
• UI が最初の操作を妨げないこと。
• 価値のある操作がサーバー側で検証されること。
• 構築した UI が、空／読み込み中／エラー状態も含め、モバイル、タブレット、デスクトップのすべてで承認済みのデザイン概要に一致していること。
• 新たなコンソールエラーがないこと。

次の手順

roblox-mobile-playtest と roblox-playtest-qa で UI を検証します。UI によって新たなサーバー操作が発生した場合は、roblox-security-economy で信頼境界を確認します。次の作業項目には roblox-to-issues／roblox-game-development-lifecycle に戻って進みます。