目次に戻る
UI Layout 調整
スマフォ向けのゲームを作る上で必須の異なる画面サイズでのUI Layout 調整方法について調べる。
スマフォの画サイズ
まずは、最近のスマフォの画サイズにどんなものがあるのかを把握するところから始める。ちょうどいいサイトがあったのでそこから代表的なものを抜粋すると下表のようになっている。ひと昔前は、FHD（1080 x 1920）が主流だったが、最近はより縦長なアスペクトが主流になっているみたい。
|
機種 |
幅 |
高さ |
|
|
iPhone8 |
1080 |
1920 |
9:16 |
|
iPhone15 Pro Max |
1290 |
2796 |
9:19 |
|
iPad 9th |
1620 |
2160 |
3:4 |
|
Pixel7 |
1080 |
2400 |
9:20 |
|
Galaxy S22 Ultra |
1440 |
3088 |
9:19 |
UI Layout の調整を考える上で重要なのは、画素数ではなくてアスペクト比の方なので、上表からおおよそ3:4 ～ 9:20 くらいまでの間のアスペクト比で破綻なくUI が表示できるように調整できればよいことがわかる。（縦レイアウトのみをサポートする場合）
Canvas Scalerによるレイアウト調整
Unity では、異なる画サイズの画面にレイアウトが自動調整できるような、いろいろな仕組み（コンポーネント）が存在する。まずは、その中でも基本となりそうなCanvas Scaler について調べる。Canvas Scaler は、Canvas オブジェクトにデフォルトでアタッチされているスケーリングコンポーネントである。全てのUI オブジェクトは、Canvas オブジェクトの子要素として構成されるので、親であるCanvas オブジェクトのスケーリングができれば、子要素もそれに従って自動で調整されることになる。
- UI Scale Mode
Canvas Scaler には、どのような基準でスケーリングを行うかを決める"UI Scale Mode" というパラメータがあり、スケーリング方法には以下の3つが存在する。
1. Constant Pixcel Size モード
"Scale Factor" で設定した倍率で、レイアウト時のアスペクト比は保ったまま、スケーリングを行って表示するモード。画面サイズによらず、一定のスケーリングが適用される。例として512x512px のUI Image オブジェクトを縦6個、横3個に並べて、ゲームビューの画サイズを変更して表示させた場合の結果を下図に示す。
Constant Pixel Size モードは単純にどの画面サイズでも同率のスケーリングが適用されるので、1290 x 2796 画面サイズでは、縦に約5.5個、横に約2.5個が表示さるが、それを1080 x 1920 画面サイズのゲームビューで表示すると、縦に約3.8個、横に約2.1個が表示される。単純ではあるが、このスケールモードでは基準とした画サイズより小さな画面サイズで表示した場合は、UIオブジェクトが表示しきれないことがあるため、これだけでは使い物にならない。スクリプト上から画サイズを取得して、それによって"Scale Factor"を動的に変更するということで調整できなくもないが、それではCanvas Scaler を使う意味があまりない。
2. Scale With Screen Size モード
"Reference Resolution" で設定された画サイズを基準にスケーリングを行うモード。
- Screen Match Mode : Match Width Or Height
"Screen Match Mode" が "Match Width Or Height" の場合、"Reference Resolution" の幅か高さか（又はその比率か）のどれかを基準にしてスケーリングすることができる。どれを基準にするかは、"Match" バーで設定する。
"Match" バーを0（一番左)位置に設定すると "Reference Resolution" の"幅を基準"にスケーリングが行われる。"幅が基準"とは、"Reference Resolution" の画面サイズで、表示できているUI オブジェクトの"水平方向"が、どの画面サイズに変更して表示されることを保証してくれるようにスケーリングされることを意味している。
Constant Pixel Size モードの時と同様に1290 x 2796 画面サイズに、512x512px のUI Image オブジェクトを縦6個、横3個に並べ、Scale with Screen Size モードでスケールさせたときの結果を上図に示した。 "Reference Resolution" は 1290 x 2796 で、"Match"バーを0（幅を基準）に設定している。
上図のように、ゲームビューの画面サイズを1080 x 1920 にしようと、1620 x 2160 にしようと、水平方向には、すべて約2.5個分のUI Imageが表示されていることがわかる。
一方、垂直方向も水平方向と同じ倍率でスケーリングされるため、UI Image オブジェクトのアスペクト比が崩れることはない（円の画像がつぶれるようなことはない）。その代わり、垂直方向は切れることになる。
例では、幅を基準にしたが、"Match"バーを1に設定すれば、"高さを基準"にすることができる。この場合は垂直方向は、"Reference Resolution" と同じ個数のUI Image オブジェクトが表示されることが保証され、その代わり水平方向の表示個数は変わる。
対象としているスマフォの画サイズが、9:19 (1290 x 2796)、9:16 (1080 x 1920)、3:4 (=9:12) (1620 x 2160) の場合、みな縦長のアスペクト比である。9:19 (1290 x 2796) が一番縦長なので、これを"Reference Resolution" にしてレイアウトを決定し、"Match" を 1（高さを基準）にすれば、下図のように9:16 画面でも 3:4 画面でもUI Imageが切れることなく表示できるようになることがわかる。（その代わりに水平方向には余白ができるが、これはAnchorの設定で調整するようにする）。
- Screen Match Mode : Expand
"Expand"モードでは、"Reference Resolution" が縦長画サイズの場合は、高さを基準にスケーリングし、"Reference Resolution" が横長サイズの場合は、幅を基準にスケーリングする。（"Match Width Or Height" でも同様のことが設定で可能なため、このモードを使う理由はあまりなし？と思われる）
- Screen Match Mode : Shrink
"Shrink"モードは、Expand と逆で"Reference Resolution" が縦長画サイズの場合は、幅を基準にスケーリングし、"Reference Resolution" が横長サイズの場合は、高さを基準にスケーリングするモードである。（"Match Width Or Height" でも同様のことが設定で可能なため、使う理由はあまりなし？と思われる）
3. Constant Physical Size Mode
（よくわからい、、、）
以上から、縦長画面前提で、UI Layout を考える場合は、最も縦長のアスペクト比の画面でレイアウト設計を行い、Canvas Scaler コンポーネントによるスケーリングは、Scale With Screen Size で、Match Width Or Height を"高さ基準"で適用すればよいことがわかった。
Anchorによるレイアウト
Canvas Scaler によるレイアウト調整では、基準レイアウト画サイズとは異なる画サイズで表示したときの表示切れ問題は解決できるが、水平方向の位置調整の問題が残る。下図のように基準の画サイズとは異なるアスペクト比の画面サイズで表示すると、不自然な余白が残ってしまう。
そこで重要になるのがAnchor という機能である。Anchor の詳細は、マニュアルに詳しく記載されているので、基本的な部分はそちらを参照。
まずは、UI Image オブジェクトを4つ画面中央に整列させたレイアウトを準備して、それぞれAnchor の設定を変えて、画サイズ（アスペクト比）を変更した結果が下記。
Canvas Scaler は、Scale With Screen Size で、Match Width Or Height を"高さ基準"にしている。
- 固定Anchor
固定Anchor は、親オブジェクトの特定の一点をAnchor（基準）に指定してレイアウト位置を決定する方法である。UI オブジェクトの"Rect Transform" の"Anchors" 設定にある"Min" と "Max" が同一の値の場合、Anchor は特定の一点を示すようになる。上図の例では、親オブジェクトの左上頂点の一点を基準にしている。Anchor 位置からの距離でレイアウトされるため、画サイズ（アスペクト比）が変わったとしても、変更前と変わらない位置にレイアウトされる。アスペクト比がより横長になった場合には、上図のように右側に変な余白の偏りができてしまうことになる。
- Custom Anchor（+ Preserve Aspect）
カスタムAnchor は、Anchor の"Min" と"Max" に"0", "1" 以外の値を設定する方法である。特に"Min" と"Max" にそれぞれ異なる値を設定すると、親オブジェクトの特定の二点をAnchor（基準）に指定してレイアウト位置とサイズを決定することができる。固定Anchor との違いはAnchor が2点になるため、位置だけでなくサイズにも影響を与えることができる点である。上図の例では、Anchor の"Min" と"Max" のY座標は同一だが、X座標が異なっている。この場合、例えば画サイズが変更されてオリジナルよりもアスペクトが横長になった場合は、"Min" と"Max" のX座標で指定した比率に従ってUI オブジェクトの位置だけでなく、水平方向の長さも引き伸ばされることになる。
これでアスペクト比が変更になった場合にも、余白の偏りをなくすことができるが、今度はUI オブジェクト自体のアスペクト比も変更されてしまう状態となる。もし、UI オブジェクトのアスペクト比がデザイン上それほど重要でない場合はそれでもよいが、9パッチ以外の特定のアスペクト比でデザインされた画像を使う場合は困る。そこで利用できるのが"Preserve Aspect" というオプション機能である。
"Preserve Aspect" 設定は、UI Image コンポーネントにある設定で、"Source Image" に設定されているスプライト（テクスチャ）のオリジナルのアスペクト比を保って拡縮するオプション設定である。
"Preserve Aspect" をONにしている場合、たとえUI オブジェクト自体のアスペクト比が変わったとしても、下図のように"Source Image" のアスペクトを保って中心位置に表示することができる。
Anchor で指定した開始位置と実際のImage の表示位置は多少ズレることになるが、これで余白の偏りをなくし、かつ、アスペクトを綺麗に保って表示することができる。
- Stretch Anchor（+ Horizotal Layout Group）
Stretch Anchor は、Anchor の"Min" と"Max" のX 座標、又はY 座標、又は両方が、"Min" は"0" に"Max" は "1" に設定されているAnchor のことである。
考え方は、Custom Anchor と変わりはないが、Horizontal Layout Group コンポーネントと合わせて使用することで、Custom Anchor の説明で示したやり方とは別の方法でLayout の調整を行うことができる。
例として、Horizontal Layout Group コンポーネントをアタッチしたPanel UI オブジェクトと、その子オブジェクトとしてImage UI オブジェクトを配置した場合で説明する。
Horizontal Layout Group コンポーネントは、子オブジェクトを水平方向に均等に整列させるLayout コンポーネントである。"Padding" を設定することで、上下左右に余白を作ることができる。
上図の例では、Horizontal Layout Group コンポーネントがアタッチされている親オブジェクト（Panel UI）のAnchor を水平方向のStretch Anchor に設定し、画サイズ一杯に広がるようにしている。"Padding" は左右に93 pixel 取り、その中に子オブジェクトを整列するように配置した。
画サイズのアスペクトがより横長になった場合は、自動的に子オブジェクトが均等になるように再配置されることがわかる。
目次に戻る
