脱出ゲームの作り方 ２

DrawerPanelで引き出しをクリックするとアイテムを取得できるようにする

◇ボタン
DrawerPanelの下に、RoomPanelで作成したボタンをコピペして作成する
TriggerButtonList-TriggerButton
ボタンは1つでいいので、右クリック-Unpack Prefabでプレファブを解除する
ボタンの位置とサイズを調節する（W200 H200）

プレファブを解除する理由
プレファブのままなら、プレファブをいじったときに勝手に変更されてしまうかもしれないから

◇表示するパネルの画像
DrawerPanelの下にUI-Imageを作成しLightBulbImageとする
電球の画像をセットする
SetNativeSizeボタンで、そのままでは大きすぎるので1/10位のサイズに調整する

◇テキスト
DrawerPanelの下にUI-Textを作成し、AlertTextとする

位置とサイズを調節する（W400 H50）
文字の中央寄せ
テキスト「電球を手に入れた」
フォントサイズ36

◇スクリプト
DrawerManagerスクリプトを作成し、DrawerPanelに張り付ける

電球の画像とテキストをGameObject型の変数として宣言する。

[SerializeField] GameObject LightBulbPanel;
[SerializeField] GameObject alertText;

※GameObjectはデータ型（Unity C#の）

[SerializeField]
Unityエディタから設定できるようにする
※参照　Udemy 「Unityゲーム開発入門」38. 別オブジェクトの操作方法
※publicとの違い
エディタから設定できるようになるところは共通
publicは、他のスクリプトでも操作できるようにする
（使える場所が広いが、エディタ以外で書き換えさせたくない場合は[SerializeField]を使うほうが安全）

引き出しが押されたらアイテム取得画面を表示する
1. 電球の画像をだす
2. Textをだす

public class DrawerManager : MonoBehaviour
{
    [SerializeField] GameObject LightBulbPanel;
    [SerializeField] GameObject alertText;

    void Start()
    {
        LightBulbPanel.SetActive(false);
        alertText.SetActive(false);
    }

    public void OnClickTrigger()
    {
        LightBulbPanel.SetActive(true);
        alertText.SetActive(true);
    }
}

◇変数にオブジェクトを設定

スクリプトに変数を宣言すると、
InspecterでDrawerPanelオブジェクトのDrawerManagerスクリプトに

LightBulbPanel
alertText

が出ているので、それぞれに電球画像とテキストをセットする

◇TriggerButtonを押したら電球パネルとテキストを表示
InspectorでTriggerButtonのButtonコンポーネントの On Click() にDrawerPanelオブジェクトをセットして、
DrawerManagerに表示される関数をからOnClickTrigger()を設定する

元の画像に戻る

電球の画像をクリックするとアイテム取得画面を非表示にする

※戻るボタン、他のパネルを表示させるボタンも、自分以外の画像を表示/非表示させているだけで、構造は同じ

    // 電球の画像をクリックすると電球画像を非表示にする
    public void OnClickImage()
    {
        LightBulbPanel.SetActive(false);
        alertText.SetActive(false);
    }

LightBulbImageにAdd CompornentでButtonを設定する
InspectorでLightBulbImageのButtonコンポーネントの On Click() にDrawerPanelオブジェクトをセットして、
DrawerManagerに表示される関数をからOnClickImage()を設定する

アイテム取得画面（電球画像とテキスト）の表示・非表示を関数にする

    void LightBulbSetActive(bool isShow)
    {
        lightBulbPanel.SetActive(isShow);
        alertText.SetActive(isShow);
    }

完成ソースコード

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

public class DrawerManager : MonoBehaviour
{
    [SerializeField] GameObject lightBulbPanel;
    [SerializeField] GameObject alertText;

    void Start()
    {
        LightBulbSetActive(false);
    }

    void LightBulbSetActive(bool isShow)
    {
        lightBulbPanel.SetActive(isShow);
        alertText.SetActive(isShow);
    }

    // 引き出しが押されたら
    // 1.電球の画像をだす
    // 2.Textをだす
    public void OnClickTrigger()
    {
        LightBulbSetActive(true);
    }

    // 電球の画像をクリックすると電球画像を非表示にする
    public void OnClickImage()
    {
        LightBulbSetActive(false);
    }
}

教材

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