アイテムボックスの位置を自由に変更できますか？

ItemBoxPanel の RectTransform を調整することで、好きな位置に配置できます。

Slotのサイズを統一するにはどうすればいいですか？

Horizontal Layout Group の Child Force Expand のチェックを外し、Slot の RectTransform で統一サイズを設定してください。

アイテムの拡大表示を実装するにはどうすればいいですか？

ZoomButton をクリックした際に、拡大画像を表示するスクリプトを追加すると実現できます。次回の記事で詳しく解説します！

Unity3D脱出ゲームの作り方③ – アイテムボックスの作成

1. はじめに
2. アイテムボックスのUIを作成する
1. 2.1 Canvasの作成
2. 2.2 Panelの作成
3. スロットの作成
4. レイアウト調整
5. アイテム表示用ボタンの作成
1. 5.1 ZoomButtonの作成
2. 5.2 ZoomButtonにボタン機能を追加
手作り vs アセット活用
よくある質問（FAQ）
1. 関連記事:

1. はじめに

Unityで脱出ゲームを作るときに、アイテムを手に入れて使う仕組みはとても重要です。鍵やヒントになるアイテムを集めて、それを適切な場所で使うことで、ゲームの進行に大きな影響を与えますよね。

でも、手に入れたアイテムをどうやってプレイヤーに見せるかを考えたことはありますか？
アイテムを取得したのに、どこにあるのかわからなかったら、ゲームの楽しさが半減してしまいます。そこで役に立つのが 「アイテムボックス」 です。

アイテムボックスを作ることで、プレイヤーは手に入れたアイテムを一覧で確認し、いつでも使う準備ができるようになります。また、アイテムを拡大表示する機能を加えれば、より細かい部分までチェックできるので、ゲームの没入感もアップします。

この記事では、 UnityのUI機能を活用してアイテムボックスを作成し、スロットのレイアウトを整える方法 を詳しく解説していきます。初心者でもわかりやすいように、一つずつ手順を追って説明するので、一緒に作っていきましょう！

2. アイテムボックスのUIを作成する

脱出ゲームでは、アイテムを手に入れて使用することが重要な要素の一つです。そのため、取得したアイテムを一覧で表示する アイテムボックス を作成していきます。まずは、UIの基盤となるCanvasとPanelを作成 していきましょう！

Unityの使い方⑪ UI（ユーザーインターフェース）を作ってみよう

2.1 Canvasの作成

まずは、すべてのUIを管理する Canvas を作成します。

ヒエラルキー（Hierarchy）ウィンドウを右クリック して、UI → Canvas を選択
Inspector ウィンドウで Canvas の設定を確認し、Render Mode を Screen Space - Overlay に設定
名前を「ItemBoxCanvas」に変更（UIが増えると管理しやすくなります）

🔹 ポイント
Canvas はすべてのUI要素の親オブジェクトになります。これを作成しないと UI を表示できないので、最初に作成しましょう。

2.2 Panelの作成

次に、アイテムを格納する Panel を作成します。

ItemBoxCanvas の子オブジェクトとして Panel を作成
- ヒエラルキーで ItemBoxCanvas を選択
- 右クリック → UI → Panel を追加
- Inspector で名前を 「ItemBoxPanel」 に変更
ItemBoxPanel の RectTransform を変更して、画面下部に配置
Panel の Image コンポーネントの Color を青などに変更し、視認しやすくする

🔹 ポイント
Panel はUIの背景として使われます。この上に スロット（Slot） を並べて、アイテムを表示する形になります。

この時点で Canvasの中にPanelが配置され、アイテムを置くためのスペースができた はずです。次のステップでは、アイテムを収納するための「スロット（Slot）」を作成していきます！

3. スロットの作成

さて、アイテムボックスを作るための土台（CanvasとPanel）ができたので、次は 「スロット」 を作成していきます！
スロットとは、アイテムを収納する場所のことです。脱出ゲームでは、プレイヤーが手に入れたアイテムを一覧で確認できるようにするために必要になります。

3.1 Slotの作成

まずは スロットの基本となるGameObject を作成しましょう。

手順

ItemBoxPanel を選択した状態で 右クリック
Create Empty を選んで、空のGameObjectを作成
名前を Slot に変更

この Slot の中に、アイテムの背景（Back）とアイテム画像（Image）を配置していきます。

3.2 Image（背景とアイテム画像）の作成

続いて、Slot の中に 2つのImageオブジェクト を作ります。

手順

Slot を選択した状態で 右クリック
UI → Image を選択
- これを Back と命名（背景用）
もう一度 Slot を選択して 右クリック
UI → Image を選択
- これを Image と命名（アイテム画像用）

これで、Slot の中に Back（背景）と Image（アイテム画像）ができました！

3.3 サイズとカラーの調整

スロットの見た目を調整して、アイテムが見やすいデザインにします。

手順

Slot の Scaleを調整し、適切なサイズ にする
- 例えば、X0.7px × Y0.7px くらいの大きさに設定
Back の カラーを黒色 に変更
Image のサイズを Back より少し小さめに設定（80px × 80px など）

こうすることで、スロットの背景が黒くなり、アイテム画像が中央に表示されるようになります。

3.4 SlotのPrefab化

同じスロットを 複数作る のは面倒なので、プレハブ（Prefab）にして使い回せるようにしましょう！

Unityの使い方⑬ プレハブ（Prefab）で効率よくオブジェクトを管理しよう

手順

Prefabs フォルダを作成（まだなければ）
Slot を Prefabs フォルダへドラッグ＆ドロップ
Slot のオブジェクトが青色になればPrefab化完了！

これで、アイテムボックスに複数のスロットを簡単に配置できるようになりました。

ここまでで、アイテムを収納するスロットを作成し、Prefab化まで完了しました。
次のステップでは、スロットをアイテムボックス内できれいに並べる方法について解説します！

4. レイアウト調整

アイテムボックスに配置した Slot をきれいに並べるために、Horizontal Layout Group を利用します。これを使うと、手作業で配置しなくても自動的に整列されるので、効率的にレイアウトが整います。

4.1 Horizontal Layout Groupの追加

まず、アイテムボックス（ItemBoxPanel）に Horizontal Layout Group を追加しましょう。

ItemBoxPanel を選択
Inspectorウィンドウの Add Component をクリック
Horizontal Layout Group を検索して追加

このコンポーネントを追加すると、Slot が横並びになります。スロットのプレファブをいくつか配置して調整しましょう。デフォルトの設定だと左寄りになっているので、中央揃えに調整しましょう。

4.2 子オブジェクトの中央揃え

Horizontal Layout Group の Child Alignment を MiddleCenter に変更
Child Force Expand のチェックを外す
- Width と Height の両方のチェックをオフにすることで、各 Slot のサイズを固定できます

この設定をすると、スロットが均等に中央揃えで並ぶようになります。

4.3 スペースの調整

スロット同士の間隔が狭すぎたり広すぎたりする場合は、Spacing を調整しましょう。

Horizontal Layout Group の Spacing を適当な値（例: 10）に設定
必要に応じて Padding を設定し、ItemBoxPanel の内側の余白を調整

これで、アイテムスロットがきれいに並んだアイテムボックスが完成しました！

このように Horizontal Layout Group を活用すれば、コードを書かずにUIを簡単に整えることができます。次のステップでは アイテムをスロットに追加する処理 を実装していきましょう！

5. アイテム表示用ボタンの作成

アイテムボックスにアイテムを収納するだけでは、プレイヤーが詳細を確認できません。そこで、選択したアイテムを拡大表示するためのボタンを作成しましょう。

5.1 ZoomButtonの作成

ItemBoxPanel の下に Image を作成
- Inspector で ItemBoxPanel を選択
- 右クリック → UI → Image を選択
- 作成した Image の名前を ZoomButton に変更
ボタンのデザインを調整
- ZoomButton の RectTransform を調整し、適切なサイズ に変更
- 位置は ItemBoxPanel の下部や画面の右下など、好みに応じて配置
- Source Image をお好みの画像に変更（任意でカスタム画像も使用可）