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 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でも他のアップデートがあるようです。