【Unity】Image・Panelの大きさをスクリプトで変更する方法

この記事について
この記事でわかること
Panelとは？
Panelの大きさをスクリプトで制御
まとめ

この記事について

この記事ではPanelのRectTransformを変更することで、大きさを変えるスクリプトについて説明します。
※RectTransformは他のUIでも使用するので、Panelに限った話ではないこと念頭に入れておいてください。

この記事でわかること

RectTransform.sizeDelta を変更すると 幅・高さを調整できる
実用例：
- ポップアップの拡大/縮小演出
- ゲーム画面に応じたUIリサイズ

Panelとは？

Panelについては以下の記事を参考にしてください。

Panelの大きさをスクリプトで制御

Panelをスクリプトで参照する準備

ヒエラルキーで右クリックをしてPanelを用意します。
・「右クリック」→「UI」→「Panel」

次にスクリプトを作成してPanelにアタッチしてください。

大きさをRectTransformで変更する方法

今回はRectTansformで大きさを変更するため直接指定しています。
これで「Width」と「Height」が変更されPanelの大きさが変わります。

using UnityEngine;
using UnityEngine.UI;

public class Panel_Size : MonoBehaviour
{
    [SerializeField] private RectTransform testPanel;
    [SerializeField] private Vector2 rectSize;
    void Start()
    {
        testPanel = GetComponent<RectTransform>();

        rectSize = new Vector2(400,200);
        testPanel.sizeDelta = rectSize; // rectSize.x=幅, rectSize.y=高さ
    }
}

実行してみるとスクリプト通りにWidthが400、Heightが200になりますね。

Width、Heightを個別に変える方法

UIに応じてWidthだけ、Heightだけ調整することも可能。

using UnityEngine;
using UnityEngine.UI;

public class Panel_Size : MonoBehaviour
{
    [SerializeField] private RectTransform testPanel;
    [SerializeField] private Vector2 rectSize;
    void Start()
    {
        testPanel = GetComponent<RectTransform>();

        rectSize = testPanel.sizeDelta; // サイズ取得

        rectSize.x = 400; // Widthだけ変更
        rectSize.y = 200; // Heightだけ変更

        testPanel.sizeDelta = rectSize; // サイズ変更
    }
}

アニメーション的にサイズを変える方法

「Lerp」を使用することでゆっくり広がる「ポップアップ演出」が可能です。

using UnityEngine;
using UnityEngine.UI;

public class Panel_Size : MonoBehaviour
{
    [SerializeField] private RectTransform testPanel;
    [SerializeField] private Vector2 rectSize;

    [SerializeField] private Vector2 targetSize = new Vector2(300, 300);
    [SerializeField] private float speed = 2f;
    private float t;

    void Start()
    {
        testPanel = GetComponent<RectTransform>();

        testPanel.sizeDelta = new Vector2(0,0);
        rectSize = testPanel.sizeDelta; // サイズ取得
    }
    void Update()
    {
        if (t < 1f)
        {
            t += Time.deltaTime * speed;
            testPanel.sizeDelta = Vector2.Lerp(rectSize, targetSize, t);
        }
    }
}

実行してみるとウィンドウが開かれるような演出ができますね。

画面サイズに合わせて自動調整する

フルスクリーンの背景Panelに便利。ゲーム画面に合わせて自動で広がります。
※Editorでフルスクリーンのゲーム画面を見る場合は「Play Maximized」で実行するようにしてください。

using UnityEngine;
using UnityEngine.UI;

public class Panel_Size : MonoBehaviour
{
    [SerializeField] private RectTransform testPanel;

    void Start()
    {
        testPanel = GetComponent<RectTransform>();
        testPanel.sizeDelta = new Vector2(Screen.width, Screen.height);　//スクリーンサイズを取得
    }
}