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

【PR】Unityアセットストアセール情報!

Unity Asset Storeにて、クイズゲームが簡単に作れるアセットTrivia Quiz Kitがクーポンコード「GAMEVANILLA」を入力することで無料でゲットできます!
6月20日(木) 23:59まで
クーポンコードの使い方はこちら

はじめに

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

実機を持っていなくても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 コンポーネントを追加し、下の画像と同じ値に設定します

先ほどノッチと被っていたボタンを子オブジェクトにします

ゲームを開始すると、スクリプトが動き、セーフエリア内にボタンが移動します

まとめ

iPadや折りたたみスマホなど、最近は端末によってアスペクト比やノッチサイズも様々なので、見栄えの確認が大変ですが、今回の方法を使えば安心してUIの配置ができそうです

タイトルとURLをコピーしました