脱出ゲームの作り方　４ ItemBoxスクリプトの実装

##アイテムボックスの作成

###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つのアイテムを取得できるので、それらを配列で管理する

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

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



```csharp

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番目のアイテムを使用する,

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

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



◇画像を取得する

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


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

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

```
    [SerializeField] Sprite lightBulbSprite; // 電球画像
    [SerializeField] Image[] itemBoxImages;  //itemBoxIの画像（配列）
```
:point_up:
Sprite　画像の形式（UIではない）
Sprite型の画像のオブジェクト
（この素材は全部Sprite）


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

lightBulbSprite
itemBoxImages

が出ている

lightBulbSpriteにLightBulbの画像を設定する

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

![P4-1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/144922/977ae613-3608-f48e-6aef-2c06af04ab01.png)


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

```csharp

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);

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

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


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

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