Unity(C#)初心者・入門者向けチュートリアル ひよこのたまご

AndroidやiOS向けアプリを簡単に作れるゲーム開発環境Unity(ユニティ)の使い方を、チュートリアル方式で一緒に学びましょう!

【Unity開発】uGUIのPanelの使い方

Unity 2021.1.0f1 Personal(【更新】2021年4月)
Unity5.1.1f1 Personal(2015年7月)

今回はuGUIのPanelについて解説したいと思います!
PanelはButtonやTextなど他のUIパーツを載せてまとめるのが主な役割です。
・全画面表示である。
・Colorが半透明である。

の2点を除けばuGUIのImageとほぼ変わりません。

hiyotama.hatenablog.com

Panelの解説

それではまずPanelを作ってみましょう。
HierarchyビューからCreate > UI > Panelを選択します。

f:id:hiyotama:20210416053259p:plain
Panel作成

ゲーム画面全体にモヤがかかったようになりますがこれは画面全体をPanelが覆っている状態です。

それではPanelオブジェクトを選択してInspectorビューを見てみます。

f:id:hiyotama:20210416053659p:plain

PanelオブジェクトにRectTransform・CanvasRenderer・Imageコンポーネントがついています。
RectTransformはuGUI用のTransformで、Panelはデフォルトでは全画面表示となっています。

f:id:hiyotama:20210416054129p:plain
AnchorPresetが全画面表示

RectTransformについてくわしくは過去記事をご参照ください。

hiyotama.hatenablog.com

CanvasRendererは存在しているけど透明なuGUIの描画をスキップする時に使うようです。

baba-s.hatenablog.com

ImageコンポーネントはデフォルトでBackgroundというSpriteがついており、Colorが半透明となっています。
Imageについてくわしくも過去記事をご参照ください。

hiyotama.hatenablog.com

Panel自体の解説については以上となります。
全画面表示である以外はほぼImageと同じですね。

Panelを使ってみる

それでは実際にPanelを使ってUIをデザインしてみましょう。

先ほど作成したPanelのRectTransformを以下のように設定します。

f:id:hiyotama:20210416063711p:plain

f:id:hiyotama:20210416063902p:plain
ウインドウ端から50pxずつ離す

続いてPanelの中にButtonを配置します。
Panelにカーソルを合わせた状態でCreate > UI > Buttonを選択し、Panelの子オブジェクトとしてButtonを作成します。
作成したらButtonのRectTransform>AnchorPresetを表示し、キーボードのaltを押した状態でcenter-bottomを選択します。

f:id:hiyotama:20210416064313p:plain
ButtonのAnchorPresetをcenter-bottomに

するとPanelの下側にBottomが配置されます。
PosYを微調整して少し上へ移動させます。

f:id:hiyotama:20210416064549p:plain
ButtonをPanel下に配置

Panelにカーソルを合わせた状態でCreate > UI > Panelを選択し、Panelの中にPanelを作成します。
作成したPanelは全画面表示となっています。
Bottomだけ50などの数値を入れて作成したButtonと被らないようにします。

f:id:hiyotama:20210416064851p:plain

f:id:hiyotama:20210416064930p:plain
Panelの中にPanelを作成する

新しく作成したPanelの更に子オブジェクトとしてuGUIのTextを作成します。
Textの内容は例えばアイテム一覧などにします。
分かりやすいように、それに合わせてHierarchyビューのPanel, Button, Textの名前も変更しておきましょう。

f:id:hiyotama:20210416065528p:plain
Hierarchyビュー

f:id:hiyotama:20210416065558p:plain
Gameビュー

このようにPanelは子オブジェクトとして他のUIパーツを配置してまとめていきます。

PanelをScriptから切り替える

最後にPanelScriptから切り替え方についてです。

まずは先ほど作成したItemListPanelをコピーして「そうび一覧」「まほう一覧」のPanelを作成します。
またそれに合わせてButtonもコピーします。

f:id:hiyotama:20210416070249p:plain
アイテム、そうび、まほう用にPanelとButtonをコピー

続いてPanelを切り替える用のScriptを作成します。

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


public class ChangePanel : MonoBehaviour
{
    [SerializeField] GameObject itemListPanel;
    [SerializeField] GameObject equipmentListPanel;
    [SerializeField] GameObject magicListPanel;

    [SerializeField] Button itemListButton;
    [SerializeField] Button equipmentListButton;
    [SerializeField] Button magicListButton;


    void Start()
    {
        OpenItemListPanel();
    }


    // ItemListPanelを開く
    public void OpenItemListPanel()
    {
        itemListPanel.SetActive(true);
        equipmentListPanel.SetActive(false);
        magicListPanel.SetActive(false);

        itemListButton.interactable = false;
        equipmentListButton.interactable = true;
        magicListButton.interactable = true;
    }


    // EquipmentListPanelを開く
    public void OpenEquipmentListPanel()
    {
        itemListPanel.SetActive(false);
        equipmentListPanel.SetActive(true);
        magicListPanel.SetActive(false);

        itemListButton.interactable = true;
        equipmentListButton.interactable = false;
        magicListButton.interactable = true;
    }


    // MagicListPanelを開く
    public void OpenMagicListPanel()
    {
        itemListPanel.SetActive(false);
        equipmentListPanel.SetActive(false);
        magicListPanel.SetActive(true);

        itemListButton.interactable = true;
        equipmentListButton.interactable = true;
        magicListButton.interactable = false;
    }
}

ChangePanel.cs

こちらのScriptを一番最初に作成したPanelオブジェクトに取り付けます。

f:id:hiyotama:20210416071542p:plain
PanelオブジェクトにChangePanel.csを取り付ける

続いてChangePanelの各メンバ変数をドラッグ&ドロップで指定します。

f:id:hiyotama:20210416071950g:plain

続いて各ButtonのOnClickを設定します。
以下の通り設定して下さい。
ItemListButton → OpenItemListPanel
EquipmentListButton → OpenOpenEquipmentListPanel
MagicListButton → OpenMagicListPanel

f:id:hiyotama:20210416072719g:plain
ItemListButtonのOnClick設定例

Buttonについてはこちらの過去記事もご参照下さい。

hiyotama.hatenablog.com


以上でPanelの切り替え設定は完了です。
実際に動かしてみます。

f:id:hiyotama:20210416073150g:plain

各OpenListPanelメソッドでは対象PanelをSetActiveで表示させ、対象外のPanelを非表示にしています。
またButtonは逆に、対象Buttonを無効にして押せないように、対象外のButtonを有効にして押せるようにしています。


今回は以上になります。
ありがとうございました〜。