セーフエリアとは？

モバイル向けにアプリケーションを作成する場合、セーフエリアを意識する必要があります。

昨今のスマートフォン、タブレット端末の画面はテレビやPCモニターのように長方形では無く、

角が丸くなっていることが多いです。

また、ノッチやピンチホールが画面上にあったりします。

セーフエリアは、スマートフォンやタブレットなどのデバイス上で、

アプリケーションの主要な情報や操作が確実に表示・操作される領域を指し、

通知バーやホームボタン、カメラ等のデバイスによるUIの邪魔にならない場所を示します。

Unity Docs

Unity - Scripting API: Device.Screen.safeArea

docs.unity3d.com

各種モバイル端末ごとのセーフエリアを簡単に確認するには、DeviceSimulatorが役に立ちます。

DeviceSimulatorでセーフエリアを確認する

Canvasの四隅に色違いのImageを配置してみました。

DeviceSimulator上部の「Safe Area」ボタンを押すと端末のセーフエリアが黄色い枠で表示されます。

このままだと4隅のImageがSafeArea外にあるためよろしくありません。

現在のSafeAreaを取得する

Screen.safeAreaで現在のセーフエリアの範囲を取得できます。

using UnityEngine;

public class SafeArea : MonoBehaviour
{
    private void Update()
    {
        var safeArea = Screen.safeArea;
    }
}

CanvasをSafeAreaに合うように調整する

ヒエラルキー上で、Canvas子にSafeAreaというオブジェクトを追加しました。

以下のスクリプトを用意して、SafeAreaオブジェクトに追加します。

今回はUnityEditor上で確認するため、Updateメソッドでセーフエリアの範囲を計算しています。

実機上では動的にセーフエリアが変化しないので、AwakeやStartのタイミングで1度計算すれば大丈夫だと思います。

using UnityEngine;

public class SafeArea : MonoBehaviour
{
    private Rect _safeArea;
    
    private void Update()
    {
        var safeArea = Screen.safeArea;
        if (_safeArea != safeArea)
        {
            _safeArea = safeArea;
            ApplySafeArea(_safeArea);
        }
    }
    
    private void ApplySafeArea(Rect safeArea)
    {
        var resolution = new Vector2(Screen.width, Screen.height);
        var normalizedMin = new Vector2(safeArea.xMin / resolution.x, safeArea.yMin / resolution.y);
        var normalizedMax = new Vector2(safeArea.xMax / resolution.x, safeArea.yMax / resolution.y);
        
        if (transform is RectTransform rectTransform)
        {
            rectTransform.anchoredPosition = Vector2.zero;
            rectTransform.sizeDelta = Vector2.zero;
            rectTransform.anchorMin = normalizedMin;
            rectTransform.anchorMax = normalizedMax;
        }
    }
}