【Unity】コピペOKのアスペクト比対応。スマホ向けに背景やUIの大きさを自動で調整する方法。

2021年7月21日2022年8月25日

どうも、だらはです。
今回はスマホ向けでは必須の機能「アスペクト比対応」について紹介したいと思います。
基本的にはコピペでOKな筈なので、是非参考にして頂けたらと思います。

◆前提

• 背景は[Hierarchy->UI->Canvas]にて生成したCanvas内に配置しているものとします。
• また、CanvasにはCanvas Scalerがアタッチされているものとします。(図2参照)

アスペクト比対応の手順

早速ですが、手順を記します。
後追いで画像ファイルにて補足します。

◆対応手順

1. CanvasのCanvas Scalerの設定Screen Match ModeをExpandに設定する。(図1)
2. Main CameraにAdjustAspectスクリプトをアタッチする。(図2)

以上です。
1だけではUIが正しく表示されませんから、2まで実施してください。
2でアタッチするAdjustAspect.csは後述します。

◆図1(Canvas)

◆図2(Main Camera)

◆AdjustAspect.cs

using UnityEngine;

public class AdjustAspect : MonoBehaviour
{
    private Camera cam;
    private float width = 800f;
    private float height = 1422f;
    private float pixelPerUnit = 100f;

    void Awake()
    {
        cam = GetComponent<Camera>();
        cam.orthographicSize = (height / 2f / pixelPerUnit);

        float aspectScr = (float)Screen.height / (float)Screen.width;
        float aspectImg = height / width;

        if (aspectImg > aspectScr) //画面より画像の方が縦長(横に隙間が空く)
        {
            //描画範囲を指定して横の隙間を切り取る
            float ratioHeight = height / Screen.height;
            float ratioWidth = width / (Screen.width * ratioHeight);
            cam.rect = new Rect((1f - ratioWidth) / 2f, 0f, ratioWidth, 1f);
        }
        else
        {
            //描画範囲を指定して縦の隙間を切り取る
            float ratioWidth = width / Screen.width;
            float ratioHeight = height / (Screen.height * ratioWidth);
            cam.rect = new Rect(0f, (1f - ratioHeight) / 2f, 1f, ratioHeight);
        }
    }
}

本スクリプトによりUIの位置が正しく表示されるようになります。
また、プログラム内にコメントで注釈しましたが、描画範囲を指定して隙間を切り取る処理を入れました。

補足

なお、CameraのViewport Rectで描画範囲を切り取った個所は、実機では意図しない出力となる場合があります。
対策として、描画用のCameraとは別でCameraを実装、Depthを調整し、画面全体を黒色などで初期化する等の処理をしてやると良いです。
(Main CameraのDepthを-1, 画面外初期化用のCameraのDepthを-10とするなど)

以上です。