執筆バージョン: Unreal Engine 5.1
|
SafeZoneとは
iPhoneX のノッチやホーム バーの下のような、「技術的に UI 上で使用できても、画面上には表示されない」といったことを防ぐ
ためのものです(公式ドキュメントより引用)
https://docs.unrealengine.com/5.1/ja/umg-safe-zones-in-unreal-engine/
下記のような部分にUIが隠れることを防ぐことができます
![](https://historia.co.jp/wp/wp-content/uploads/2023/05/IMG_4452-1-scaled-e1683876657156-928x1024.jpg)
エディタでの確認方法
UMGメニュー上のScreenSizeからノッチが存在する端末を選択
![](https://historia.co.jp/wp/wp-content/uploads/2023/05/19b9f4ba245fc61964c18549d773cef0-1024x627.png)
Editor Preferences -> Level Editor -> Play -> Game Viewport Settings -> New Viewport Resolution からノッチが存在する端末を選択し、New Editor Windowで再生![](https://historia.co.jp/wp/wp-content/uploads/2023/05/878eb947eeaeabfc7d45c2ec8f1b0482-1024x547.png)
WBPでの設定方法
SafeZone直下のWidgetにスケーリングが適応されます
また、直下に配置できるWidgetは1つのみです
SafeZone直下Widgetの Slot -> Safe Area Scaleから、上下左右の任意の方向のみに設定することも可能です
![](https://historia.co.jp/wp/wp-content/uploads/2023/05/7f04e5d38b003148dfad74db67ee46f1-1024x524.png)
Get Safe Zone Paddingを使用することによって、ノッチのサイズを取得することが可能です
![](https://historia.co.jp/wp/wp-content/uploads/2023/04/d667f17ec29833cfb5bccb070ea199d2.png)
iPhone12でのスクリーンショット
黄がSafeZone内のWidgetが設置できるエリアです
![](https://historia.co.jp/wp/wp-content/uploads/2023/05/2d1f49beaaa34e58cac23680ed609e99-1024x528.png)
![](https://historia.co.jp/wp/wp-content/uploads/2023/05/0cd864550951e7111ba9ae1c4ab7c82a-473x1024.png)
青がGet Safe Zone PaddingのSafe Paddingで取得されたサイズです
ただし、SafeZoneで防がれるサイズそのものが取得できるわけではないので注意が必要です
ヘッダーやフッターを作成したい場合はこちらが使いやすいかと思います
![](https://historia.co.jp/wp/wp-content/uploads/2023/05/f6181c8f8c6a56b104df873db0dd50c5-1024x264.png)
![](https://historia.co.jp/wp/wp-content/uploads/2023/05/5c4d0a84b1a861b2da148f0405d84a4c-473x1024.png)
実機で見るとこんな感じ
![](https://historia.co.jp/wp/wp-content/uploads/2023/05/IMG_4452-scaled-e1683876706851-928x1024.jpg)
赤がSafeZone外のエリアです
![](https://historia.co.jp/wp/wp-content/uploads/2023/05/8573e8996cd2d1d57663c8b10ed9a8a2-473x1024.png)
SafeZoneに対してGet Desired Sizeを使うと、SafeZone外のサイズが取得できます
SafeZoneを2つ生成し、差分を取得することで上下のSafeZone外の正確なサイズが取得可能です(かなり力業です)
![](https://historia.co.jp/wp/wp-content/uploads/2023/05/b2cb74dc980c7e10c6a1a46ae40ec804-1024x445.png)
![](https://historia.co.jp/wp/wp-content/uploads/2023/05/9ae014ef83e6bda8447fdfd0c3af792c-1024x493.png)
実機対応にお役立てください