○はじめに

スマホは解像度が機種によって解像度が異なるので、それを解決する方法を紹介します。

なお、ほとんど下記の記事を見ていただければわかりますが、URP用のカメラの設定や、自分なりに使いやすい設定をしています。

また、こちらの記事にも記載されていますが、iOSについてはAppStoreの審査が厳しいらしく、別途何かしらの設定がいるっぽいです。そちらは今回紹介しません。

○実行結果

こんな感じです。全てのスマホ機種に合わせてサイズ変更できます。

○説明

●ヒエラルキー

こんな感じです。通常のカメラ、UI表示用のカメラ、画面外の黒い帯部分のカメラを用意しています。
(通常のカメラとUI表示用カメラは混同してもいいですが、個人的に分別した方が扱いやすいので分けています。)

●URP用Camera

・MainCamera

URP用のCameraコンポーネントはこんな感じです。

Point💡

RenderTypeをBaseにする。
CullingMaskでUIのLayerを除く。
StackにUICameraを追加する。

また、後程紹介するアスペクト比の調整コンポーネントをつけています。

・UICamera

Point💡

RenderTypeはOverlayにする。
CullingMaskはUIのみにする。
アスペクト比調整コンポーネントを追加する。

・ClearCamera

Point💡

RenderTypeはBaseにする。
Rendering > PiorityをMainCameraよりも低く設定する。
CullingMaskをNothingにする。
Environment > BackgroundTypeをSolidColorにして、黒色に設定する。
アスペクト比調整コンポーネントは追加しない。

●通常のCamera

インスペクター上での表示が異なりますが、内容はほとんど同じです。

・MainCamera

※viewportRectの値が変なのは、アスペクト比調整コンポーネントが自動でこちらの値を変更しているのが原因です。無視してください。

・UICamera

・ClearCamera

●Canvas

Canvasの設定は、通常とURP共通です。

・Canvasコンポーネント

Point💡

RenderModeをScreenSpace - Cameraにする。
RenderCameraにUI用カメラを選択する。

・CanvasScalerコンポーネント

Point💡

UIScaleModeをScaleWithScreenSizeにする。
ReferenceResolutionに目的の解像度を指定する。(1080×1920が一般的)
ScreenMatchModeをExpandにする。

○コード

●AspectSetter

CameraコンポーネントのviewPortRectを操作して、アスペクト比を調整します。
詳細は こちらの参考記事 をご覧ください。

.cs

[ExecuteAlways]
[RequireComponent(typeof(Camera))]
public class AspectSetter : MonoBehaviour
{
    Camera _camera;

    [SerializeField] Vector2 targetResolution;      // 目標の解像度
    [SerializeField] bool isUpdate;                 // 毎フレーム画面をそろえるか

    private void Awake()
    {
        _camera = GetComponent<Camera>();
        SetAspect();   
    }

    private void Update()
    {
        if (isUpdate) {
            SetAspect();
        }
    }

    void SetAspect()
    {
        var scrnAspect = (float)Screen.width / (float)Screen.height;        // 現在のアスペクト比
        var targAspect = targetResolution.x / targetResolution.y;           // 目標のアスペクト比

        var rate = targAspect / scrnAspect;     // 現在と目標との比率
        var rect = new Rect(0, 0, 1, 1);

        // 倍率が小さい場合、横をそろえる
        if (rate < 1) {
            rect.width = rate;
            rect.x = 0.5f - rect.width * 0.5f;
        }

        // 縦をそろえる
        else {
            rect.height = 1 / rate;
            rect.y = 0.5f - rect.height * 0.5f;
        }

        // 反映
        _camera.rect = rect;
    }
}

○さいごに

ほぼほぼ参考記事と同じような内容になっちゃいましたが、次回は固定解像度ではなく、各機種の解像度に合わせたゲーム画面の作成を紹介したいと思います。

●参考サイト