画面表示

公開日: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」で行います。

  1. UI Scale Modeを「Scale With Screen Size」
  2. 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は、さまざまな画面表示機能を持っていますが、私が一つのアプリケーションを仕上げるまでに使用した機能は、上述した範囲です。

こまごまとした調整に使用した機能は、他にもありますが、アプリケーションごとに最適な画面表示は異なりますので、それらの機能に関しては、実際にアプリケーションを作成しながら学習していくことをお勧めします。


次の投稿

Scroll View

コメントを残す

メールアドレスが公開されることはありません。