ひとりでのアプリ開発 - fineの備忘録 -

ひとりでアプリ開発をするなかで起こったことや学んだことを書き溜めていきます

20220329162023

Unity - UI : Panel について -

初めに

 UI の1つである Panel についてまとめます。

Panel とは

 Panel は実質的には Image と同じものです。ただし、デフォルトの設定が

  • 全画面表示
  • 半透明(色は白、α 値(透明度)が 100)

になっています。

 UI をまとめるときに使うことが多いです。下のように Button や Text をまとめて表示させます。


Panel についているコンポーネント

 見ての通り、

  • Rect Transform
  • Image

がついています。

 Image の使い方はこちらでまとめております。ぜひご覧ください。

fineworks-fine.hatenablog.com

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 と実質的には同じであるということが一番重要なことでしょうか。