threejs-game-ui-designer

Three.js ゲーム UI デザイナー

ゲーム UI に明確な意図を持たせ、読みやすく、レスポンシブで、ジャンルに合ったものにします。

ユーザーが指定した範囲とスタイルを維持します。狭い範囲の HUD 修正では既存のデザインを保ち、変更後の状態と対象ビューポートを確認します。UI 全体を見直す場合は、以下のワークフローをすべて実施します。モバイル入力が必要なのは、モバイルが対象の場合であり、デスクトップ専用ゲームに UI があるからではありません。

参考資料

references/ui-patterns.md — 階層と必須状態、HUD の領域、メニュー、タッチ操作、レスポンシブ対応の制約、スタイルの一貫性、状態との接続について説明しています。HUD、メニュー、オーバーレイ、タッチ操作、レスポンシブレイアウトを設計する前に読んでください。

ロゴ、アイコン、GUI アート、勢力マーク、メニュー背景、2D HUD アセットによって品質を高められる場合は、threejs-image-generator を読み込んでください。threejs-3d-generator は、本物の 3D メニューオブジェクトやゲーム世界に存在する小道具にのみ使用し、平面的な HUD 要素には使用しないでください。

ワークフロー

1. 現状のデスクトップとモバイルのスクリーンショットを撮ります。
2. UI の状態を洗い出します。ゲームプレイ、一時停止、設定、失敗とリトライ、勝利またはマイルストーン、読み込み、タッチ操作を含めます。
3. 階層を決めます。生存とステータス、目標、フィードバック、雰囲気の順です。
4. 汎用的な統計カードを、意図を持って設計したグループ、メーター、バッジ、アイコン、アラート、モーダル状態に置き換えます。
5. 安定した寸法、安全領域のパディング、テキストの収まりに関する制約、およびホバー／押下／フォーカス／無効状態を使用します。
6. UI コード内でゲームのルールを重複させず、UI をゲームの状態に接続します。
7. 両方のビューポートで、最も長くなりそうな値を使ったテキストの収まりと重なり、安全領域、タッチ対象、および実際の状態変化を確認します。

問題が起きる例

汎用的な統計カードのダッシュボード · プレイヤー、脅威、次の判断を覆う UI · モバイルで位置がずれたり、途切れたりするテキスト · 読みやすさを損なう装飾パネル · 見た目は正しくても、操作の意図を送信しないタッチ操作。

報告

UI の意図と対象にした状態、変更したファイル、対象ビューポートのスクリーンショット、テキストの収まりと重なりに関する確認結果、該当する場合は安全領域とタッチ対象に関する証拠、および残っているリスクを報告します。変更のないゲーム全体のチェックを再実行するのではなく、これらの結果をリードの統合レビューに反映します。