Game UI Frontend
概要
ゲームに可視的なインターフェースレイヤーが必要な場合にこのスキルを使用します。仕事は汎用的なダッシュボードUIを生成することではありません。ゲーム体験をサポートする、読みやすくテーマに沿ったブラウザゲームインタフェースを生成することです。
デフォルトの前提：ゲームワールドはcanvasまたはWebGLで構築し、テキスト主体のUIはDOMで構築します。
フロントエンド標準
- コーディング前にビジュアルディレクションを確立する。
- ジャンルとファンタジー
- マテリアル言語
- タイポグラフィ
- パレット
- モーションのトーン
- UIテーマにCSS変数を使用する。
- 明確な階層を構築する。
- クリティカルな戦闘または生存情報を最優先
- 二次的なツールを次に
- めったに使用しない設定はメニューやドロワーの背後に
- 特に3Dでは、プレイフィールドを最優先に保護する。
- 初期画面は数秒以内にプレイ可能であると感じられること。
- デフォルトでは、1つの主要な永続HUDクラスターと、最大1つの小さな二次クラスターを使用する。
- 通常プレイ中はプレイフィールドの中央をクリアに保つ。
- 通常プレイ中はプレイフィールドの中央下部をほぼクリアに保つ。
- ロア、フィールドノート、クエスト詳細、長いコントロールリストは、ドロワー、トグル、またはポーズ画面の背後に配置する。
- 永続的なボックス型パネルよりも、コンテキストに応じたプロンプトや一時的なヒントを優先する。
- オーバーレイは動きがあっても読みやすいようにする。
- 必要に応じて、背景パネル、エッジ処理、コントラスト、控えめなぼかしを使用する。
- 最初からデスクトップとモバイルの両方に対応して設計する。
- 3D UIはカメラと入力制御の境界を考慮して設計する。
- メニュー、ダイアログ、またはポインタ駆動のUIがアクティブな場合は、カメラ制御入力を一時停止またはゲートする。
- ポインターロック、ドラッグして見回す、メニュー操作の状態を明示的にする。
3Dスターターのデフォルト
探索、移動、または三人称スタータースキャフォールドには、以下のUIバジェットを推奨します：
- 端に1つのコンパクトな目標チップまたはステータスストリップ
- 1つの一時的なコントロールヒントまたはインタラクションプロンプト
- 1つのオプションの折りたたみ可能な二次サーフェス（ジャーナル、マップ、クエストログなど）
最初のロード時にすべての情報サーフェスを開かないでください。ユーザーがより深いUIを開く前に、シーンが読み取れる状態である必要があります。
3Dブラウザゲームのデフォルト実装制約として：
- 常時表示の全幅ヘッダー＋マルチカードボディ＋全幅フッターのレイアウトは使用しない
- 通常移動中に大きな中央画面または中央下部のオーバーレイを配置しない
- ユーザーが明示的に密集したレイアウトを要求しない限り、デスクトップでは永続HUDでビューポートの約20〜25％以上を覆わない
- モバイルでは、大きなパネルでプレイフィールドを覆う前に、狭いスタックまたはコンテキストチップに折りたたむ
プロンプトルール
モデルにゲームUIの設計または実装を依頼する際は、以下を含めてください：
- ゲームのファンタジー
- カメラまたは視点
- プレイヤーのアクション
- HUDレイヤー
- 3Dの場合のカメラまたはコントロールモード
- モーションのトーン
- デスクトップとモバイルの期待値
- プレイフィールド保護と開示戦略
- 避けるべき明示的なアンチパターン
具体的なプロンプトの形状については、../../references/frontend-prompts.md を参照してください。
モーションルール
- 絶え間ないマイクロアニメーションよりも、意味のある少数のトランジションを優先する。
- 強いモーションは、状態変化、報酬、危険、オンボーディングのために予約する。
- 非必須のアニメーションには、動きを減らす設定を尊重する。
- 3D HUDのモーションがカメラのモーションと競合しないようにする。
良い状態の例
- HUD要素はシーンを平坦化せずに判読可能である。
- メニューはSaaS管理パネルのように見えず、ゲームワールドにネイティブであると感じられる。
- レイアウトはブレークポイント間でクリーンに適応する。
- ポインタ、キーボード、ゲーム状態のフィードバックが明確である。
- 3Dゲームでは、メニューとHUDの状態がカメラ制御やポインターロックと競合しない。
- 3Dゲームでは、最初のプレイ可能なビューが、移動、照準、空間認識のためにビューポートの大部分を利用可能に保つ。
- 永続的な情報密度は、スクリーンショットがUIコンポではなくゲームシーンとして読める程度に低い。
アンチパターン
- 汎用的なアプリダッシュボードレイアウト
- テーマのないフラットなプレースホルダースタイリング
- 意図のないデフォルトフォントスタック
- プレイフィールドを覆い隠す密集したオーバーレイ
- ライブのプレイ可能なシーンの上に配置された大きなタイトルカードや複数段落のノート
- ビューポートのすべての端に均等に分散された等重量のボックス型パネル
- コントロール、目標、ノート、ロアが最初のロードですべて展開されている
- 3Dプレイでの常時表示の上部・下部クロームと大きな中央またはボディパネル
- すべての要素に対する過剰なモーション
- DOMの方が明確で安価な場合のCanvasのみのUI
- 標準DOMの方が明確な場合にHUDコントロールを3Dシーンに強制的に組み込む
- モーダルやインベントリパネルの下でカメラ入力をアクティブのままにする
参考文献
- 共有アーキテクチャ：
../web-game-foundations/SKILL.md - プロンプトレシピ：
../../references/frontend-prompts.md - ローカルクローム3Dレイアウトパターン：
../../references/three-hud-layout-patterns.md - Reactホスト3D UIコンテキスト：
../react-three-fiber-game/SKILL.md - プレイテストレビュー：
../../references/playtest-checklist.md