公開日：2017年11月13日
使用Unity Version：2017.2.0f3
Unityでスマホ向けアプリを作成したとき、画面の調整の仕方がよくわからず四苦八苦したので、その時に理解した範囲を備忘録もかねて記述します。
1. 画面の構成
本投稿で説明するアプリの画面は、カメラの表示とuGUI（Canvas）から構成されています。Canvasは画面の最前面に表示される領域です。
2. カメラの表示
カメラの表示は、画面にフルサイズで表示されます。そのため画面の縦幅、横幅、比率などによって表示される範囲が異なります。縦長（Portrait）表示、横長（Landscape）表示の両方に対応する場合、表示される範囲に気をつける必要があります。
「Camera → Inspector → Camera → Field of View」で表示範囲を調整できます。
「Camera → Inspector → Camera → Viewport Rect → X, Y ,W, H」 で画面の一部だけを使用するように調整できます。
カメラを複数使えば、アングルの異なる画面を同時に表示することも可能です。
3. Canvas
Canvasは、他のGameObjectと同じように、 Scene画面で編集できますが、スケールが遥かに巨大です。ですので、編集時に間違える事はないでしょう。
Canvasに配置するUI（Text, Button, Image, Scroll Viewなど）オブジェクトは、Anchorで表示動作の初期設定を行います。
- 右上から配置
- 横幅フルサイズ
- 底辺から配置、縦幅固定、横幅フルサイズ
など。なお、これらの設定は親のオブジェクトに対する動作になります。
Anchorを設定したら、右側の入力領域で調整が可能です。調整できる設定はAnchorごとに異なります。例えば、縦横フルサイズなら左右上下のオフセットなどが設定できます。
初期設定では、 Canvasの大きさは、ディスプレイサイズに依存します。例えば「Portrait 720 x 1280」と「Portrait 1080 x 1920」では、以下のようになります。
開発当初は、このまま UIを作成していたのですが、調整が難しすぎて挫折。 Unityには、ベースとなるサイズを指定すれば、ディスプレイサイズに合わせて拡大・縮小してくれる機能がありますので、それを利用することをお勧めします。指定は「Canvas → Canvas Scaler → UI Scale ModeとReference Resolution」で行います。
- UI Scale Modeを「Scale With Screen Size」
- Reference ResolutionのXに横幅、Yに縦幅
2017年11月現在の、主なスマホ端末のディスプレイサイズは「縦横比 16:9」なので、縦長のアプリの場合「X:720 Y:1280」もしくは「X:1080 Y:1920」をベースに作成すれば、対応できます。
ただ、機種によっては「縦横比 3:2」や「縦横比 18.5:9」などの変則的なディスプレイサイズもあります。これらにも対応する場合、「Canvas → Canvas Scaler → Screen Match Mode」を「Expand」に設定すれば調整しやすいです。
また、Unity上でアプリを再生しているときでも、ディスプレイサイズや各種GameObjectの設定は編集できるので、動作させながら調整することができます。
ただし！再生中に設定した値は、停止したら再生前の状態に戻ってしまうので、メモをお忘れなく！
Unityは、さまざまな画面表示機能を持っていますが、私が一つのアプリケーションを仕上げるまでに使用した機能は、上述した範囲です。
こまごまとした調整に使用した機能は、他にもありますが、アプリケーションごとに最適な画面表示は異なりますので、それらの機能に関しては、実際にアプリケーションを作成しながら学習していくことをお勧めします。