【Unity】端末のセーフエリアの見え方を確認してノッチを回避する方法【Device Simulator】

Unity

2023.01.12

はじめに
Device Simulatorの使い方
セーフティーエリア内に配置するには
まとめ

はじめに

作成したアプリのボタンなどが、画面の端にある場合、一部の端末のノッチと被ってしまうケースがあります

実機を持っていなくても、Unity上で様々な端末の実際の見え方を確認できます

※Unity 2019.3 以降が必要です

Device Simulatorの使い方

Gameウィンドウ左上の Game をクリックして Simulator に切り替えるだけです

※もし Simulator がなければ、Package Manager からインストールしましょう

Simulatorでは、選択した端末での見た目を確認することができます

上部の Safe Area をクリックすると、黄色い枠でセーフエリアが表示されます

セーフティーエリア内に配置するには

これで見え方を確認できるようになりましたが、全ての端末を一つ一つ確認するのは非常に手間がかかります

そこで、どんな端末でもセーフエリア内に収まるようにしましょう

こちらの記事が参考になりました

まず、Canvas内に空のオブジェクトを作成します

名前はなんでも良いですが、 —SafeArea— と名付けました

こちらに以下のスクリプトを追加します

using UnityEngine;

public class SafeAreaAdjuster : MonoBehaviour
{
	//セーフエリアに合わせたい箇所をtrueにする。
	[SerializeField] bool left;
	[SerializeField] bool right;
	[SerializeField] bool top;
    [SerializeField] bool bottom;

    private void Start() {

		var panel = GetComponent<RectTransform>();
		var area = Screen.safeArea;

		var anchorMin = area.position;
		var anchorMax = area.position + area.size;

		if(left) anchorMin.x /= Screen.width;
		else anchorMin.x = 0;

		if(right) anchorMax.x /= Screen.width;
		else anchorMax.x = 1;

		if(bottom) anchorMin.y /= Screen.height;
		else anchorMin.y = 0;

		if(top) anchorMax.y /= Screen.height;
		else anchorMax.y = 1;

		panel.anchorMin = anchorMin;
		panel.anchorMax = anchorMax;

	}
}

—SafeArea— に Rect Transform コンポーネントを追加し、下の画像と同じ値に設定します