【Unity6】2D脱出ゲーム作り方⑥｜ScriptableObjectとアイテムスロット

🎮 Unity6 を使った「1つのシーンで完結する2D脱出ゲーム講座」第6回です。
今回は アイテムボックス（所持アイテム一覧）UI の作成 と、
ScriptableObject を使ったアイテムデータベースの構築方法 を分かりやすく解説します。

📺 動作サンプル

✅前回の記事はこちら👇

Contents

UIレイアウトの準備
ItemBox を作成する
- 手順
スロット（Slot0）を作成する
- スロットの枠を作成
- スロットを複製する
ScriptableObject を使ったアイテムデータの作成
- ScriptableObject を使うメリット
ItemData を作成する
- ▼ ItemData.cs
- ItemData の作り方
スロットにデータを流し込むスクリプト
- ▼ ItemSlot.cs
- インスペクター設定
まとめ

UIレイアウトの準備

ゲーム画面上部に “取得したアイテム一覧” を並べる UI を作ります。

▼ 完成するヒエラルキー構成

GameUI（上部UI：800×100）
　└─ ItemBox（空のオブジェクト）
　　　　├─ Slot0
　　　　│ 　　├─ Image（アイテム画像）
　　　　│ 　　└─ Flame（枠）
　　　　├─ Slot1
　　　　├─ Slot2
　　　　├─ Slot3
　　　　└─ Slot4

ItemBox を作成する

手順

GameUI の子に空のオブジェクトを作成 → 名前を『ItemBox』に変更
RectTransform：
　幅 500 ／高さ 100
HorizontalLayoutGroup を追加
　・Child Alignment → Middle Center
　・スロットが等間隔で横並びになるように自動整列される

スロット（Slot0）を作成する

ItemBox 内に空のオブジェクトを作り Slot0 にリネーム
Slot0 の子に UI → Image を作成
　・サイズ：90 × 90（アイテムボックスより少し小さめ）

スロットの枠を作成

Slot0 の子に空の Image を作り Flame に変更
設定
　・Source Image → UISprite
　・Color → Red（赤）
　・Image Type → Sliced
　・「中心部を塗りつぶす」のチェックを外す
　　　→ 細い赤枠の UI ができる！

【Unity6】2D脱出ゲームの作り方⑥｜アイテムスロットの選択枠を作成した画像

スロットを複製する

Slot0（Image + Flame入り）を選択して 4回複製
→ Slot0〜Slot4 の計 5 つのアイテムスロットが完成。

【Unity6】2D脱出ゲームの作り方⑥｜アイテムボックス作成画像（作成したスロットを複製）

ScriptableObject を使ったアイテムデータの作成

アイテムの画像・名前・詳細画像などをまとめて管理できる
ScriptableObject（スクリプタブルオブジェクト） を使います。

ScriptableObject を使うメリット

✔ 追加が超簡単

複製して項目を書き換えるだけ。

✔ Inspector 上で直感的に編集

コードを触らなくても調整できる。

✔ 使い回しができる

同じデータを複数回使える（鍵を2個出したいときなど）。

ItemData を作成する

▼ ItemData.cs

using UnityEngine;

[CreateAssetMenu(fileName = “ItemData”, menuName = “EscapeGame/ItemData”)]

public class ItemData :ScriptableObject
{
　public string itemName; 　 // アイテム名
　public Sprite icon; 　　　　 // スロットに表示するアイコン画像
　public Sprite detailImage; // 拡大表示用の画像
　public bool isConsumable; // 使ったら消えるアイテムか
}

🔍 ポイント

MonoBehaviour ではなく ScriptableObject を継承すること！

ItemData の作り方

Projectビューで 右クリック → 作成 → EscapeGame → ItemData
生成したアセットを選び、Inspector で設定
　- Item Name：アイテム名
　- Icon：スロットに表示される画像
　- Detail Image：拡大表示で使う画像
　- Is Consumable：鍵・電池など “使うと消えるもの” はチェック

【Unity6】2D脱出ゲームの作り方⑥｜ScriptableObjectを使ってアイテムのデータを設定した画像

※アイテムごとに ItemData を作成して管理する。

✅【Blender4.2】Unity2D脱出ゲーム用「木の棒」を作る方法｜FBXと透過PNG付き（無料ダウンロードあり）

スロットにデータを流し込むスクリプト

▼ ItemSlot.cs

using UnityEngine;
using UnityEngine.UI;

public class ItemSlot : MonoBehaviour
{
public Image iconImage;
public GameObject selectFlame;
public bool isSelected;
public ItemData currentItem;

public void SetItem(ItemData item)
{
currentItem = item;
iconImage.sprite = item.icon;
iconImage.enabled =true;
}

public void ClearItem()
{
currentItem = null;
iconImage.sprite = null;
iconImage.enabled =false;
selectFlame.SetActive(false);
isSelected = false;
}
}