【Unity】AspectRatioFitterでアスペクト比を維持する

AspectRatioFitterとは？

AspectRatioFitterは、UnityのUIシステムの一部で、

RectTransformを指定したアスペクト比(縦横比)を保ったままリサイズする機能を提供します。

例えばサムネイル画像やムービーをUIに表示するとき、親のサイズに合わせて引き伸ばすと縦横比が崩れて不格好になってしまいます。

AspectRatioFitterを使えば、画面サイズや親の大きさが変わっても、常に元の比率を維持したまま表示できます。

Aspect Ratio Fitter はそれ自体のレイアウト要素のサイズを管理するレイアウトコントローラーとして機能します。これを使用することで、高さを幅に合わせたり、もしくはその逆に調整することができます。また、要素を親の内側に収まるようにしたり、親を覆うようにすることもできます。Aspect Ratio Fitter は最小サイズや推奨サイズといったレイアウト情報を考慮しません。

docs.unity3d.com

コンポーネントを追加する

アスペクト比を維持したいUI要素(ImageやRawImageなど)を選択し、

インスペクターウィンドウで「Add Component」をクリックします。

Aspect Ratio Fitterを選択して追加します。

Aspect Ratio Fitterには

Aspect Mode
Aspect Ratio

の二つの設定項目があります。

Aspect Mode の各設定

Aspect Modeは、アスペクト比をどのように維持するかを決める設定です。

次の5種類から選びます。

None

何も制御しません。

AspectRatioFitterを無効にしたい場合に使います。

Width Controls Height

幅(Width)を基準にして、設定した比率になるように高さ(Height)を自動調整します。

横幅は自分で決めて、縦は比率任せにしたいときに使います。

Height Controls Width

今度は逆に、高さ(Height)を基準にして幅(Width)を自動調整します。

縦のサイズを固定したいレイアウトで便利です。

Fit In Parent

親のRectTransformに収まるように、比率を保ったままサイズを調整します。

親の領域内に余白ができても、要素全体が必ず収まる(はみ出さない)のが特徴です。

画像全体を見切れずに表示したいときに向いています。

Envelope Parent

親を覆い尽くすように、比率を保ったままサイズを調整します。

Fit In Parentとは逆に、親の領域を隙間なく埋める代わりに、要素の一部がはみ出します。

背景画像のように、余白を作らず全面に敷き詰めたいときに使います。

Aspect Ratio の設定

Aspect Ratioには、維持したい縦横比を「幅 ÷ 高さ」の数値で指定します。

例えば、

16:9の比率なら 16 / 9 = 1.778
1:1の正方形なら 1
4:3なら 4 / 3 = 1.333

を入力します。

Width Controls HeightやHeight Controls Widthを使う場合は、この値に従ってもう一方の辺が計算されます。

実践例：画像をアスペクト比そのまま表示する

RawImageに表示するテクスチャの比率に合わせて、自動でサイズを調整してみます。

スクリプトからテクスチャの縦横比を読み取り、AspectRatioFitterに設定します。

using UnityEngine;
using UnityEngine.UI;

[RequireComponent(typeof(AspectRatioFitter))]
public class AspectImage : MonoBehaviour
{
    [SerializeField] private RawImage _rawImage;
    [SerializeField] private Texture _texture;

    private void Start()
    {
        var fitter = GetComponent<AspectRatioFitter>();

        // 親に収まるように維持する
        fitter.aspectMode = AspectRatioFitter.AspectMode.FitInParent;

        // テクスチャの幅÷高さを比率として設定する
        fitter.aspectRatio = (float)_texture.width / _texture.height;

        _rawImage.texture = _texture;
    }
}

これで、表示するテクスチャがどんな比率でも、縦横比を崩さずに親の領域内へ収められます。

RenderTextureを使ってカメラ映像や動画を表示する場合も、同じように比率を合わせると見栄えがよくなります。

注意点

Content Size Fitter との併用

AspectRatioFitterは自分でサイズを決めようとするため、Content Size Fitterと同じオブジェクトに付けると、お互いがサイズを取り合って意図しない挙動になることがあります。

両方を同時に使うのは避け、どちらの基準でサイズを決めたいかを整理しておきましょう。

Layout Group の配下での挙動

Horizontal Layout Groupなどのレイアウトグループの子に置くと、グループ側のサイズ制御と競合する場合があります。

レイアウトグループのControl Child Size設定との組み合わせに注意してください。

まとめ

今回は、AspectRatioFitterについて解説しました。

AspectRatioFitterを使うと、画面や親のサイズが変わっても、UIのアスペクト比を維持したまま表示できます。

特に画像やムービーなど、縦横比が崩れると見栄えに直結する要素で効果を発揮します。

Aspect Modeの5つの違いを押さえて、収めたいのか覆いたいのか、目的に合ったモードを選んでいきましょう。