LoginSignup
1

More than 3 years have passed since last update.

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

Last updated at Posted at 2019-10-17

アイテムボックスの作成

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」型の配列
(列挙型と配列の組み合わせ)


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

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

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

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

教材

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

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

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
1