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

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

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

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

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

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

Panelの基本的な使い方

作成方法

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

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

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

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

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

PanelにUIをまとめる方法

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

ここではボタン（Button）が２つ、テキスト（Text）が１つのUI群を作成します。

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

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

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

参考記事）UIの配置について（RectTransform）

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

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

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

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

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

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

Panelの色変更

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

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

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

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

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

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

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

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

Panelの準備

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

それぞれの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を非アクティブにすると編集しやすいです。

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

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

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

スクリプト作成

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

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

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

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

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

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

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

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

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

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

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

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

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

スクリプトを適用する

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

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

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

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

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

Buttonの編集

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

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

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

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

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

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

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

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

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

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

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

実行

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

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

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

まとめ

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

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

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

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