最初に
どうも、ろっさむです。
今回はUnity上でUIを構築する際に使用する「Canvas」というオブジェクトについてまとめてみようと思います。
開発環境
- Rider 2020.3
- Unity 2020.2
Canvasとは何か
UIオブジェクトの親となるオブジェクトです。uGUIと呼ばれるUnityでのUIシステム（TextやButtonなどのUIオブジェクト）を開発する際にはCanvasコンポーネントがアタッチされている親オブジェクトが必要となります。Canvasを配置していない状態で、Buttonなどを作成した場合でも、自動的にCanvasが作成されます。
またCanvasがついたオブジェクトが作成されると自動的にEventSystemオブジェクトも作成されます。これはシーン内にて、タップなどのイベントを処理するためのものです。これがないとuGUIは反応しません。Buttonなどはこのコンポーネントを利用して作られています。また、このEventSystemオブジェクトはシーン上で1つだけが有効になります。複数置いた場合はランダムでどれかが有効になるようです。シーン上のEventSystemオブジェクトは1つのみにしましょう。
Canvasオブジェクトとセットになっているコンポーネント
Canvasオブジェクトを作成した際に、以下の4つのコンポーネントがデフォルトでアタッチされています。
- Rect Transform
- Canvas
- Canvas Scaler
- Graphic Raycaster
Rect Transform
2DのUIレイアウトに特化したUI要素専用のTransformコンポーネントです。このコンポーネントを設定することでアンカーなどの便利な機能を用いてUI要素の位置やサイズの変更を行うことができます。
参考：
【Unity uGUI】RectTransformの基本的な使い方を理解する
| 項目 | 値 | 概要 |
|---|---|---|
| Render Mode | Screen Space - Overlay | カメラに関係なく、スクリーンに直接描画されるため、必ず前面に出るUIになる |
| Screen Space - Camera | Canvasは指定したカメラによって描画される。UIのサイズは画面内に収まるように自動で調整され、カメラからの距離では前後関係のみが考慮される。またUIは常にカメラの正面になる。 | |
| Screen Space - World Space | 3D空間上に存在するオブジェクトと同様として描画される。Canvasを3Dオブジェクトの子要素して、オブジェクトに追従するUIを作成することも可能。 | |
| Pixel Perfect | true/false | アンチエイリアス無しで、trueの場合ピクセルの欠けが起こらないようにする。しかし処理は重いため、動くUIがある場合にはfalseが推奨される。 |
| Sort Order | 整数値 | Canvasが複数ある場合の優先度。数値が大きいCanvasほど手前に描画される。 |
| Target Display | 描画対象のDisplayを指定する。 | |
| Render Camera | 描画対象のカメラを指定する。 | |
| Plane Distance | 整数値 | カメラからの距離を指定。 |
| Sorting Layer | レイヤー同士での描画の優先度を設定する場合に使用。 | |
| Order in Layer | 整数値 | 同じSorting Layer内での数値による描画順を設定する場合に使用。 |
| Event Camera | Canvasのタッチなどのイベントを検出するカメラの指定。 | |
| Additional Shaper Channel | シェーダーの瀬マンティクスに何を追加するか選択可能。 | |
| Nothing | 選択なし | |
| Everything | 全選択 | |
| TexCoord1 | 2番目のUV座標 | |
| TexCoord2 | 3番目のUV座標 | |
| TexCoord3 | 4番目のUV座標 | |
| Normal | 頂点の法線 | |
| Tngent | 接線 |
Canvas Scaler
画面サイズが変わった時にUIを伸縮させるコンポーネントです。
| 項目 | 値 | 概要 |
|---|---|---|
| UI Scale Mode | Constant Pixel Size | 画面のサイズ関係に依存せずPixel単位でUIの伸縮を行う。 |
| Scale With Screen Size | 画面のサイズに依存し、どんな画面サイズでも同じようにUIが表示される。 | |
| Constant Physical Size | 画面のサイズ関係に依存せず、UIをPhysical Unitで指定した単位に対応させる。 | |
| Scale Factor | 数値 | 表示されるUIの比率を設定する。2なら2倍。 |
| Reference Pixels Per Unit | 数値 | 1m内で表示されるピクセル数を設定。100は1mmに100ピクセル表示。 |
| Reference Resolution | 数値 | 解像度の基準を設定。解像度に合わせてUIを拡大・縮小させる。 |
| Screen Match Mode | Reference Resolutionとアスペクト比が異なる場合の対処法を設定。 | |
| Match Width or Height | 横幅か高さどちらを基準にするか | |
| Expand | Reference Reslutionで設定した範囲が画面内に入るように自動調整される。フッターメニューとかに使えるかも。 | |
| Shrink | Reference Reslutionで設定した範囲内にUIが収まるように自動調整される。壁紙的なものに使えるかも。 |
参考：
【Unity】【uGUI】マルチ解像度対応に必須なCanvas Scalerを目的別に理解する
Graphic Raycaster
UIのタップなどのイベントを受け取るために必要なコンポーネントです。
| 項目 | 値 | 概要 |
|---|---|---|
| Ignore Reversed Graphics | bool | レイキャスターから反対方向を向いていても考慮するか否か |
| Blocking Objects | UIの前にオブジェクトが配置されている場合に、レイキャストをブロックするオブジェクトタイプを設定。 | |
| None | なし | |
| Two D | 2Dオブジェクト | |
| Three D | 3Dオブジェクト | |
| All | 全て | |
| Blocking Mask | Blocking Objects＋レイヤーが一致するオブジェクトのみブロック対象とする。 |