Unityで3D脱出ゲーム

Unity 3D脱出ゲームの作り方その6:アイテムを選択する方法

2020年12月9日

Unityで作る3D脱出ゲームの作り方を紹介している記事その6です。

僕が所属しているオンラインサロンの
先生である嶋津さんが作成された動画を
見ながら勉強した内容について、

3D脱出ゲームの作り方

としてまとめている記事になります。

その6となるこの記事では、

アイテムの選択をする方法

として、

アイテムを選択した時のUI作成と、
アイテムを選択したスロット番号の
保持
についてお伝えしています。

参考となる動画はこちらです。

【Unity3D】脱出ゲームの作り方 # 06 アイテムの選択

Udemyの場合は、
セクション5の40

「アイテム選択時のパネルの作成」

セクション5の41

「アイテム選択時のUI変更」

セクション5の42

「アイテムの選択」

の内容です。

この動画で勉強すること

▶︎アイテムの選択ができるようにする。

目標1

アイテムボックスのSlotが選択された時のUIを作る。

目標2

SlotのUI変更に伴うItemBoxへの
反映や取得アイテムの画像反映など
についての修正を行う。

目標3

アイテムボックスのスロットを
クリックするとスロットの周りの枠
(以下・選択背景画像)が表示されるようにする。

目標4

アイテムを持っている時にスロットを
クリックすると選択背景画像が
表示されるようにする。

目標5

アイテムを複数持っていても、
選択したアイテム1つだけに
選択背景画像が表示されるようにする。

目標6

何番目のアイテムスロットを
選んでいるのかを変数で
保持できるようにする。

ItemBoxスクリプトのコード

アイテムの選択を行うために
今回編集したItemBoxのコードは
以下となります。

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

public class ItemBox : MonoBehaviour
{
    [SerializeField] Slot[] slots = default;
    [SerializeField] Slot selectedSlot = null;

    // どこでも実行できるやつ
    public static ItemBox instance;
    private void Awake()
    {
        if (instance == null)
        {
            instance = this;

            // slotsにslot要素をコードからいれる方法
            slots = GetComponentsInChildren<Slot>();
        }
    }


    // PickupObjがクリックされたら、スロットにアイテムをいれる
    public void SetItem(Item item)
    {
        foreach (Slot slot in slots) // slotsの数だけ繰り返す
        {
            if (slot.IsEmpty()) //slotがもし空だった場合
            {
                slot.SetItem(item); //slotにアイテムを入れる
                break;              //空のスロットにアイテムを入れたら繰り返しを止める
            }
        }
    }


    //スロットが選択された時に実行する関数
    public void OnSelectSlot(int position)
    {
        //一旦全てのスロットの選択パネルを非表示にする
        foreach(Slot slot in slots) //slotsの数だけ繰り返す
        {
            slot.HideBgPanel();
        }

        //選択されたスロットの選択パネルを表示する
        if (slots[position].OnSelected()) // もしアイテムの選択が成功したなら
        {
            selectedSlot = slots[position]; //選択しているスロットの番号を変数に入れる
        }
    }
}

Slotスクリプトのコード

今回編集したSlotのコードは
以下となります。

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

public class Slot : MonoBehaviour
{
    Item item = default;
    [SerializeField] Image image = default;
    [SerializeField] GameObject backgroundPanel = default;

    private void Awake()
    {
        //image = GetComponent<Image>(); //imageにImageコンポーネントを入れる
    }

    private void Start()
    {
        backgroundPanel.SetActive(false);
    }

    //アイテムスロットが空かどうかの判断
    public bool IsEmpty()
    {
        if(item == null)
        {
            return true;
        }
        return false;
    }

    //ItemBoxスクリプトのSetItem関数で実行
    public void SetItem(Item item)
    {
        this.item = item;
        UpdateImage(item);
    }

    // アイテムを受け取ったら画像をスロットに表示してやる
    void UpdateImage(Item item)
    {
        image.sprite = item.sprite; //Slotのimageにクリックしたアイテムのspriteを入れる
    }


    //選択した時の背景パネルを表示する関数 =>ItemBoxスクリプトのOnSelectSlot関数で使用
    public bool OnSelected()
    {
        if(item == null) // アイテムを持っていない場合
        {
            return false; //選択は失敗
        }

        backgroundPanel.SetActive(true); //背景画像パネルを表示する
        return true; //選択成功
    }


    //選択した時の背景パネルを消す関数 =>ItemBoxスクリプトのOnSelectSlot関数で使用
    public void HideBgPanel()
    {
        backgroundPanel.SetActive(false);
    }
}

アイテムの選択で勉強したことのまとめ

3D脱出ゲームの作り方その6
「アイテムの選択」で勉強した
内容についてのまとめです。

アイテムの選択をする方法は、
 選択した時の背景を表示する
 UIを用意します。

次に、U Iの変更に合わせて
 画像の表示などをスクリプトで
 修正します。

そして、ItemBoxスクリプトと
 Slotスクリプトを編集し

 アイテムが入っているスロットが
 選択された時に選択背景画像を
 表示するようにします。

さらにスクリプトを編集して、
 選んだアイテムが何番目のスロット
 なのかを変数に保持できるようにします。

今回の内容を実践すると、
選んだアイテムにだけ枠がつき、

選んだアイテムスロットが何番目かを
変数に保持することができます。

参考画像

アイテムスロットを選択した画像

-Unityで3D脱出ゲーム