【Unity6】2D脱出ゲーム｜アイテム選択枠と詳細画面の作り方

🎮 Unity6 を使った「1シーン完結 2D脱出ゲーム講座」第8回です。

前回までで、アイテムを取得し、アイテムスロットに表示する仕組みを実装しました。
今回は 取得したアイテムをクリックしたときに「選択枠」を表示し、さらにもう一度クリックすると「詳細画面（拡大画像）」を表示する UI を作ります。

アイテムを使う脱出ゲームでは必須の仕組みなので、ぜひ実装してみてください！

🎥 動作例動画

1回目のクリック → 選択枠 ON
2回目のクリック → 詳細パネルを表示
閉じるボタン → 詳細パネルを非表示

✅前回の記事はこちら👇

Contents

画面構成（Hierarchy）
詳細パネルの作成
ItemDetailUI.cs（詳細 UI の制御）
- インスペクターの設定
ItemBoxManager.scを修正
- 追加フィールド
- 追加するメソッド
ItemSlot.cs の改修ポイント
- OnClick メソッドの追加
- インスペクター設定
動作確認チェック
まとめ

画面構成（Hierarchy）

詳細パネルは背景や移動ボタンより手前に表示させます。

Background
　├─ GameUI（アイテムボックスなど画面上部UI）
　├─ Stage (背景)
　├─ Arrows (視点移動ボタン)
　└─ DetailUI（空のオブジェクト）
　　　　　└─DetailPanel（詳細パネル）
　　　　　　　　├─DetailImage（拡大画像）
　　　　　　　　├─ItemName（アイテム名）
　　　　　　　　└─CloseButton（閉じるボタン）

詳細パネルの作成

DetailUI を作る

Background の子に空オブジェクト作成 → DetailUI
RectTransform を以下に設定
幅：800
高さ：500
位置（Y）：-50
※ゲーム画面を覆うサイズに

詳細パネル（DetailPanel）

DetailUI を選択 → UI > パネル を追加
名前を DetailPanel に変更
パネルの色は黒など、背景が隠れるカラーに調整

DetailPanel の中に必要な UI を配置

Image（DetailImage） … 拡大アイテム画像
TextMeshPro（ItemName） … アイテム名
Button（CloseButton） … 閉じるボタン
→位置やサイズはゲームに合わせて調整します。

ItemDetailUI.cs（詳細 UI の制御）

using UnityEngine;
using UnityEngine.UI;
using TMPro;

public class ItemDetailUI : MonoBehaviour
{
public static ItemDetailUI Instance;

public GameObject panel; 　　// 詳細パネル全体
public Image detailImage;　　// 拡大画像
public TextMeshProUGUI itemNameText;　// アイテム名

void Awake()
{
Instance = this;
panel.SetActive(false); 　// 初期状態は非表示
}

public void Show(ItemData item)
{
if (item == null) return;

detailImage.sprite = item.icon;
itemNameText.text = item.itemName;
panel.SetActive(true);
}

public void Close()
{
panel.SetActive(false);
}
}

インスペクターの設定

DetailUI にこのスクリプトをアタッチ
Panel → DetailPanel を指定
DetailImage と ItemNameText をアタッチ
CloseButton の OnClick に ItemDetailUI.Close() を設定

ItemBoxManager.scを修正

「現在選択しているスロット」を管理する変数と、詳細表示のメソッドを追加します。

追加フィールド

public ItemSlot currentSlot; // 現在選択中のスロット

追加するメソッド

public void SelectItem(ItemSlot slot)　// アイテム選択
{
// 過去の選択を解除
if (currentSlot != null && currentSlot != slot)
currentSlot.Deselect();

// 新しいスロットを記憶
currentSlot = slot;
}

public void ShowDetail(ItemData item)
{
ItemDetailUI.Instance.Show(item);
}

※ インスペクターの currentSlot は触らない（何も入れない）

ItemSlot.cs の改修ポイント

スロットをクリックした時の処理を追加します。

OnClick メソッドの追加

public void OnClick()
{
if (currentItem == null) return;

// 初回クリック：選択枠を表示
if (!selectFlame.activeSelf)
{
isSelected = true;
selectFlame.SetActive(true);
ItemBoxManager.Instance.SelectItem(this);
}
// 選択中を再クリック → 詳細表示
else
{
ItemBoxManager.Instance.ShowDetail(currentItem);
}
}

public void Deselect()
{
isSelected = false;
selectFlame.SetActive(false);
}