【Unity uGUI】パネル(Panel)を使ってUIを表示・非表示にする方法


UnityでUIを設計しているときに、シーン遷移をせずに説明画面やメニュー画面を表示したいことがあるのではないでしょうか。

そんなときに便利なUIが「パネル(Panel)」です。

Panelを使用することでUIをかたまりごとにまとめておいて、表示・非表示の変更をすぐに行うことができます。

今回は以下の内容をご紹介いたします。

  • Panelの基本的な使い方
  • Panelを表示・非表示にする方法

Panelの基本的な使い方

作成方法

まずはじめにPanelを作成します。

ヒエラルキーウィンドウ→Create→UI→Panelを選択してください。

Panel
Panel作成方法

するとゲームビューの見え方が以下のように変わります。

画面が薄い白色に変化したことがわかると思います。

Panelを設置することで背景をぼかして他のUIを見やすくすることができます。

PanelにUIをまとめる方法

次にPanelにUIをまとめます。

ここではボタン(Button)が2つ、テキスト(Text)が1つのUI群を作成します。

まずはじめに先ほどPanelを作成したようにヒエラルキーウィンドウ→UI→Buttonを選択してボタンを2つ作成してください。

同じくヒエラルキーウィンドウ→UI→Textを選択してテキストを選択してテキストを1つ作成してください。

ボタン・テキストの位置、サイズは任意ですのでお好きなように配置してください。

参考記事)UIの配置について(RectTransform)

ボタンテキスト作成後のヒエラルキーウィンドウ
作成後のヒエラルキーウィンドウ

次に作成したボタンとテキストをPanelの子オブジェクトに変更します。

それぞれをPanelにドラッグ&ドロップするだけでPanelの子オブジェクトに変更することができます。

Buttonを子オブジェクトに変更
子オブジェクトに変更

子オブジェクトに変更後、Panelを非アクティブに変更して全てのオブジェクトが見えなくなれば正しく子オブジェクトになっています。

消えない場合はどれかのUI要素が子オブジェクト化していない可能性があるので確認してください。

これでPanelを利用してUIを一つのまとまりにすることができました。

これだけではどのように利用するか不明な方もいらっしゃるとは思いますが、この後スクリプトを利用してPanelを複数準備したUIの表示・非表示方法をご紹介しますのでご安心ください。

Panelの色変更

次にPanelの色の変更します。

ヒエラルキーウィンドウでPanelを選択してから、インスペクターウィンドウのImageコンポーネント→Colorを選択することでColorウィンドウを表示できます。

このColorウィンドウで色を変更することでPanelの色を変更することができます。

Panel色設定ウィンドウ表示
Colorウィンドウ表示
Panel色変更方法
Panel色変更

また、Panelでは色のアルファ値を変更することも大切です。アルファ値とは色の透明度のことで、Colorウィンドウ上から4番目の「A」というプロパティです。これを上手に利用することが綺麗なUIを作成するコツですので、ぜひチャレンジして見てください。

以上で基本的な使用方法のご紹介は終了です。

Panelを表示・非表示にする方法

続いてPanelを表示・非表示にするためのスクリプトを作成します。

Panelを自由に表示・非表示に切り替えることができれば、よりスムーズなゲーム設計を行うことができます。

Panelの準備

まずはじめにPanelを3つ準備します。

それぞれのPanelの名前と構成要素(子オブジェクト)は以下の通りです。

※名前(オブジェクト種類)

  • MenuPanel(Panel)
    • MenuText(Text)
    • XR-HubButton(Button)
    • UnityButton(Button)
  • XR-HubPanel(Panel)
    • XRHubDescriptionText(Text)
    • BackButton(Button)
  • UnityPanel(Panel)
    • UnityDescriptionText(Text)
    • BackButton(Button)

以上のような構成でPanelを作成してください。

Panel複数設置後ヒエラルキーウィンドウ
ヒエラルキーウィンドウ

作成する際にPanelを一つ作成したらそのPanelを非アクティブにすると編集しやすいです。

UI要素のテキスト内容、配置は任意ですので自由に配置してください。Buttonは重なっていると誤作動の原因になりますのでご注意ください。

また、今回はそれぞれのパネルを以下のように編集しました。

参考記事)Textの基本的な使い方

スクリプト作成

それではスクリプトを作成していきます。

今回の画面遷移はMenuPanelから2つのDescriptionPanelへ遷移、2つのDescriptionPanelからMenuPanelへの遷移を実現するためのスクリプトを作成します。

スクリプトの名前を「UIManeger」として作成します。

作成したUIManagerを以下のように編集してください。

スクリプトを簡単にご説明します。

まず4行目に注目してください。

これによってUI要素をスクリプト内で自由に使用することができます。

UIをスクリプトで動かすときにこの一文を書き忘れたことによってエラーが発生することが多々ありますのでご注意ください。

次に10行目から12行目に注目してください。

ここで3つのPanelをスクリプトで編集するために変数としてそれぞれを格納します。

[SerializeField] というのは変数をPublicにしないでUnityエディターから変数の値を格納したいときに有効な記述です。

残りの部分でそれぞれのボタンが押されたときの処理をメソッドとして記述しています。

「GameObject.SetActive(bool)」でオブジェクトのアクティブ・非アクティブを設定できます。

スクリプトを適用する

それでは実際に空のオブジェクト「UIManager」を作成してUIManagerスクリプトをアタッチしましょう。

ヒエラルキーウィンドウ→Create→Create Emptyを選択して名前を「UIManager」とします。

次に先ほど作成したUIManagerスクリプトをドラッグ&ドロップでアタッチしてください。

最後にUIManagerのそれぞれのPanelを設定する場所に各Panelをドラッグ&ドロップでアタッチすればスクリプトの適用が完了です。

一連の流れは以下GIFをご確認ください。

UIManager設定
UIManager作成一連の流れ

Buttonの編集

最後にボタンに先ほど作成したUIManagerのメソッドをそれぞれ適用させます。

まずはMenuPanelのボタンから編集していきます。

編集しやすいようにMenuPanel以外のPanelを非アクティブ化しておきましょう。

ヒエラルキーウィンドウ→Canvas→MenuPanel→XR-HubButtonを選択してください。

インスペクターウィンドウ→Buttonコンポーネント最下部→OnClickの+(プラス)を選択してください。

作成されたOnClickのNoneの部分に先ほど作成した空のオブジェクトUIManagerをドラッグ&ドロップしてください。

NoFunction→UIManager→SelectXrHubDescription()を選択すればボタンが押されたときにこのメソッドを実行してくれます。

一連の流れは以下のGIFをご確認ください。

XR-HubButton編集
XR-HubButton編集一連の流れ

この作業を全てのボタンに対して行えば作業完了です。

ボタンと対応させるメソッドを間違えると想定外の動きをしますのでご注意ください。

参考記事)Buttonの基本的な使い方

実行

それでは実行して確認してみましょう。

Panel実行結果
実行結果

それぞれのボタンを押すことでUIが切り替わっていることがお分りいただけたと思います。

このようにPanelを使用することでシーンを切り替えることなく表示したいUIを簡単に切り替えることが可能になります。

まとめ

いかがでしたでしょうか。

今回はUnity uGUIのPanelの使用方法についてご紹介しました。

Panelを利用することでUIをまとめて、簡単に表示・非表示にすることができました。

このように少し工夫するだけでスクリプトを記述する負担が減りますのでぜひPanelを有効利用していただければと思います。


XR-HubPanel

この記事はいかがでしたか?
もし「参考になった」「面白かった」という場合は、応援シェアお願いします!

Twitterはじめました @FuruiYuya