Unity 6.6（uGUI 2.6）にて、uGUIに SafeArea コンポーネントが追加されます。従来は独自スクリプトで実装されることが多かったセーフエリア対応が、公式コンポーネントで完結します。

Unity 6.6 および uGUI 2.6は、本投稿執筆時ベータ5段階です。正式リリース時に仕様が変わる可能性があります。

セーフエリア（Safe Area）とは？

モバイル端末などのディスプレイにおいて、ノッチ（切り欠き）、カメラホール、画面の角丸、システムジェスチャーバーなどに干渉されず、UIを安全に表示・操作できる領域のことです。

Unity 6.6（uGUI 2.6）で追加されるSafeAreaコンポーネント

Unity 6.6（uGUI 2.6）でUnity 公式の SafeArea コンポーネントが追加されます。

該当リリースノートはこちら。

New SafeArea component that insets a RectTransform to respect the device's safe area. Supports per-edge control over which sides are inset, a configurable reference orientation so that edge assignments remain stable across device rotations, and a balance mode that symmetrically mirrors the inset on the opposite edge to keep the UI centered.

uGUI 2.6 Changelogより

クラスリファレンスはこちら。：「 uGUI 2.6 Manual - Safe Area」

SafeAreaコンポーネントについて

SafeArea は Screen.safeArea の値を利用しています。

次にUI要素の構造例を示します。

Canvas
 ├─ SafeAreaRoot (RectTransform + SafeArea)
 │   ├─ TopBar
 │   ├─ HUD
 │   └─ Buttons
 └─ Background

たとえば、背景画像などのデザイン要素は画面全体に広げつつ、操作用UIのみをセーフエリア内に収めるということが可能です。

SafeAreaRoot: SafeArea コンポーネントを配置し、必須 UI 群を子要素としてまとめます
Background: 画面全体に広げたい背景等は SafeAreaRoot の外（Canvas 直下）に配置します

主な設定項目・機能は次の通りです。

Reference Orientation: 基準とする画面の向き（Portrait / Landscape など）を設定します。端末回転時には実行時に各 Edge の適用方向が動的に再マッピングされます。
Edges: 上下左右（Top / Right / Bottom / Left）のうち、インセットを適用したい端を個別選択できます。
Alignment: ノッチが片側にしかない非対称な端末で、UIのセンタリングを維持する機能です。Center Horizontally や Center Vertically を有効にすると、大きい方のインセット値が反対側にも対称適用されます。

ひとこと

いろいろな人が自作していたセーフエリア対応のコンポーネント。

このタイミングでの追加に驚きましたが、嬉しいアップデートですね。

uGUIはUnity 6.5でもアップデートがありましたし、Unity 6.6でも他のアップデートがあるようです。

参考・関連