ゲームUIを作る
ゲームにはUIが欠かせない。タイトル画面、体力バー、スコア表示、ポーズメニュー -- これらをUnityのuGUIシステムとAIとの会話で作っていこう。
前提条件
- Unity が起動していて、OpenForge MCP と接続済みであること
- ゲームシーンがあること（簡単なものでOK）
ステップ1: Canvasを作る
UnityのUI要素はすべてCanvas上に配置する。まずはCanvasを作ろう。
あなた:
UIのCanvasを作って。Screen Space - Overlayモードで、Reference Resolutionは1920x1080にして。Canvas ScalerのUI Scale ModeをScale With Screen Sizeにして
AIの動き: Canvasオブジェクトが作成される。Canvas ScalerのMatch値はデフォルトで0.5（幅と高さの中間）になるよ。
- Screen Space - Overlay: 常に画面の最前面に表示される。一般的なUI向き。
- Screen Space - Camera: 特定のカメラに紐づく。カメラエフェクトの影響を受ける。
- World Space: 3D空間内にUIを配置する。ゲーム内の掲示板やHPバーなど。
ステップ2: タイトル画面を作る
背景
あなた:
Canvas上にタイトル画面用の背景Imageを作って。Canvas全体を覆うサイズにして。色は暗い紺色で、少し透明度を付けて
AIの動き: 全画面の背景パネルが作成される。
タイトルテキスト
あなた:
画面の上半分中央に大きなタイトルテキストを置いて。テキストは「CLIFF WALKER」で、フォントサイズは72、色は白にして。Text Mesh Proを使って
AIの動き: TextMeshPro - Textコンポーネントが追加されて、タイトル文字が大きく表示される。
あなた:
タイトルテキストにドロップシャドウを付けて。影の色は黒で、オフセットは(2, -2)にして
AIの動き: TextMeshProのMaterial Presetやシャドウ設定が適用される。
ボタン
あなた:
タイトルテキストの下に「はじめから」「つづきから」「設定」の3つのボタンを縦に並べて。ボタンの間隔は20ピクセルにして。ボタンの色はダークグレーで、文字色は白、フォントサイズは28にして
AIの動き: 3つのButtonオブジェクトがVertical Layout Groupで縦に並べられる。
あなた:
ボタンにマウスオーバー時の色をライトグレーに、クリック時の色をオレンジに設定して
AIの動き: 各ボタンのColor Tintが設定されて、インタラクティブな見た目になる。
あなた:
タイトル画面のスクリーンショットを見せて
UI要素の配置にはアンカー（Anchor）とピボット（Pivot）の理解が大事。
- アンカー: 親要素のどの位置を基準にするか。画面中央に固定したい場合は(0.5, 0.5)に設定する。
- ピボット: 要素自身のどの点を基準にするか。中央揃えなら(0.5, 0.5)。
あなた:
タイトルテキストのアンカーを画面上部中央にして。画面サイズが変わっても上部に固定されるようにして
こうすれば、異なる解像度でもレイアウトが崩れにくくなるよ。
ステップ3: HUD（ヘッドアップディスプレイ）を作る
ゲームプレイ中に常に表示される情報を作ろう。
体力バー
あなた:
画面の左上に体力バーを作って。背景は暗い赤、ゲージ部分は明るい赤にして。幅200ピクセル、高さ25ピクセルにして。アンカーは左上にして、余白は(20, -20)にして
AIの動き: 2つのImage（背景とゲージ）が重ねて配置される。ゲージ側のImage TypeをFilledにすることで、値に応じてバーの長さが変わるようになる。
あなた:
体力バーの上に「HP」というラベルテキストを小さく表示して。フォントサイズは14にして
AIの動き: 体力バーの上に小さなテキストが追加される。
スコア表示
あなた:
画面の右上に「Score: 0」というテキストを表示して。アンカーは右上にして。フォントサイズは24、色は白にして。右端から20ピクセルの余白を取って
AIの動き: 右上にスコアテキストが配置される。アンカーが右上なので、画面幅が変わっても右端に固定される。
ミニマップ用のプレースホルダー
あなた:
画面の右下にミニマップ用の枠を作って。150x150ピクセルの正方形にして。背景は半透明の黒にして。枠線は白で2ピクセルの太さにして。中に「MINIMAP」というプレースホルダーテキストを置いて
AIの動き: ミニマップ用の枠が右下に配置される。実際のミニマップ機能は後から実装できるように、まずは枠だけ用意しておく。
あなた:
HUDのスクリーンショットを見せて
HUD要素の配置には定番パターンがある:
| 要素 | アンカー位置 | 理由 |
|---|---|---|
| 体力バー | 左上 | プレイヤーが頻繁に確認する |
| スコア | 右上 | ゲーム進行状況を把握 |
| ミニマップ | 右下 | 視界の邪魔になりにくい |
| アイテム欄 | 下中央 | 操作UIは下に集約 |
これらは慣習的なもので、ゲームの種類に合わせて変えてOK。
ステップ4: ポーズメニューを作る
ゲーム中にESCキーで表示されるポーズメニューを作ろう。
暗転パネル
あなた:
ポーズメニュー用のパネルを作って。Canvas全体を覆う半透明の黒（アルファ0.7）にして。名前は「PausePanel」にして。最初は非アクティブにしておいて
AIの動き: 暗転用のImageが作成されて、非アクティブ状態（非表示）に設定される。
メニュー本体
あなた:
PausePanelの子オブジェクトとして、画面中央にメニューパネルを作って。サイズは400x300ピクセル、背景色はダークグレーにして。角を丸くして
AIの動き: 中央にメニューパネルが配置される。
あなた:
メニューパネルの上部に「PAUSE」というテキストを置いて。フォントサイズは36、色は白にして
あなた:
その下に「ゲームに戻る」「設定」「タイトルに戻る」の3つのボタンを縦に並べて。タイトル画面と同じスタイルにして
AIの動き: ポーズメニューの3つのボタンが追加される。
表示・非表示のスクリプト
あなた:
ESCキーを押したらPausePanelの表示・非表示を切り替えるスクリプトを作って。ポーズ中はTime.timeScaleを0にしてゲームを一時停止して、再開時は1に戻して
AIの動き: PauseManagerスクリプトが生成されて、Canvasまたは空のGameObjectにアタッチされる。
あなた:
ポーズメニューを表示した状態のスクリーンショットを見せて
Time.timeScaleを0にすると、物理演算やTime.deltaTimeベースの処理がすべて停止する。UIアニメーションなどポーズ中も動かしたい処理は、Time.unscaledDeltaTimeを使う必要があるよ。
ステップ5: レイアウトの調整
異なる画面サイズでUIが崩れないように、レイアウトを調整しよう。
あなた:
16:9と4:3の両方のアスペクト比でスクリーンショットを見せて。UIが崩れていないか確認したい
AIの動き: 異なるアスペクト比でのスクリーンショットが返ってくる。崩れている箇所があれば修正を頼もう。
あなた:
4:3だとボタンが画面からはみ出している。アンカーを調整して、どのアスペクト比でも収まるようにして
AIの動き: アンカーとオフセットが調整されて、異なる画面サイズでもレイアウトが崩れなくなる。
- ピクセル単位の固定値はできるだけ避け、アンカーによる相対配置を使う
- Canvas ScalerのMatchを0.5にすると、幅と高さの変化をバランスよく吸収してくれる
- Layout GroupコンポーネントやContent Size Fitterを使うと、中身に応じて自動でサイズ調整される
ステップ6: UIの遷移アニメーション
UIの表示・非表示に簡単なアニメーションを付けて、見栄えを良くしよう。
あなた:
ポーズメニューが表示されるとき、フェードインするようにして。0.3秒かけてアルファが0から1になるアニメーションにして
AIの動き: CanvasGroupコンポーネントが追加されて、アルファ値をアニメーションさせるスクリプトまたはAnimatorが設定される。
あなた:
タイトル画面のボタンも、画面が表示されたとき下からスライドインするようにして
AIの動き: ボタンの位置アニメーションが追加される。
まとめ
このチュートリアルで学んだこと:
- Canvas -- UIの基盤となるCanvasの作成と設定
- タイトル画面 -- 背景、テキスト、ボタンの配置
- HUD -- 体力バー、スコア、ミニマップ枠の配置
- ポーズメニュー -- 暗転パネル、メニューボタン、一時停止処理
- アンカーとレイアウト -- 画面サイズに対応するレスポンシブな配置
- UIアニメーション -- フェードインやスライドインで見栄えを向上
UIはプレイヤーがゲームと対話する接点。見た目だけでなく、使い勝手も大事な要素だよ。AIに「このボタンもう少し大きくして」「間隔を詰めて」と気軽に頼みながら、触り心地の良いUIを目指そう。