Edited at

iPhone X で uGUI がはみ出さない簡単な方法

More than 1 year has passed since last update.

ヴァル研究所 Advent Calendar 2017の16日目はUnityに関する記事です。


はじめに

この記事ではiPhone Xの セーフエリア とかどうでもいいからとにかく簡単にuGUIを表示させる目的で対処しています。

また、利用したUnityは 2017.1.2f1 です。

最新のUnityではこんな対処いらないかもしれません。


iPhone Xの違いって何?

特に大きな違いは画面ですよね。

iPhone 8 であれば 1334×750px16:9iPhone 8 Plus1920×1080px なので、 16:9 です。

また、少し前の iPhone 4S だと 3:2 ですが、 16:9 前提で開発している人も少なくないと思います。

しかし、 iPhone X は衝撃の 2436x1125px19.5:9 となります。

iPadも 4:3 だし、今までになかったアスペクト比です。

もう、画面の端が丸いとか、それ以前に困ったことが起こります。


uGUIがはみ出ちゃう

こんな感じでピッタリに配置していることってよくありますよね。

image.png

この仕組は簡単で、 UI Scale ModeScale With Screen Size にして16:9となる解像度を Reference Resolution に設定すればピッタリ合います。

image.png

・・・そう、iPhone 8までは。

このままiPhone Xで動かすと、当然上下がはみ出します。

image.png

image.png

まあ、これは Screen Match ModeExpand にするだけでアスペクト比を固定したまま表示になるので、簡単にUIが表示されるようになります。

image.png

でも、左右に何か青いものが!

image.png

しかも、本来画面外に出るはずのテキストも表示されるようになります。

image.png


uGUIではみ出た部分をマスクする

やはりはみ出した部分はカットしたいですよね。

これも簡単です。

こういうときには Rect Mask 2D がとても便利です。


※よくあるミス

Canvasに Rect Mask 2D を追加しても何も変わりません。

image.png


回避方法

Canvasの下に空のゲームオブジェクトを作成してそこに Rect Mask 2D を追加します。

ついでにCanvas直下の要素をすべてRect Mask 2Dの子要素に移動させます。

image.png

また、WidthHeight にCanvasの Scale With Screen Size で指定した値を入れておきます。

PosやScaleなど、その他は全てデフォルト設定でOKです。

image.png

これで、ちゃんと隠れるようになります。

image.png


左右の青い部分

あとは、左右の青色ですが、これはMain Cameraの Background ですので、普通に #00000000 を指定すれば黒くなります。

image.png


出来上がった画面

こんな感じではみ出すこともなく、画面に収まりました。

image.png

ついでにiPhone Xの画面設定も追加しておきましょう。

image.png


まとめ

これで、

エライ人 「iPhone Xで動くの?」

開発者 「えっ、まだiPhone X手に入れてないんですけど」

エライ人 「いや、あの角丸とか対応しなくていいから。とりあえず枠アリでいいから」

開発者 「あー、それなら、既存のアプリは枠アリで表示されるという噂ですから大丈夫ですよ」

エライ人 「じゃあ、やってみよう。ここにiPhone Xあるから」

開発者 「Xcode 9でビルドして転送」

事故る

ってことがなくなります。