Unity - UI : Panel について -
初めに
UI の1つである Panel についてまとめます。
Panel とは
Panel は実質的には Image と同じものです。ただし、デフォルトの設定が
- 全画面表示
- 半透明(色は白、α 値(透明度)が 100)
になっています。
UI をまとめるときに使うことが多いです。下のように Button や Text をまとめて表示させます。
Panel についているコンポーネント
見ての通り、
- Rect Transform
- Image
がついています。
Image の使い方はこちらでまとめております。ぜひご覧ください。
Rect Transform の設定の確認
Stretch と左と上の書かれている正方形をクリックすると Anchor Preset が開きます。確認すると全画面表示になっていることがわかります。
サイズを変えるときは、Rect Transform の Left、Right、Top、Bottom を変更します。
Image の設定の確認
上で述べた通り、α 値が 100 になっており、半透明になっています。
また、Source Image は None ではなく、デフォルトで Background になっています。
Panel の使い道
Panel は UI をまとめるときにつかうと便利です。
今回は、道具を表示させるデザインを作ってみます。
〇 使う Panel は5つになります。
- BackPanel:一番後ろの Panel
- ButtonPanel:Button を設置するようの Panel
- ItemTextPanel:どうぐの Text を表示させる PanelRecovery
- RecoveryTextPanel:かいふくの Text を表示させる Panel
- ImportantTextPanel:たいせつなものの Text を表示させる Panel
ItemTextPanel、RecoveryTextPanel、ImportantTextPanel は同じ場所、同じ大きさにしておきましょう。
〇 ButtonPanel に Button を設置します。今回は3つ置きました。
縦に均等に Button を配置したいので、ButtonPanel に Vertical Layout Group コンポーネントをつけ、Child Alignment を Middle Center にしておきます。
※横方向に均等に配置する場合は、Horizontal Layout Group コンポーネントをつけましょう。
〇 スクリプトを用意します。
using System.Collections; using System.Collections.Generic; using UnityEngine; using UnityEngine.UI; //Buttonを使うため, 追加 public class PanelScript : MonoBehaviour { //Buttonを取得 [SerializeField] Button ItemButton; [SerializeField] Button RecoveryButton; [SerializeField] Button ImportantButton; //Panelを取得 public GameObject ItemPanel; public GameObject RecoveryPanel; public GameObject ImportantPanel; // Start is called before the first frame update void Start() { //初めはItemPanelが表示されるように onClickItemButton(); } //ItemButtonが押されたときの処理 public void onClickItemButton() { ItemPanel.SetActive(true); RecoveryPanel.SetActive(false); ImportantPanel.SetActive(false); } //RecoveryButtonが押されたときの処理 public void onClickRecoveryButton() { ItemPanel.SetActive(false); RecoveryPanel.SetActive(true); ImportantPanel.SetActive(false); } //ImportantButtonが押されたときの処理 public void onClickImportantButton() { ItemPanel.SetActive(false); RecoveryPanel.SetActive(false); ImportantPanel.SetActive(true); } }
用意したスクリプトはどのオブジェクトにつけてもよいです。この記事では、BackPanel につけました。
Button と Panel はドラッグ&ドロップし、取得しておきましょう。
(実行)上の動画と同じものです。
最後に
Panel について、まとめました。Panel は Image と実質的には同じであるということが一番重要なことでしょうか。