Unity事例ノート

UNITY

Panelを使ってUIの表示を切り替える

テキストやボタン、画像といったUIによる表示が多ければ、それぞれの画面遷移も煩雑になります。

Panelを使えば、複数のUIを1つにまとめることができ、見た目も管理もすっきりします。

このように、Panel表示、非表示のしくみを作ってみましょう。

関連記事:
スクロールバー(ScrollBar)の設置
ドロップダウンで画像表示を切り替え
Panelをボタンとして利用する

Panelを作成する

ヒエラルキー > UI > Panel を選択します。

アンカープリセットを確認しましょう。

デフォルトでは全画面表示になっています。

Alt + クリックで、中央揃えにします。

サイズを幅400、高さ250に変更しました。

ゲームビューではこのように配置されています。

Panelの名前を、MainPanelに変更しました。

MainPanelを複製して、SubPanelを作成します。

一旦、SubPanelのチェックを外し、非表示にしておきます。

1枚目のPanelにボタンを配置

ボタンを作成します。

MainPanelの中にドラッグ&ドロップし、子オブジェクトとして配置します。

中央に配置して、位置を調整しましょう。

ボタン内のテキストに文字を入力します。

続いて、UI > テキストを作成して、Panelの子オブジェクトとして配置しましょう。

テキストを入力し、位置を調整します。

ゲームビューでは、このような配置になっています。

2枚目のPanelにボタンを配置

続いて、SubPanelを作成します。

一旦、MainPanelのチェックを外して非表示に、SubPanelを表示します。

ボタンを作成して、SubPanelの子オブジェクトへ。

配置を変更しましょう。

ボタン内のテキストを変更します。

画像(Image)を作成して、SubPanelの子オブジェクトへ移動します。

※画像の作成方法についてはこちらをご覧ください。
【Unity C#】画像(UI.Image)の設定項目

SubPanelのゲームビューはこのようになっています。

MainPanel、SubPanelを両方とも表示させます。

Panelの表示・非表示を切り替えるスクリプト

空のオブジェクトを作成します。

PanelChange.csを作成して、GameObject(空のオブジェクト)に追加します。

PanelChange.csを記述します。

GameObjectのインスペクターを選択し、MainPanel、SubPanelにそれぞれのPanelオブジェクトを入れます。

ゲームスタートして、まずはMainPanelが表示されることを確認します。

次は、ボタンによって、Panelが切り替わるようにしましょう。

まずはMainPanel側のボタンから、以下の手順でSubView()メソッドを呼び出す設定を行います。

SubPanel側のボタンも同じ手順で、MainView()メソッドを呼び出す設定しましょう。

ゲームプレイして、動きを確認します。

関連記事:
スクロールバー(ScrollBar)の設置
ドロップダウンで画像表示を切り替え
Panelをボタンとして利用する