はじめに
まだまだ Unity 初心者ですが今回はスマホアプリにボタンやテキストを表示するときのレイアウトについてです。
なにも考えずにパーツを配置すると端末サイズによっては枠外に表示されたり、SafeArea と重なってしまいます。
本記事では下記のような表示ができることを目指します。
iPhone 12 Pro Max
| 縦 | 横 |
|---|---|
 |
 |
Pixel 4a
| 縦 | 横 |
|---|---|
 |
 |
Canvas
Button などの UI パーツを配置する場合は親要素に必ず Canvas を配置する必要があります。
Canvas には下記のように色々設定がありますがとりあえず Render Mode と Canvas Scaler だけおさえておけばいいでしょう。
Render Mode
Render Mode は Screen Space と World Space のどちらに描画するかを設定します。モードは下記３つ。
- Screen Space - Overlay
スクリーンに直接描画される。 - Screen Space - Camera
指定されたカメラの前に一定の距離を置いて描画される。 - World Space
他のオブジェクトと同じ空間に描画される。
デフォでは Screen Space - Overlay が設定されており今回はこいつを設定します。
Canvas Scaler
UI Scale Mode
Canvas の UI 要素をどのようにスケーリングするかを決定します。下記の３つ。
- Constant Pixcel Size
画面サイズに関係なく、UI 要素がピクセル単位で同じサイズを保持する。 - Scale With Screen Size
画面が大きくなるほど、UI 要素が大きくなる。 - Constant Physical Size
画面サイズや解像度に関係なく、UI 要素が同じ物理サイズを保持する。
とりあえず Scale With Screen Size にしておきます。Scale With Screen Size に設定すると下記の設定項目が表示されます。
Reference Resolution
基準となる解像度です。画面の解像度が大きい場合は UI が拡大され、小さい場合は UI が縮小されます。
Screen Match Mode
現在の解像度のアスペクト比が参照解像度に合わない場合、キャンバス領域を拡大縮小するために使用される設定です。
- Match Width or Height
幅か高さを基準にして拡大縮小する。 - Expand
Canvas のサイズが基準値よりも小さくなることはない。 - Shrink
Canvas のサイズが基準値よりも大きくなることはない。
とりあえず Expand にしておきます。
Reference Pixels Per Unit
Sprite にこの「Pixels Per Unit」設定がある場合、Sprite の１つのピクセルが UI の１つのユニットに相当する（Sprite ってなんだ？？？）。
まとめ
とりあえず Canvas の設定は下記にしておく。
- Render Mode
Screen Space - Overlay - UI Scale Mode
Scale With Screen Size - Reference Resolution
X: 720, Y: 1280（9 : 16） - Screen Match Mode
Expand - Reference Pixels Per Unit
100（わからないのでとりあえずデフォのまま）
UIパーツの配置
続いて UI パーツの配置についてです。UI パーツの位置は下記のように Rect Transform で設定します。
座標系は親要素からの位置で左下が原点（0, 0）になります。
Anchors
Anchors は親要素のどこを基準点とするかです。例えば Min（0.5, 0.5）、Max（0.5, 0.5）に設定すると親の中心点が（0, 0）になります（具体例は後述）。
Min と Max の値が異なる場合は下記のように PosX, PosY, Width, Height が Left, Top, Right, Bottom に変わります（具体例は後述）。
Pivot
Pivot は自分自身のどこを基準点とするかです。例えば（0.5, 0.5）に設定すると中心点が基準になります（具体例は後述）。
具体例
Anchors と Pivot は文字の説明だけだとわかりにくいので具体例を表示します。
例えばボタンを配置して PosX, PosY を (0, 0)、 Anchors と Pivot をすべて 0.5 に設定します。
こんな感じにボタンは親要素の中心に表示されます。
PosX, PosY を (0, 0)、 Anchors すべて 0.5、Pivot を（0, 1）に変更すると下記のようにボタンの右上が親要素の中心に合うように表示されます。
PosX, PosY を (0, 0)、 Anchors を Min（0, 1）、Max（0, 1）、Pivot を（0, 1）に変更すると下記のようにボタンの右上が親要素の右上に合うように表示されます。
Anchors を Min（0, 0）、Max（0.5, 0.5）、Left, Top, Right, Bottom をすべて 0、 に変更すると下記のようにボタンの左側がが親要素の左、ボタンの右側が親要素の中心、ボタンの下側が親要素の下、ボタンの上側が親要素の中心に合うように表示されます。
Pivot はこの場合関係ないのかも？（何設定しても変わりませんでした）
SafeArea対応
続いて SafeArea 対応についです。下記のように四隅と中心にボタンを配置します。
これを iPhone 12 Pro Max で確認してみると下記のように SafeArea にかぶってしまいます。。。
| 縦 | 横 |
|---|---|
 |
 |
下記を参考に Panel を Canvas との間に挿入して下記 Script を設定します。
現代のモバイルゲーム開発者が向き合うべき ディスプレイ事情と、その対応方法
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
using System.Collections.Generic; using UnityEngine; public class SafeAreaAdjuster : MonoBehaviour { RectTransform _panel; Rect _lastSafeArea = new Rect(0, 0, 0, 0); void Awake() { _panel = GetComponent<RectTransform>(); UpdateSafeArea(); } void Update() { UpdateSafeArea(); } void UpdateSafeArea() { Rect safeArea = Screen.safeArea; if (safeArea == _lastSafeArea) { return; } _lastSafeArea = safeArea; Vector2 anchorMin = safeArea.position; Vector2 anchorMax = safeArea.position + safeArea.size; anchorMin.x /= Screen.width; anchorMin.y /= Screen.height; anchorMax.x /= Screen.width; anchorMax.y /= Screen.height; _panel.anchorMin = anchorMin; _panel.anchorMax = anchorMax; } } |
実行するとこんな感じ。
| 縦 | 横 |
|---|---|
|
|
おわりに
とりあえずこれでそれっぽいレイアウトを組めるようになりました。
Unity さわり始めたばかりなので何か間違いなどあればご指摘いただけると幸いです。
今はこの本をちょこちょこ読みながら手探り中です。
 |
ステップアップUnity──プロが教える現場の教科書 WEB DB PRESS plus 新品価格 |
参考
- Unity マニュアル - キャンバス
- Unity マニュアル - Canvas Scaler
- Unity マニュアル - 基本的なレイアウト
- 現代のモバイルゲーム開発者が向き合うべき ディスプレイ事情と、その対応方法
コメント