はじめに
ユニティを使用したクリックしたアイテムを取得してインベントリに格納できる脱出ゲームなどいろんなゲームに使える簡易的なインベントリ機能の実装方法です。取得したアイテムの使用(ログを表示)や取得したアイテムの消去もできます。
インベントリに格納するアイテムの準備
次に用意した画像のTextureTypeを変更しておきます。選択してinspectorからTextureTypeをSprite(2D and UI)に変更してApplyをクリックします。
![](https://cbagames.jp/wp-content/uploads/2022/12/ap.png)
UI→Imageを作成します。
![](https://cbagames.jp/wp-content/uploads/2022/12/2022-12-14_200401.png)
アイテムのデータベース作成
scriptableObjectを作成してアイテムを簡単に管理できるようにします。
C#Scriptを作成して以下のコードを入力します。
using UnityEngine;
[CreateAssetMenu(fileName ="New Item",menuName ="ScriptableObject/Create Item") ]
public class Item : ScriptableObject
{
//アイテムの名前
new public string name = "New Item";
//アイテムのアイコン
public Sprite icon = null;
//アイテムの使用
public void Use()
{
Debug.Log(name+"を使用しました");
}
}
scriptを作成するとprojectビューの+からアイテムのデータを作成することができます。
![](https://cbagames.jp/wp-content/uploads/2022/12/pl.png)
+を押してscriptableObject→Create Itemを押すと下のようなアイコンが作成されます。
![](https://cbagames.jp/wp-content/uploads/2022/12/2022-12-15_162253.png)
![](https://cbagames.jp/wp-content/uploads/2022/12/2022-12-15_162332.png)
inspectorからアイテムデータを設定できるようにるのでアイテムの名前と画像を設定します。
![](https://cbagames.jp/wp-content/uploads/2022/12/2022-12-15_161749.png)
アイテムに貼り付けるコード
次にスクリプトを作成してアイテムに貼り付けます
using UnityEngine;
using UnityEngine.UI;
public class PickUpItem : MonoBehaviour
{
//Itemデータを入れる
public Item item;
void Start()
{
//設定したアイコンを表示させる
GetComponent<Image>().sprite = item.icon;
}
//インベントリにアイテムを追加
public void PickUp()
{
Inventry.instance.Add(item);
Destroy(gameObject);
}
}
スクリプトをアイテムに貼り付けてinspectorから先ほど作ったアイテムデータを設定します。
![](https://cbagames.jp/wp-content/uploads/2022/12/2022-12-15_170124.png)
作成したアイテムにbuttonを追加してonClickをpickUpに設定します。
![](https://cbagames.jp/wp-content/uploads/2023/01/2023-01-12_160616.png)
インベントリスロットの作成
次に画像のようなインベントリを作っていきます。まずインベントリの背景(画像の緑の部分)を作成します。
UseButton | 白の部分(アイテムを使用するボタン) |
iconImage | 灰色の部分(アイテムの画像) |
removeButton | 赤の部分(アイテムを消去するボタン) |
![](https://cbagames.jp/wp-content/uploads/2022/12/2022-12-14_172347-1.png)
canvasの下に空のGame objectを作成して、色やサイズを調整します名前はInventryに変更しておきます。
次にアイテムを格納するSlotを作ります。アイテムを使用するボタン、アイテムを消去するボタンを作成します。
Inventryの下にPanelを作成しその下CreateEmpty(Slot)その下にImageを下の画像のように作成していきます。
![](https://cbagames.jp/wp-content/uploads/2023/01/2023-01-12_170030.png)
Panelの名前はInventryPanelにしました。Slotはprefabにしておくと楽です
![](https://cbagames.jp/wp-content/uploads/2022/12/2022-12-15_154145.png)
スロットを並べる
次にSlotをInventryに並べていきます。
Panelを選択してadd ComponentからGrid Layout Groupを追加します。
これを追加すると子オブジェクトを整列してくれるのでスロットを追加していきます。
inspectorから位置やサイズ、オブジェクト同士の間隔など好きなように設定できます。
![](https://cbagames.jp/wp-content/uploads/2022/12/2022-12-15_155806-1024x535.png)
インベントリのコード
Inventry、InventryUI、Slotの3つのスクリプトを作成します。
using System.Collections.Generic;
using UnityEngine;
public class Inventry : MonoBehaviour
{
public static Inventry instance;
InventryUI inventryUI;
private void Awake()
{
if(instance== null)
{
instance = this;
}
}
private void Start()
{
inventryUI = GetComponent<InventryUI>();
inventryUI.UpdateUI();
}
public List<Item> items = new List<Item>();
public void Add(Item item)
{
items.Add(item);
inventryUI.UpdateUI();
}
public void Remove(Item item)
{
items.Remove(item);
inventryUI.UpdateUI();
}
}
using UnityEngine;
public class InventryUI : MonoBehaviour
{
public Transform InventryPanel;
Slot[] slots;
void Start()
{
slots = InventryPanel.GetComponentsInChildren<Slot>();
}
// Update is called once per frame
public void UpdateUI()
{
Debug.Log("UpdateUi");
for(int i = 0; i < slots.Length; i++)
{
if (i < Inventry.instance.items.Count)
{
slots[i].AddItem(Inventry.instance.items[i]);
}
else
{
slots[i].ClearItem();
}
}
}
}
using UnityEngine;
using UnityEngine.UI;
public class Slot : MonoBehaviour
{
public Image icon;
public GameObject removeButton;
Item item;
//アイテムを追加する
public void AddItem(Item newItem)
{
item = newItem;
icon.sprite = newItem.icon;
removeButton.SetActive(true);
}
//アイテムを取り除く
public void ClearItem()
{
item = null;
icon.sprite = null;
removeButton.SetActive(false);
}
//アイテムの消去ボタン
public void OnRemoveButton()
{
Inventry.instance.Remove(item);
}
//アイテムの使用ボタン
public void UseItem()
{
if(item== null)
{
return;
}
item.Use();
}
}
インベントリにInventry&InventryUIスクリプトをすべてのスロットにSlotスクリプトを貼り付けます。Slotをprefabにしてある場合は一括で設定できます。
![](https://cbagames.jp/wp-content/uploads/2023/01/5ba897d6d697425ab4b38f14e988b482.png)
Inventryのinspector画面にInventryPanel入れる場所があるので設定します。
![](https://cbagames.jp/wp-content/uploads/2023/01/001.png)
slotにIconとRemoveButtonを入れる場所があるので設定します。
![](https://cbagames.jp/wp-content/uploads/2023/01/002.png)
SlotのRemoveButtonとUseButtonにButtonコンポーネント追加してそれぞれ設定します。
![](https://cbagames.jp/wp-content/uploads/2023/01/004.png)
![](https://cbagames.jp/wp-content/uploads/2023/01/003-2.png)
これで簡易的なインベントリシステムの完成です。