【Unity】モバイル画面に対応させる

はじめに
実装
その他
おわりに

はじめに

結論：モバイルアプリの画面配置は中央配置が楽でいいぞって話。
モバイルアプリを作っています。各端末の画面サイズに対応させたいと思います。
一番簡単に脳死で、ノッチとかも気にしなくても実装できます。
もう何年も前からある手法ですが、私は違うアプローチで実装していて使っていなかったのでメモ。

実装

前提として1080 x 1920の画面でモバイルアプリを想定します。

Canvas の設定

Canvas を選択して、インスペクタを確認します。
- Render Mode: Screen Space – Overlay
- Canvas Scaler:
  - UI Scale Mode: Scale With Screen Size
  - Reference Resolution: 1080×1920（任意ですが、スマホ向けなら縦長推奨）
  - Screen Match Mode: Match Width or Height（値は 0）

UIオブジェクトのアンカーを中央に固定

UI オブジェクト（例えばパネルやボタン）の Rect Transform を選択。
インスペクタの上部にある Anchor Preset をクリックし、十字の真ん中 (Middle Center) を選択。
- ショートカット：Alt を押しながら選ぶと、ポジションも自動調整されます。
Pos X と Pos Y を 0 に設定。
Pivot の値も (0.5, 0.5) になっていることを確認。

1080 x 1920　のCanvas（赤）が中央に配置され、Expandでどの端末の画面サイズでも画面比を調整して表示してくれます。

その他

ノッチ対策したいなら

using UnityEngine;
[RequireComponent(typeof(RectTransform))]
public class SafeAreaEx : MonoBehaviour
{
    private RectTransform rectTransform;
    private Rect currentSafeArea;
    void Awake()
    {
        rectTransform = GetComponent<RectTransform>();
        ApplySafeArea();
    }
    void Update()
    {
        // デバイス回転や解像度変更に対応
        if (currentSafeArea != Screen.safeArea)
        {
            ApplySafeArea();
        }
    }
    void ApplySafeArea()
    {
        currentSafeArea = Screen.safeArea;
        Vector2 anchorMin = currentSafeArea.position;
        Vector2 anchorMax = currentSafeArea.position + currentSafeArea.size;
        anchorMin.x /= Screen.width;
        anchorMin.y /= Screen.height;
        anchorMax.x /= Screen.width;
        anchorMax.y /= Screen.height;
        rectTransform.anchorMin = anchorMin;
        rectTransform.anchorMax = anchorMax;
    }
}