Unity UIの基本②｜Panelの使い方とRect Transformについて

前回は、UnityのUIを表示するための基本として、Canvasについて確認しました。
Canvasは、ButtonやText、ImageなどのUIパーツを配置するための土台です。

今回は、そのCanvasの中に配置するUIパーツの中から、Panelについて見ていきます。
Panelは、メニュー画面やゲームオーバー画面、設定画面などを作るときによく使うUIです。

また、PanelをはじめUIの各素材を使うときに必ず関係してくる Rect Transform についても、通常のTransformとの違いを含めて確認していきます。

Panelとは

Panelは、画面上に表示する「背景」や「グループ」「まとまり」を作るためのUIです。
たとえば、次のような場面で使います。

・タイトルメニューの背景
・ゲームオーバー画面
・設定画面
・確認メッセージの背景
・ボタンやテキストをまとめる枠

Panel自体は、基本的には四角い画像のようなUIです。

その上にTextやButtonを配置することで、1つの画面やメニューとしてまとめることができます。

Panelを作成する

Panelを作成するには、Hierarchyウィンドウで右クリックします。
UI → Panel
を選択します。

Canvasがまだない場合は、Panelを作成したタイミングで Canvas とEventSystem も自動的に作成されます。
作成されたPanelは、Canvasの子オブジェクトとして配置されます。

PanelはCanvasの中に配置されるUIなので、基本的にはCanvasの子オブジェクトとして使います。

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

Panelを選択すると、Inspectorにはいくつかのコンポーネントが表示されます。
主に確認しておきたいのは、次の3つです。

・Rect Transform
・Image
・Canvas Renderer

この中で、よく操作するのは Rect Transform と Image です。

Canvas Rendererは自動で付いているコンポーネントで、初めのうちは直接触ることはほとんどありません。

Rect Transformとは

Panelを選択すると、Inspectorの上の方に Rect Transform というコンポーネントが表示されます。
Rect Transformは、UI専用の Transform です。

Unityでは、通常のGameObjectにはTransformが付いています。
Transformでは、位置、回転、大きさを管理します。

一方、Panel や Button、Text、Image などのUIには、TransformではなくRect Transformが付いています。
Rect Transformは、UIの位置や大きさを管理するためのコンポーネントです。

TransformとRect Transformの違い

通常の Transform は、GameObject の位置、回転、大きさを管理します。

たとえば、Player、Enemy、Item、背景画像など、Scene上に配置するほとんどのオブジェクトにはTransformが付いています。
Transformでよく使う項目は、次の3つです。

・Position - 座標兎　
・Rotation - 回転
・Scale - 大きさ

一方、Rect Transformは、UIのような「画面上の四角い領域」を扱うためのものです。
Panel や Button は、画面のどこに表示するか、どのくらいの大きさで表示するかが重要になります。
そのため、Rect Transformでは、Position や Scaleだけでなく、幅や高さ、画面に対する基準位置なども設定できます。

Rect Transformで設定できること

Rect Transformでは、主に次のような内容を設定できます。

・UIの位置
・UIの幅と高さ
・画面や親オブジェクトに対する固定位置
・拡大縮小の基準点
・回転の中心

Panelの場合は、画面全体に広げたり、中央に小さく配置したり、画面下だけに表示したりできます。
このように、Rect TransformはUIのレイアウトを決めるためにとても重要な設定です。

WidthとHeight

Rect Transform では、UIの大きさを Width と Height で設定します。
Width は横幅、Height は高さです。

通常の Transform では、Scale を変更して見た目の大きさを調整することがあります。
しかし、UIでは基本的に Width と Height を使ってサイズを調整します。

たとえば、設定画面用の Panel を作る場合は、画面中央に横幅600、高さ400の Panel を配置する、といった指定ができます。

UIでは、Scale を変更するよりも、Rect Transform の Width と Height で調整した方が扱いやすいケースが多くあります。

Anchorsとは

Rect Transformで特に重要なのが Anchors です。
Anchorsは、日本語でいうと「固定する基準位置」のようなものです。

UIは、ゲーム画面のサイズやスマホの向きによって、表示される範囲が変わります。
そのため、単純に「x座標を100にする」と決めるだけでは、画面サイズが変わったときに位置がずれてしまうことがあります。
Anchorsを使うと、UIを親オブジェクトのどこを基準に配置するかを決めることができます。

たとえば、次のような指定ができます。

・画面中央を基準にする
・左上を基準にする
・右下を基準にする
・上下左右いっぱいに広げる

Panelを画面全体に広げたい場合は、Anchorsを上下左右に広げる設定にします。
これにより、画面サイズが変わってもPanelが画面全体を覆うようになります。

Pivotとは

Rect Transformには Pivot という設定もあります。
Pivotは、UIの中心点や回転の基準になる位置です。

たとえば、Pivotが中央にある場合、そのUIは中央を基準に回転したり拡大縮小したりします。
Pivotを左上にすると、左上を基準にして位置やサイズを考えることができます。

最初のうちは、Pivotは基本的に中央のままで問題ありません。
ただし、メニューを画面の端からスライド表示したい場合などは、Pivotの位置が重要になることがあります。

Panelの調整

Panelを画面全体に広げる

Panelは、ゲームオーバー画面やポーズ画面の背景として使うことがあります。
この場合、Panelを画面全体に広げることが多いです。

Panelを画面全体に広げるには、Rect Transform の Anchor Presets を使います。

Anchor Presets　から、上下左右に広がる設定（stretch stretch）を選ぶと、PanelをCanvas全体に合わせることができます。
この状態にすると、画面サイズが変わってもPanelが画面全体を覆うようになります。

半透明の黒いPanelを画面全体に重ねれば、ゲーム画面を少し暗くして、その上に「Game Over」や「Retry」ボタンを表示することができます。

Panelの色を変更する

Panelの色は、Inspector の Image コンポーネントから変更できます。

Panelには、最初から Image コンポーネントが付いています。
この Image コンポーネントの Color を変更すると、Panelの色を変えることができます。

たとえば、黒にすれば暗い背景に、白にすれば明るい背景にできます。

Panelの透明度を変更する

Panelは、色だけでなく透明度も変更できます。

ImageコンポーネントのColorを開くと、R・G・B・Aの値があります。
このうち、Aが透明度です。
Aの値を下げると、Panelが半透明になります。

たとえば、ゲーム画面の上に半透明の黒いPanelを重ねると、ゲームオーバー画面やポーズ画面の背景として使いやすくなります。

Canvas Rendererとは

Panelを選択すると、Inspectorに Canvas Renderer というコンポーネントも表示されます。

Canvas Rendererは、Canvasの中にあるUIを画面に描画するためのコンポーネントです。
Panelの場合、実際の色や画像はImageコンポーネントで設定します。
Canvas Rendererは、そのImageをCanvas上に表示するための裏方のような役割です。

基本的には、次のように考えておけば大丈夫です。

・Rect Transform：Panelの位置やサイズを設定する
・Image：Panelの見た目を設定する
・Canvas Renderer：PanelをCanvas上に描画するための仕組み

つまり、Panelを使うときによく触るのは、主にRect TransformとImageです。
Canvas Rendererは必要なコンポーネントですが、普段はそのままにしておけば問題ありません。

Panelの上にUIを配置する

Panelは、単体で使うよりも、その上にTextやButtonを配置して使うことが多いです。

たとえば、ゲームオーバー画面を作る場合は、次のような構成になります。

Canvas
└ GameOverPanel
　├ Text
　└ Button

このように、Panelの子オブジェクトとしてTextやButtonを配置すると、Panelと一緒にまとめて管理しやすくなります。

Panelの表示・非表示を切り替える

Panelは、ゲーム中に表示したり非表示にしたりすることがよくあります。
たとえば、ゲーム開始時は非表示にしておき、ゲームオーバーになったら表示する、という使い方です。

表示・非表示は、SetActiveを使って切り替えることができます。

gameOverPanel.SetActive(true);

これは、Panelを表示する処理です。

反対に、非表示にしたい場合は次のように書きます。

gameOverPanel.SetActive(false);

Panelを非表示にすると、その子オブジェクトになっているTextやButtonも一緒に非表示になります。
そのため、画面全体をまとめて表示・非表示したい場合に便利です。

スクリプトからPanelを操作する例

以下は、ゲームオーバー用のPanelを表示・非表示にする簡単な例です。

using UnityEngine;

public class UIManager : MonoBehaviour
{
    [SerializeField] GameObject gameOverPanel;

    void Start()
    {
        gameOverPanel.SetActive(false);
    }

    public void ShowGameOver()
    {
        gameOverPanel.SetActive(true);
    }
}

この例では、ゲーム開始時にPanelを非表示にしています。

その後、ShowGameOverメソッドを呼び出すと、ゲームオーバー用のPanelが表示されます。

今回のまとめ

今回は、UnityのUIパーツの1つであるPanelについて確認しました。

Panelは、メニュー画面やゲームオーバー画面、設定画面などを作るときによく使います。

ポイントは次の通りです。

・PanelはCanvasの中に配置するUI
・背景やメニュー画面の土台として使える
・PanelにはRect Transform、Image、Canvas Rendererが付いている
・Rect TransformはUIの位置やサイズを管理する
・通常のTransformはGameObjectの位置、回転、大きさを管理する
・Rect TransformではWidth、Height、Anchors、Pivotなどを設定できる
・Imageコンポーネントで色や透明度を変更できる
・Canvas RendererはUIを描画するためのコンポーネント
・Canvas Rendererは基本的に直接触らなくてよい
・SetActiveでPanelの表示・非表示を切り替えられる
・Panelを非表示にすると、子オブジェクトもまとめて非表示になる

Panelは、UI画面を作るときの基本になるパーツです。

特にRect Transformを理解しておくと、ButtonやTextなど、他のUIパーツも扱いやすくなります。

次回予告

次回は、Panelの上に配置するUIパーツとして、Text、TextMeshPro について確認していきます。

文字を表示したり、ボタンを押したときに処理を実行したりすることで、より実際のゲーム画面に近いUIを作っていきます。

こちらはUnity初心者向けの記事をテーマ別にまとめています。
▼ Unity初心者向け記事まとめはこちら

こちらのマガジン「ミニゲーム作成講座　全8回セット」でもシーンの切り替えなどを活用して、初心者でも知識ゼロから作れるミニゲーム作成講座を紹介しています。

さらにステップアップの「スマホで遊ぶジャンプゲーム　8回セット」のマガジンもぜひご活用ください。

ファイブボックスでは、スクラッチやUnityの個別指導のオンラインレッスンを行っています。
ご興味のある方は当サイト、オンラインレッスンから、無料体験授業へお問い合わせ下さい。