MRが楽しい

MRやVRについて学習したことを書き残す

stretch設定のRectTransformで比率を基に幅や高さを変更する

本日はUnityの小ネタ枠です。
stretch設定のRectTransformで比率を基に幅や高さを変更する方法です。

stretch設定のRectTransformの幅と高さ

stretch設定のRectTransformの幅と高さは rect.width または rect.height で取得できます。
変更する際は offsetMin または offsetMax で設定できます。
docs.unity3d.com

サンプルシーンとサンプルスクリプト

以下のstretch設定のRectTransformで設定されたゲージバーを作成しました。
本シーンを使って、幅や高さが変わったstretchを一定の比率になるようスクリプトから再設定します。


以下のサンプルスクリプトを用意しました。
全体の幅を rect.width から取得し、offsetMin または offsetMax でそれぞれのゲージの幅を変更します。
・StretchGaugeTest.cs

using UnityEngine;

public class StretchGaugeTest : MonoBehaviour
{
    /// <summary>
    /// 全体のサイズ
    /// </summary>
    [SerializeField] private RectTransform _totalRectTransform;
    
    /// <summary>
    /// 青ゲージ
    /// </summary>
    [SerializeField] private RectTransform _blueRectTransform;

    /// <summary>
    /// 赤ゲージ
    /// </summary>
    [SerializeField] private RectTransform _redRectTransform;

    /// <summary>
    /// 青ゲージの比率
    /// </summary>
    [SerializeField] private float _blueRatio = 50.0f;
    
    [ContextMenu("ChangeGauge")]
    private void ChangeGauge()
    {
        // 全体の幅を取得する
        var totalGaugeWidth = _totalRectTransform.rect.width;
        var blueGaugeWidth = totalGaugeWidth * _blueRatio / 100.0f;
        var redGaugeWidth = totalGaugeWidth - blueGaugeWidth;
        
        // stretchのLeft, Top, Right, Bottomを設定する
        _blueRectTransform.offsetMin = new Vector2(0, 0);
        _blueRectTransform.offsetMax = new Vector2(-1.0f * redGaugeWidth, 0);

        _redRectTransform.offsetMin = new Vector2(blueGaugeWidth, 0);
        _redRectTransform.offsetMax = new Vector2(0, 0);
    }
}

動作確認

以下の通り、全体の幅を変更してみます。
stretchで設定した各ゲージは合わせて変形してしまうため、ゲージの比率が一時的に乱れます。

ChangeGauge関数を実行すると、全体の幅から各ゲージの幅を再計算して正しく再設定することができました。