Unityでのスマホ用UIレイアウト入門

botman_orange Unity

UnityHub-2.4.3 Unity-2020.3.6f1 macOS-11.2.1

はじめに

まだまだ Unity 初心者ですが今回はスマホアプリにボタンやテキストを表示するときのレイアウトについてです。

なにも考えずにパーツを配置すると端末サイズによっては枠外に表示されたり、SafeArea と重なってしまいます。

本記事では下記のような表示ができることを目指します。

iPhone 12 Pro Max

after_p after_l

Pixel 4a

p_p p_l

Canvas

Button などの UI パーツを配置する場合は親要素に必ず Canvas を配置する必要があります。
Canvas には下記のように色々設定がありますがとりあえず Render Mode と Canvas Scaler だけおさえておけばいいでしょう。

inspector

Render Mode

Render Mode は Screen Space と World Space のどちらに描画するかを設定します。モードは下記3つ。

  • Screen Space - Overlay
    スクリーンに直接描画される。
  • Screen Space - Camera
    指定されたカメラの前に一定の距離を置いて描画される。
  • World Space
    他のオブジェクトと同じ空間に描画される。

デフォでは Screen Space - Overlay が設定されており今回はこいつを設定します。

Canvas Scaler

UI Scale Mode

Canvas の UI 要素をどのようにスケーリングするかを決定します。下記の3つ。

  • Constant Pixcel Size
    画面サイズに関係なく、UI 要素がピクセル単位で同じサイズを保持する。
  • Scale With Screen Size
    画面が大きくなるほど、UI 要素が大きくなる。
  • Constant Physical Size
    画面サイズや解像度に関係なく、UI 要素が同じ物理サイズを保持する。

とりあえず Scale With Screen Size にしておきます。Scale With Screen Size に設定すると下記の設定項目が表示されます。

scaler

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 の1つのピクセルが UI の1つのユニットに相当する(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(わからないのでとりあえずデフォのまま)

canvas

UIパーツの配置

続いて UI パーツの配置についてです。UI パーツの位置は下記のように Rect Transform で設定します。

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 に変わります(具体例は後述)。

left

Pivot

Pivot は自分自身のどこを基準点とするかです。例えば(0.5, 0.5)に設定すると中心点が基準になります(具体例は後述)。

具体例

Anchors と Pivot は文字の説明だけだとわかりにくいので具体例を表示します。

例えばボタンを配置して PosX, PosY を (0, 0)、 Anchors と Pivot をすべて 0.5 に設定します。

anchors

こんな感じにボタンは親要素の中心に表示されます。

pivot1

PosX, PosY を (0, 0)、 Anchors すべて 0.5、Pivot を(0, 1)に変更すると下記のようにボタンの右上が親要素の中心に合うように表示されます。

pivot2

PosX, PosY を (0, 0)、 Anchors を Min(0, 1)、Max(0, 1)、Pivot を(0, 1)に変更すると下記のようにボタンの右上が親要素の右上に合うように表示されます。

pivot3

Anchors を Min(0, 0)、Max(0.5, 0.5)、Left, Top, Right, Bottom をすべて 0、 に変更すると下記のようにボタンの左側がが親要素の左、ボタンの右側が親要素の中心、ボタンの下側が親要素の下、ボタンの上側が親要素の中心に合うように表示されます。

pivot4

Pivot はこの場合関係ないのかも?(何設定しても変わりませんでした)

SafeArea対応

続いて SafeArea 対応についです。下記のように四隅と中心にボタンを配置します。

safe0

これを iPhone 12 Pro Max で確認してみると下記のように SafeArea にかぶってしまいます。。。

before_p before_l

下記を参考に Panel を Canvas との間に挿入して下記 Script を設定します。
現代のモバイルゲーム開発者が向き合うべき ディスプレイ事情と、その対応方法

safe_1
safe_2

実行するとこんな感じ。

after_p after_l

おわりに

とりあえずこれでそれっぽいレイアウトを組めるようになりました。

Unity さわり始めたばかりなので何か間違いなどあればご指摘いただけると幸いです。

今はこの本をちょこちょこ読みながら手探り中です。

ステップアップUnity──プロが教える現場の教科書 WEB DB PRESS plus

新品価格
¥2,948から
(2021/5/3 20:11時点)

参考

コメント

タイトルとURLをコピーしました