1
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

Unity 6.6(uGUI 2.6)でSafeAreaコンポーネントが追加される

1
Posted at

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コンポーネントについて

SafeAreaScreen.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 HorizontallyCenter Vertically を有効にすると、大きい方のインセット値が反対側にも対称適用されます。

ひとこと

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

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

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

参考・関連

1
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?