ひとりでのアプリ開発 - fineの備忘録 -

ひとりでアプリ開発をするなかで起こったことや学んだことを書き溜めていきます

20220329162023

Unity - UI:Canvas について -

初めに

 UI を配置、表示するために必要になる Canvas についてまとめます。

Canvas とは

 Canvas は UI を配置、表示するために必要になるオブジェクトです。Text や Image などすべての UI はCanvas コンポーネントがアタッチされたゲームオブジェクトの子でなければなりません。

docs.unity3d.com

Canvas オブジェクトについている3つのコンポーネント

 Canvas オブジェクトには次の3つのコンポーネントがついています。

Canvas コンポーネントの機能

docs.unity3d.com

Render Mode

 Render Mode ではどのように UI を表示するかを次の3つから決めることができます。

Screen Space - Overlay カメラに関係なく、スクリーンに直接描画する。(必ず UI が全面に表示される)
Screen Space - Camera Canvas は指定したカメラに描画される。カメラからの距離の前後関係によって、オブジェクトの前後が考慮される。また、UI のサイズは画面内に収まるように自動調整されるため、画面に表示される UI の大きさは変化しない。常にカメラの正面を向く。
World Space UI をシーン内の平面オブジェクトであるかのようにレンダリングする。カメラの正面を向く必要はなく好きな方向を向くことができる。

Pixel Perfect(Screen Space の場合のみ)

 精度維持のために UI をアンチエイリアス無しで描画するかどうかを選択できます。
 アンチエイリアスとは、境界にあるピクセルのカラーを平均化して(ぼかして)、デジタル画像の縁のギザギザを滑らかにするための処理のことです。
 true にするとアンチエイリアスを無しにします。
 処理が思いため、動く UI がある場合は false のほうがよいでしょう。

Sort Order(Screen Space - Overlay の場合のみ)

 Canvas が複数ある場合の優先度を表します。数値が大きいほど手前に表示されます。

Target Display(Screen Space - Overlay の場合のみ)

 描画対象の Display を指定することができます。Target Display は Camera ごとに指定できます。また Game ビューで各 Display をプレビューできます。

 Target Display を扱うのは、マルチディスプレイが必要な場合です。公式による説明のリンクを貼っておきます。

docs.unity3d.com

Render Camera(Screen Space - Camera の場合のみ)

 描画対象のカメラを指定することができます。

Plane Distance(Screen Space - Camera の場合のみ)

  
 カメラからの距離を整数値で設定できます。

Sorting Layer(Screen Space - Camera、World Space の場合のみ)

 Sorting Layer を設定できます。Sorting Layer では、複数のスプライトのレンダリングの順序を簡単に設定することができます。Sorting Layer の説明はこちらの記事でわかりやすくまとめてあります。

qiita.com

Order in Layer(Screen Space - Camera、World Space の場合のみ)

 同じSorting Layer内での数値による描画順を設定する場合に使用します。数値が大きいほど前に表示されます。

Additional Shader Channels

 Shader について私が使い方を理解していないため、参考になりそうなリンクを貼っておきます。Shader のセマンティクスに何を追加するか選択できるようです。

docs.unity3d.com

qiita.com

Canvas Scaler コンポーネントの機能

 CanvasScaler コンポーネントCanvas 内の UI 要素の全体的なスケールとピクセル密度を制御するために使用されます。このスケーリングはフォントのサイズと画像のボーダーを含め、Canvas のすべてに影響を与えます。

UI Scale Mode

 Canvas 内の UI 要素のサイズの設定を変更できます。

Constant Pixel Size UI 要素を画面サイズによらずピクセル単位で同様のサイズに保つ
Scale With Screen Size 画面サイズが大きいほどに、UI 要素を大きくする
Constant Physical Size UI 要素を画面サイズや解像度によらず、物理的に同様のサイズに保つ

〇 Constant Pixel Size の設定

Scale Factor この数値で Canvas 内のすべての UI 要素の大きさを決める
Reference Pixels Per Unit 1 ユニットに表示されるピクセル数を決める。(100 ならば 1 ユニットに対して100 ピクセル表示する)

〇 Scale With Screen Size の設定

Reference Resolution レイアウトの基準となる解像度
Screen Match Mode Rederence Resolutionとアスペクト比が違う場合の対処を設定する
 Match Width or Height UI 横幅か高さどちらを基準にGUIを拡大、縮小するか選べる(Match を 0 にすれば Width、1 にすれば Height を基準にする。中間の値を取ることも可能)
  Expand Reference Resolutionで設定した範囲がゲーム画面に入るように調整される
  Shrink ゲーム画面がReference Resolutionで設定した範囲の中に収まるように調整される
Reference Pixels Per Unit 1 ユニットに表示されるピクセル数を決める。(100 ならば 1 ユニットに対して100 ピクセル表示する)

 画面のサイズを Reference Resolution と同じになるように設定しておくとよいでしょう。

〇 Constant Physical Size の設定

Physical Unit 単位を決定する。(Millimeters: ミリメートル、Centimeters: センチメートル、Inches: インチ、Points: 1/72インチ、Picas: 1/6インチ)
Fallback Screen DPI 画面の DPI が不明な場合の DPI を設定する。
Default Sprite DPI Sprite の DPI を設定する。
Reference Pixels Per Unit 1 ユニットに表示されるピクセル数を決める。(100 ならば 1 ユニットに対して100 ピクセル表示する)

 DPI は "dots per inch" すなわち 1インチ中にどれだけドットを表示できるかを表します。

Graphic Raycaster コンポーネントの機能

 Canvas オブジェクトへの Raycast(レイキャスト)に用いられます。Graphic Raycaster は Canvas 上にあるボタン等のUIを監視し、どれにタッチされたかを判定しています。

 Raycast のレイは Ray(光線)のことで、指定した場所から透明な光線を打ち、光線に当たったオブジェクトの情報を取得する機能です。Grapchic Raycaster は Canvas 上の UI の前に Ray を遮るものがなければ、タッチされたことを判定できます。

Ignore Reversed Graphics false だとRaycaster のほうを向いていないオブジェクトの判定が取れる
Blocked Objects レイキャストをブロックするオブジェクトを選択する。(None : なし、Two D : 2D、Three D : 3D、All : すべて)
Blocking Mask レイキャストをブロックするオブジェクトがあるレイヤーを選択する。

最後に

 UI に必須な Canvas についてまとめました。