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

2021年7月21日2024年12月4日

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

アスペクト比対応の手順

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

◆対応手順

1. Canvasの直下にアスペクト比調整用のPanelを作成する。(図1)
2. Main CameraにCameraCtrl.csスクリプトをアタッチする。(図1)
3. Canvas Scalerの設定Screen Match ModeをExpandに設定する。(図2)

以上です。
2でアタッチするCameraCtrl.csは後述します。

◆図1

◆図2

◆AdjustAspect.cs

using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class CameraCtrl : MonoBehaviour
{
    private Camera cam;
    private float width = 720f;
    private float height = 1280f;
    private float pixelPerUnit = 100f;
    [SerializeField] RectTransform rect;

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

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

        float ratioWidth = 1f;
        float ratioHeight = 1f;

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

            //Canvasの大きさを変更する
            Vector2 anchorMin = rect.anchorMin;
            anchorMin.x = (1f - ratioWidth) / 2f;
            rect.anchorMin = anchorMin;

            Vector2 anchorMax = rect.anchorMax;
            anchorMax.x = 1 - ((1f - ratioWidth) / 2f);
            rect.anchorMax = anchorMax;
        }
        else
        {
            //描画範囲を指定して縦の隙間を切り取る
            ratioWidth = width / Screen.width;
            ratioHeight = height / (Screen.height * ratioWidth);
            cam.rect = new Rect(0f, (1f - ratioHeight) / 2f, 1f, ratioHeight);

            //Canvasの大きさを変更する
            Vector2 anchorMin = rect.anchorMin;
            anchorMin.y = (1f - ratioHeight) / 2f;
            rect.anchorMin = anchorMin;

            Vector2 anchorMax = rect.anchorMax;
            anchorMax.y = 1 - ((1f - ratioHeight) / 2f);
            rect.anchorMax = anchorMax;
        }
    }
}

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

補足

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