MRが楽しい

MRやVRについて学習したことを書き残す

Unityでオブジェクトの切り替えを使ってUIを切り替える

本日は Unity の小ネタ枠です。
オブジェクトのアクティブを切り替えるスクリプトを使ってUIを切り替える方法を記事にします。

サンプルスクリプト

以下のサンプルスクリプトを作成しました。
Next または Prev 関数を呼び出すと、オブジェクトのアクティブを順次を切り替えることができます。
・SwitchObjectControl.cs

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

public class SwitchObjectControl : MonoBehaviour
{
    [SerializeField, Tooltip("切り替え対象オブジェクトリスト")]
    private List<GameObject> p_SwitchObjectList;

    [SerializeField, Tooltip("現在のインデックス番号")]
    private int p_ActiveIndex;

    // Start is called before the first frame update
    void Start()
    {
        // 指定のインデックスのオブジェクトのみを有効化する
        ActiveIndexObject(p_ActiveIndex);
    }

    /// <summary>
    /// 次の表示インデックスオブジェクトに表示を切り替える
    /// </summary>
    public void Next()
    {
        // 次の表示インデックス番号を取得する
        int showIndex = p_ActiveIndex + 1;
        if (showIndex >= p_SwitchObjectList.Count) showIndex = 0;

        // 指定のインデックスのオブジェクトのみを有効化する
        ActiveIndexObject(showIndex);
    }

    /// <summary>
    /// 次の表示インデックスオブジェクトに表示を切り替える
    /// </summary>
    public void Prev()
    {
        // 1つ前の表示インデックス番号を取得する
        int showIndex = p_ActiveIndex - 1;
        if (showIndex < 0) showIndex = p_SwitchObjectList.Count - 1;

        // 指定のインデックスのオブジェクトのみを有効化する
        ActiveIndexObject(showIndex);
    }

    /// <summary>
    /// 指定インデックスのオブジェクトに表示を切り替える
    /// </summary>
    /// <param name="a_Index"></param>
    public void ActiveIndexObject(int a_Index)
    {
        if (a_Index > p_SwitchObjectList.Count - 1) return;

        // 全てのオブジェクトを一旦非表示にする
        Clear();

        // 指定のインデックスオブジェクトを表示する
        p_SwitchObjectList[a_Index].SetActive(true);

        p_ActiveIndex = a_Index;
    }

    /// <summary>
    /// 全オブジェクトを非表示にする
    /// </summary>
    public void Clear()
    {
        foreach(GameObject obj in p_SwitchObjectList)
        {
            obj.SetActive(false);
        }
        p_ActiveIndex = -1;
    }
}

f:id:bluebirdofoz:20210816231312j:plain

表示を切り替えたいUIオブジェクトと、表示を切り替えるためのボタンを配置します。
f:id:bluebirdofoz:20210816231446j:plain

スクリプトを適当なオブジェクトにアタッチして、オブジェクトリストに切り替えたいUIオブジェクトを設定します。
f:id:bluebirdofoz:20210816231525j:plain

表示を切り替えるためのボタンにはスクリプトの Next または Prev 関数を設定します。
f:id:bluebirdofoz:20210816231536j:plain

動作確認

シーンを再生して動作を確認します。
f:id:bluebirdofoz:20210816231548j:plain

ボタンをクリックしてUIを切り替えることができました。
f:id:bluebirdofoz:20210816231601j:plain