💩

UE5 UnrealEngineのウィジェットSafeZoneの謎仕様

2022/03/30に公開

SafeZoneとは?

SafeZoneとは、SafeArea、セーフエリアのことですね。iPhoneXから追加されたノッチ[1]やホームバー、角の丸み部分を避けるための領域ですね。
次の画像のように横持ちだと左右と下側にセーフエリアがあります。

iPhoneXだと、このグレー部分の領域

謎の片側だけセーフエリア

UEでのSafeZoneの謎仕様を紹介します。
UE5.0.0 Preview2でも修正されていないようなので、なにか特別なこだわりがあるのかUE4から引き続きで謎仕様を継続しています。[2]

SafeZoneウィジェット
この画面はウィジェットのエディタでスクリーンサイズにiPhoneXを設定しています。スマホ向けにセーフエリア対応をしたことがある人はパっと見で気付くと思うのですが、このSafeZoneウィジェットの領域おかしいですよね。右側の角丸エッジにもセーフ領域が必要なんですが、なぜかありません。
実機だと想定どおり左右にあるので大丈夫なんですが、エディタではこの誤った表示になります。たぶんどこかに定義があってそこを編集すれば直せるような気もするのですが、私のUE力では辿り着けてません。
公式マニュアルでも堂々とこの状態なので、誤りと認識されていないのかもしれません。
謎の解決には至ってませんが、実機では問題がないようですので、エディタは偽りの表示だと諦めてしまえばSafeZone自体は使用できます。

UnityのDeviceSimulator

ちなみにUnityのDeviceSimulatorでは、このように完璧な状態のセーフエリア表示となっているのでとても助かります。

Unity DeviceSimulatorでiPhoneXに設定

まとめ

モバイル向け開発のエディタ環境としてはUE5になってもUnityのほうが優れているなという印象です。こういう細かいところの使い心地の悪さもUEと仲良くなれない理由かと思う。
両方とも使っていくことにはなりそうですが、できればUnityを使いたいし使ってほしいですな。

脚注
  1. インカメラやスピーカーがあるディスプレイ上部の切り欠き ↩︎

  2. UE5がまだプレビュー版なのでこのあと修正される可能性もあるのかもしれません。 ↩︎

Discussion