ゴイサギ日記

東京でエンジニアとして頑張って何とか生きてます。。ゆる~く更新していきます

【Unity】UI開発 Part 1 Canvasと描画順

あけましておめでとうございます。暫くぶりの更新です ^_^;
今回は、UnityのUI開発で個人的に面倒なところをまとめてみました。

Canvas

UnityのuGUIによるUI開発は全てこのCanvasコンポーネントが起点となります。このコンポーネント配下にUI要素をぶらさげる形になります。
f:id:aki517:20201208213513p:plain

Render Mode

Render Mode に応じてUIスクリーンに描画するか、3D空間に描画するかを設定できます。
f:id:aki517:20201208215434p:plain

Render Mode 概要
Screen Space - Overlay 画面に合わせて拡縮、カメラは参照せず常に最前面に表示、通常のUI作成はこれを使います。
Screen Space - Camera 指定したカメラを参照してその範囲に収まるUIを表示します。UIは常にカメラに向きます。Perspectiveビューも設定できるため3Dモデルを間に挟んだ表示ができます。キャラ選択画面でUI上に3Dキャラを表示する等で使います。
World Space 指定したカメラの3D空間にUIを表示します。3Dキャラの頭上にHPを表示等に使います。

解像度対応

モバイルなど端末によって解像度が異なる問題を解決する方法です。ここではアスペクト比を固定化する方法です。

  1. Canvas Scaler の設定を変更

    ・UI Scale Mode - Scale With Screen Size
    ・Reference Resolution - 基準解像度の半分 (1080 x 1920の場合、X:540 Y:960)
    ・Screen Match Mode - Expand
  2. Canvas配下にPanelを配置
  3. 追加したPanel に Aspect Ratio Filter コンポーネントを追加

    Aspect Mode - Fit In Parent
  4. クリップ処理が必要なら Panel に Maskコンポーネント を追加

    ・Show Mask Graphis - チェック外す

SafeArea対応

Unity2019.3以降であれば Device Simulator を使いエディタ上で大まかな判定が可能です。テラシュールさんの記事が綺麗にまとまってます。
【Unity】Device Simulatorでノッチとセーフエリアの対策 - テラシュールブログ

描画順

これはとても重要です。事前にUIデザイナーとエンジニアでルールを決めないと後で痛い目にあいます・・いやほんと・・(TAT)

Canvas内の描画順

Canvas内に限定した話であれば、Hierarchyビューの並びで描画順が決まります。

複数Canvas間の描画順

Screen Space - Overlay と Screen Space - Camera / World Space で設定が異なります。

Screen Space - Overlay
・常に Screen Space - Camera と World Space のUIよりも手前に描画
Sort Order で描画順を制御

Screen Space - Camera / World Space
カメラDepth > Sorting Layer > Order In Layer の順で奥から手前に描画

こちらのサイトがとても綺麗にまとまっています。
uGUI 描画優先度のチートシート │ Aiming 開発者ブログ

UIにパーティクルを差し込む

UI(奥) - Particle - UI(手前) で表示したい場合、Sorting Layer が同じ値なら Order In Layer で調整が手っ取り早いです。

ただし、UI要素の Sorting Layer と Order In Layer はCanvasでの設定値になるため
手前に表示するUI要素は Canvasの子にして Order In Layer を変更する必要があります。

f:id:aki517:20201218234449g:plain

また、Canvasが増えるとその分だけ SetPass が呼ばれパフォーマンスに影響するので、この辺はゲーム仕様に応じて適切に使い分ける必要があります。

Image

f:id:aki517:20201220215348p:plain
画像やシンプルな矩形を表示するコンポーネントです。

テクスチャの設定

Imageに使用するテクスチャは Texture Type を Sprite (2D and UI) に設定します。

Image Type

ImageType 表示
Simple 最もシンプルな表示です。拡大縮小すると画像全体を引き伸ばします。
Sliced 拡大縮小時にBorder(境界)部分の大きさは固定したままで、中心部分だけ引き伸ばします。
Tiled Borderの制御はSlicedと同じですが、中心部分が繰り返し表示になります。
Filled Fill Methodで指定した方式で表示領域を変更します。

Border 設定方法

Sliced, Tiled を使う場合は Sprite Editor で Border の設定が必要です。
1. 対象テクスチャのInSpectorビューから「Sprite Editor」を選択

2. Sprite Editor ウインドウ左上のプルダウンから「Custom Outline」を選択

3. Border の値を入力して右上の「Apply」をクリックで完了

RawImage

f:id:aki517:20201220215334p:plain
Image同様に画像を表示するコンポーネントです。
Imageと違い、Texture Type に依存しないので
・ネットワーク経由でダウンロードした画像
・ゲーム内の3Dモデルをテクスチャ
等に使用できます。

UV Rect

こちらのプロパティを編集することで UV ScrollやTilingを設定できます。

まとめ

Canvasとそれに紐づく解像度対応や描画順、最後に簡単に画像表示できる Image・RawImage について書きました。これだけでもかなりの量になりました。。本当はテキスト、アニメーション、パフォーマンスと書きたい事は沢山ありますが今回はこの辺で ^_^;

参考

https://learning.unity3d.jp/tag/ui/
Unityでパフォーマンスの良いUIを作る為のTips
Unity Live Help home | Lessons