バーチャル3Dクリエイター神部まゆみです(*^_^*)
この記事はUnityでアイテムメニュー画面を作ってみたので、それについての記事です。
Starter Assetsを改変して作っているので、こちらの記事から順番にやっていくと良いです。
動作確認した最新バージョンは Unity 6000.3.1 です。
現在、リアル系環境アセットが50%オフで買える Unityパブリッシャーセール をやってるみたいです(2026/01/08まで)。
クーポンコード SCANSFACTORY を使うと、↓の Abandoned Factory Buildings アセットがタダで貰えます(決済時にクーポンコード入力適用で0円に)。
BOOTHでVRoidテクスチャやVRChat向けオブジェクトなどを販売しています。いいねしてくれると励みになります(*^-^*)
やりたいこと：スタートボタンを押したらアイテムメニュー画面を開くようにする
前回までで敵へダメージを与える方法などを実装できたので、アイテムメニューを作っていって装備やリロードができるようにしたいですね。
以前UIで会話システムを作ったりしたので、ああいう感じでUIが開いている間はゲームの進行を止める感じで行けばいいと思う。
ChatGPTパイセンに聞いてみる
彼に聞けばたちどころに解決するに違いない…。
まずアイテム画面から実装したいのですが、アイテムのマスが10個くらい並んでいて、キャラの顔グラフィックを表示、武器の装備を選べるくらいまで実装できたらなぁと思います。まずはキャンバスとパネルを作り、新インプットシステムで設定するところからでしょうか
うん、その考え方すごく自然ですし、実装順としてもかなり良い線いってます。
「まずはアイテム画面をちゃんと形にする」→ 正解ルートです 👍
結論から言うと
👉 Canvas／Panelを先に作って、入力はあとからでOK
新Input Systemは「開閉」や「選択操作」が見えてきてから繋ぐ方が楽です。
おすすめ実装ステップ（迷いにくい順）はPause用Canvasを作ること。まずは見た目です。
最初にやるべきことはUIの骨組みです。
Canvas設定
- Render Mode：Screen Space – Overlay
- Canvas Scaler
- Scale With Screen Size
- Reference Resolution：1920×1080（目安）
PauseMenuCanvas
├─ DarkBackground（Image・半透明）
└─ ItemMenuPanel
📌 この時点では「アイテム画面しかない」状態でOK
アイテム画面Panelの中身構成（超重要）
例：今回やりたい内容に合う構成
ItemMenuPanel
├─ Header
│ └─ CharacterPortrait（Image）
├─ ItemGrid
│ └─ ItemSlot ×10
└─ EquipmentArea
└─ WeaponSlot
アイテムマス（10個）
Grid Layout Groupを使う- ItemSlotは Prefab化（あとで絶対使う）
ItemSlot
├─ Icon（Image）
└─ Frame（Image）
✔ この時点では「ダミー画像」でOK
✔ ロジックはまだ書かなくていい
キャラ顔グラ・武器枠は「表示だけ」でOK
ここ、焦らなくていいポイントです。
- 顔グラ → Image 1枚
- 武器装備 → ボタン1個
[ キャラ顔 ]
武器：ソード（変更）
まずは
✅ UI上にそれっぽく見える
これが最優先です。
アイテム選択ロジック（最初はめちゃ簡単でOK）
ItemSlotに Button を付けて
public void OnClickSlot(int index)
{
Debug.Log("Slot " + index + " clicked");
}
📌 ここで
- 装備切り替え
- 説明表示
は まだやらなくていい
「クリックできた」＝勝ちです。
Input Actions 設定
Action Map：UI
| Action名 | Action Type | Binding |
|---|---|---|
| Pause | Button | <Keyboard>/escape |
<Gamepad>/start |
✔ Action Type は Button
✔ 両方同じ Action にバインドします
スクリプト（これだけでOK）
using UnityEngine;
using UnityEngine.InputSystem;
public class PauseMenuController : MonoBehaviour
{
[SerializeField] private GameObject itemMenuCanvas;
private bool isOpen = false;
public void OnPause(InputAction.CallbackContext context)
{
if (!context.performed) return;
if (isOpen)
CloseMenu();
else
OpenMenu();
}
void OpenMenu()
{
isOpen = true;
itemMenuCanvas.SetActive(true);
Time.timeScale = 0f;
Cursor.lockState = CursorLockMode.None;
Cursor.visible = true;
}
void CloseMenu()
{
isOpen = false;
itemMenuCanvas.SetActive(false);
Time.timeScale = 1f;
Cursor.lockState = CursorLockMode.Locked;
Cursor.visible = false;
}
}
Unity側の設定（重要）
1️⃣ オブジェクトにアタッチ
- 空のGameObject
例：PauseMenuManager - 上の
PauseMenuControllerをアタッチ Item Menu Canvasを Inspector にドラッグ
2️⃣ PlayerInput に接続
- Player に
PlayerInputを追加 - Behavior：Invoke Unity Events
UI / Pauseを展開PauseMenuManager → OnPauseを登録
Canvas 側の注意
- Canvas は 最初は非表示
- Render Mode：Screen Space – Overlay
- EventSystem がシーンにあること（自動生成されてるはず）
動作確認チェックリスト
✅ ESCキーで開く
✅ ゲームパッド Start で開く
✅ ゲームが止まる
✅ カーソルが出る
✅ もう一度押すと閉じる
ここまで動けば 完全勝利です。
実際に実装してみる
とりあえず言われたとおりに実装していきます。
キャンバスとパネル、キャラImageとアイテムImageを追加
とりあえずこんな構造になっていれば良いでしょう。
ゲーム画面で見ると一応こんな感じで表示されてるので、これを見つつ大きさや位置を整えます。
構造としては↓こんな感じ。
キャンバス レンダーモード：スクリーンスペースオーバーレイ
｜ーパネル メニューの背景になる。スケールで大きさ調整
｜ーキャラクター画像(Image) 一応キャラの画像を表示。不要ならなくてもいい
｜ーアイテムスロット 空のオブジェクト。子にアイテムフレームやアイテム画像が並ぶ
｜ーアイテムフレーム(Image) アイテム欄の１マス。
｜－アイテムアイコン（Image） 今回はまだ作らない。
とりあえず今回はこのメニューを表示して非表示にするってところができればいいので細かくは作りこまないけど。
キャラクターアイコン画像を表示する
とりあえずプロトタイプだからなんでもいいです。
いらすとやさんの画像でも適当なフリー素材でも。
プロジェクトにインポートして、 テクスチャタイプ：スプライト(2DとUI)、 スプライトモード：単数 にして適用する。
UIのキャラクター画像に設定して位置と大きさを調整する。
装備とか考えたら全身画像のほうが良いかな(^_^;)
まぁ今回はそこまでやらないのでとりあえず適当で。というか好みなので不要ならなくてもいいですｗ
アイテムフレーム画像を設定する
アイテムフレームとアイテム画像が必要だけど、とりあえず今回はフレームだけで。
とりあえずGIMPで適当に塗りつぶして5秒で作ってみました。
↓適当に作ったので勝手にダウンロードして使ってください。規約とかうるさいことは言いませんｗ
アイコンフレーム画像を設定して並べる
プロジェクトに画像をインポートして、 テクスチャタイプをスプライト(2DとUI)にし、スプライトモード単数にする。
一応適当にコピペして並べてみます。位置は後で揃えてください。
とりあえずこんな感じ。
キャラ画像を全身にして装備画面っぽくすれば良い感じになるかな…？
あとはHPなどパラメーターが表示されてるとメニュー画面っぽいかな。
アイコン画像は128×128くらいが良い？
大きい画像でも勝手に縮小表示してくれるけど、まぁ小さめが無難っぽい？
ドット絵にしたいわけではないけどこんな感じの設定だと良いかな？
スクリプトをコピペする
このスクリプトをコピペする。
using UnityEngine;
using StarterAssets;
public class PauseMenuController : MonoBehaviour
{
[Header("UI")]
[SerializeField] private GameObject itemMenuCanvas;
[Header("Input")]
[SerializeField] private StarterAssetsInputs input;
private bool isOpen;
void Start()
{
// 念のため最初は閉じておく
itemMenuCanvas.SetActive(false);
}
void Update()
{
if (input == null) return;
if (input.pause)
{
input.pause = false; // 1回分の入力を消費
ToggleMenu();
}
}
void ToggleMenu()
{
isOpen = !isOpen;
itemMenuCanvas.SetActive(isOpen);
Time.timeScale = isOpen ? 0f : 1f;
Cursor.lockState = isOpen
? CursorLockMode.None
: CursorLockMode.Locked;
Cursor.visible = isOpen;
}
}スクリプトを空のオブジェクトにアタッチして設定する。
キャンバスと、StarterAssetsInputsがあるモデルを指定します。
インプットシステムの設定
Pauseを追加、Start[Gamepad]とEscape[Keyboard]を指定する。
StarterAssetsInputs.csにコードを加筆
StarterAssetsを改変して作っているので、ここにコードを加筆する必要があります。
Starterと検索すれば出てくるのでコードを加筆する。
[Header("UI Input")]
public bool pause; public void OnPause()
{
pause = true;
}これで動いた！
これで無事に動きましたね。
まぁまだよくわからない物が出てくる感じだけど(^_^;)
しかし現段階でデザインに凝るよりは、システム面を完成させてから作りこんだ方が良いかな？
形から入るのも良いけども。
追記：メニューを開いていても視点変更が動いてしまうのでスクリプトを改修
ここまでだとメニュー開いてる間でも視点変更が動いてしまうので、スクリプトを以下のように書き換えます。
using UnityEngine;
using StarterAssets;
public class PauseMenuController : MonoBehaviour
{
[Header("UI")]
[SerializeField] private GameObject itemMenuCanvas;
[Header("Input")]
[SerializeField] private StarterAssetsInputs input;
private bool isOpen;
[SerializeField] private ThirdPersonController controller;
void Start()
{
// 念のため最初は閉じておく
itemMenuCanvas.SetActive(false);
}
void Update()
{
if (input == null) return;
if (input.pause)
{
input.pause = false; // 1回分の入力を消費
ToggleMenu();
}
}
void ToggleMenu()
{
isOpen = !isOpen;
itemMenuCanvas.SetActive(isOpen);
Time.timeScale = isOpen ? 0f : 1f;
// ★ここが肝
controller.enabled = !isOpen;
input.enabled = !isOpen;
Cursor.lockState = isOpen
? CursorLockMode.None
: CursorLockMode.Locked;
Cursor.visible = isOpen;
}
}一つ指定項目が増えて、ThirdPersonControllerが付いてるモデルを指定します。
メニュー開いてもリアルタイムで動いてるゲームもあるけど、止まっていた方がいいかな。
追記終わり。
つづく？
とりあえず表示するだけだけど手軽にできて良かった。
とりあえずアイテム拾ったり使ったり捨てたり装備したりなどの基本的な動作ができたらデザインを凝っていく感じでいいかな。
続きが書けたら追記します(*^_^*)