unityでいってみよう!

unityがチョットワカル位の人のブログ

セーフエリアとカットアウトについて解説してみよう!

概要

iPhoneX以降ディスプレイ内に内蔵カメラ等が組み込まれたことにより、画面上に表示されない領域(いわゆるノッチ)というものが現れました。一方、Androidプラットフォームでもノッチが組み込まれたデバイスがリリースされるようになり、Androidではノッチをカットアウトと呼んでいます。 公式ドキュメントによると、カットアウトに公式に対応しているデバイスAndroid 9(APIレベル28)、Android8.1以前でも一部のデバイスメーカーでは独自にサポートしているものもあるようです。 また、カットアウトのレイアウトはメーカーが好き勝手に決めてよいわけではなく、下記のルールがに関する記載があります。

  • 1 つの辺に最大で 1 つのカットアウトを含めることができる。
  • バイスに 3 つ以上のカットアウトを含めることはできない。
  • バイスの長辺にカットアウトを含めることはできない。
  • 特別なフラグが設定されていない縦向き表示の場合、ステータスバーを少なくともカットアウトの高さまで拡張する必要がある。
  • 全画面表示または横向き表示の場合、デフォルトでカットアウト領域全体をレターボックス表示する必要がある。

Unityのノッチ対応

このノッチ(カットアウト)に対応する為にUnityではスクリプトリファレンスを見るとUnity2017.2からsafeAreaに、Unity2019.4からcutoutsというプロパティをScreenクラスへ追加し対応を行っています。

セーフエリアとカットアウトの違い

セーフエリアは画面からノッチ部分を含まない矩形領域を指していますが、カットアウトはノッチ部分の矩形領域を指しています。 また、カットアウトは一つとは限らず、Androidでは最大3個の定義が可能です。(その為、cutoutsプロパティは配列になっています)

この違いをビジュアルで説明する為にサンプルプロジェクトGithub上で公開しています。

下記の画像の青の部分がセーフエリア、緑の部分がカットアウトを視覚化した矩形領域です。 セーフエリアのみに描画するよりも、カットアウトを避けるようにレイアウトした方がより画面が広く使えることが分かります。

https://user-images.githubusercontent.com/29646672/214475190-42213393-ae81-44a4-b66a-6c94c5d086b7.png

また、最近のスマートフォンの画面の4隅は丸くなっていますが、Android端末ではその部分はセーフエリアに含まれてしまっており、カットアウトの対象にも含まれていない為、描画が欠けてしまう可能性があることに注意が必要です。

iOSとカットアウト

iPhone11ではカットアウトが確認できますがiPhone14ではカットアウトが確認出来ませんでした。 また、Androidと異なりiOSでは画面の四隅のラウンド部分が含まれないようにセーフエリアが設けられているという部分の違いもあります。

[

iPhone11実機での結果

シュミレーターでの実行結果
その答えはUnityが出力するxcodeのプロジェクトに含まれているUnityView.mmで定義されているGetCutoutToScreenRatioにあります。

Apple does not provide the cutout width and height in points/pixels. They *do* however list the size of the cutout and screen in mm for accessory makers. We can use this information to calculate the percentage of the screen is cutout.
This information can be found here - https://developer.apple.com/accessories/Accessory-Design-Guidelines.pdf

iOSにはカットアウトを取得する為のAPIが用意されていない為、Unityはアクセサリーデザインドキュメントを見て値を設定しているようです。この関数内を見る限り、Unity2021.3.13f1ではiPhone14用の係数が定義されていません。 新しいiPhoneがリリースされたら、それに対応したUnityへバージョンアップするか、上記デザインドキュメントを見ながらこの関数を修正する必要があります。(なんてこった!)

まとめ

  • Android 9以上であればセーフエリア、カットアウト共に取得可能
  • iOSではセーフエリア・カットアウト共に取得可能であるが、カットアウトに関しては新しめの機種はUnity側が対応していない可能性がある
  • ディスプレイの四隅が丸みを帯びている場合、Androidはセーフエリアに4隅が含まれている為、描画されない領域がでてしまう可能性があるが、iOSではセーフエリアに4隅が含まれないようなマージンが設定されている

Canvasにセーフエリアを設定する術は下記が分かり易そうです。 tsubakit1.hateblo.jp

参考資料

developer.apple.com

以上