アイテムボックスの作成

UIの作成

UI-Panel
InspectorのAnchor Presetsでアンカーをtop-centerに設定し、
Pivotを1、Pos Yを0、Heightを200にする
Colorを黒にする
名前をItemBoxPnelにする
ItemBoxPnelの下に、UI-Imageを作成し、名前をItemBoxとする
サイズ（W120、H100）
Add CompornentでButtonコンポーネントをつける
ItemBoxをProjectのprefabフォルダにドラッグアンドドロップしてプレハブ化する
コピペ（Ctrl+D）して4つにする
ItemBoxPnelを選択した状態で、Add CompornentでHorizontalLayoutGropにする
ChildForceExpandのチェックマークを外して、ChildAlignmentでMiddleCenterを選択する
Spacingをドラッグしながら間隔を調節する（55くらい）

アイテムを取得したらアイテムボックスに入れる

ItemBoxManagerスクリプトを作成し、ItemBoxPnelに張り付ける

◇使うアイテムの列挙型(ITEM)をつくる
NONE, （アイテムが何もない）
LIGHT_BULB （電球）

◇アイテムボックスは4つのアイテムを取得できるので、それらを配列で管理する

ITEM[] itemList = new ITEM[4];
取得したアイテムの配列
itemListという配列を宣言して、4つの箱で作成する

※列挙型で作った「ITEM」型の配列
(列挙型と配列の組み合わせ)


using System.Collections;
using System.Collections.Generic;
using UnityEngine;


public enum ITEM
{
    NONE,           //アイテムが何もない
    LIGHT_BULB      //電球
}

public class ItemBoxManager : MonoBehaviour
{
    ITEM[] itemList = new ITEM[4]; // 取得したアイテムの配列

    // アイテムを取得
    public void SetItem(ITEM item)
    {
        itemList[0] = item;          //0番目の箱にitemを取得する
    }
    // アイテムの使用
    public void UseItem(int index)
    {
        itemList[index] = ITEM.NONE; // index番目のアイテムを使用したので空にする
    }

}

内部的に、SetItem(LIGHT_BULB)で電球を取得し、UseItem(0)で0番目のアイテムを使用する,

という関数が作成されている。

この処理に、画像の表示を追加する

◇画像を取得する

using UnityEngine.UI;
を追加する
※UIオブジェクト（Image型やText型）をスクリプトで使用するときに必要

これまでも、ImageやTextを使用していたのに必要なかった？
・これまではGameObjectを操作していたから、、、Image型やText型を使うときには.UIが必要

itemBoxの画像と、電球の画像を取得する

    [SerializeField] Sprite lightBulbSprite; // 電球画像
    [SerializeField] Image[] itemBoxImages;  //itemBoxIの画像（配列）

Sprite　画像の形式（UIではない）
Sprite型の画像のオブジェクト
（この素材は全部Sprite）

InspecterでItemBoxPnelオブジェクトのItemBoxManagerスクリプトに

lightBulbSprite
itemBoxImages

が出ている

lightBulbSpriteにLightBulbの画像を設定する

itemBoxImagesの▽をクリックしてSizeを4にする
4つのElementにItemBoxの各画像を設定する

◇itemに電球のデータが取得されたら、電球の画像を表示する
itemがNONE、それ以外の場合は何も表示しない
◇index番目のアイテムを使用したら、index番目に何も表示しない


using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;

public enum ITEM
{
    NONE,
    LIGHT_BULB
}

public class ItemBoxManager : MonoBehaviour
{
    [SerializeField] Sprite lightBulbSprite; // 電球画像
    [SerializeField] Image[] itemBoxImages;

    ITEM[] itemList = new ITEM[4]; // 取得したアイテムの配列



    // アイテムを取得
    public void SetItem(ITEM item)
    {
        itemList[0] = item;                    //0番目の箱にitemを取得する
        switch (item)
        {
            case ITEM.LIGHT_BULB:             //電球のデータが取得されたら、電球の画像を表示する
                itemBoxImages[0].sprite = lightBulbSprite;
                break;
            default:                          //itemがNONE、それ以外の場合は何も表示しない
            case ITEM.NONE:
                itemBoxImages[0].sprite = null;
                break;
        }
    }
    // アイテムの使用
    public void UseItem(int index)
    {
        itemList[index] = ITEM.NONE; // index番目のアイテムを使用したので空にする
        itemBoxImages[index].sprite = null;  //index番目に何も表示しない
    }

◇DrawerPnelで引き出しがクリックされて電球が取得されたときに、上記の処理を実行させる

DrawerManagerスクリプトで

[SerializeField] ItemBoxManager itemBoxManager;

を宣言し、

OnClickTrigger()関数に下記を追加する

  itemBoxManager.SetItem(ITEM.LIGHT_BULB);

途中から戻るボタンが使えなくなったのは、
ItemBoxPnelが、戻るボタンを邪魔している。

修正方法、下記のどちらか
１．BackTriggerButtonを、全部のパネルより下に配置する（Hierarchyウィンドウで下（最新）のオブジェクトが上に重なるから。）
２．ItemBoxPanelのRaycast Targetのチェックをはずして、ItemBoxPanelをマウスクリックの対象から外す。
（今回は２．の方法で修正）

教材

Unityゲームスタジオスタジオしまづ
【Unity】初心者からの脱出！？　脱出ゲームの作り方　その３
https://youtu.be/S8G9LE0LNq8

【Unity】初心者からの脱出！？　脱出ゲームの作り方　その４ ItemBoxスクリプトの実装
https://youtu.be/LJ8VFcDfJno