初めに
UI を配置、表示するために必要になる Canvas についてまとめます。
Index
- 初めに
- Index
- Canvas とは
- Canvas オブジェクトについている３つのコンポーネント
- Canvas コンポーネントの機能
- Render Mode
- Pixel Perfect（Screen Space の場合のみ）
- Sort Order（Screen Space - Overlay の場合のみ）
- Target Display（Screen Space - Overlay の場合のみ）
- Render Camera（Screen Space - Camera の場合のみ）
- Plane Distance（Screen Space - Camera の場合のみ）
- Sorting Layer（Screen Space - Camera、World Space の場合のみ）
- Order in Layer（Screen Space - Camera、World Space の場合のみ）
- Additional Shader Channels
- Canvas Scaler コンポーネントの機能
- Graphic Raycaster コンポーネントの機能
- 最後に
Canvas とは
Canvas は UI を配置、表示するために必要になるオブジェクトです。Text や Image などすべての UI はCanvas コンポーネントがアタッチされたゲームオブジェクトの子でなければなりません。
Canvas コンポーネントの機能
Render Mode
Render Mode ではどのように 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 を扱うのは、マルチディスプレイが必要な場合です。公式による説明のリンクを貼っておきます。
Render Camera（Screen Space - Camera の場合のみ）
描画対象のカメラを指定することができます。
Plane Distance（Screen Space - Camera の場合のみ）
カメラからの距離を整数値で設定できます。
Sorting Layer（Screen Space - Camera、World Space の場合のみ）
Sorting Layer を設定できます。Sorting Layer では、複数のスプライトのレンダリングの順序を簡単に設定することができます。Sorting Layer の説明はこちらの記事でわかりやすくまとめてあります。
Order in Layer（Screen Space - Camera、World Space の場合のみ）
同じSorting Layer内での数値による描画順を設定する場合に使用します。数値が大きいほど前に表示されます。
Additional Shader Channels
Shader について私が使い方を理解していないため、参考になりそうなリンクを貼っておきます。Shader のセマンティクスに何を追加するか選択できるようです。
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 についてまとめました。
