【Unity】Canvasについて理解してみよう

# 最初に

どうも、ろっさむです。

今回はUnity上でUIを構築する際に使用する「Canvas」というオブジェクトについてまとめてみようと思います。

## 開発環境

- Rider 2020.3
- Unity 2020.2

# Canvasとは何か

**UIオブジェクトの親となるオブジェクト**です。**uGUI**と呼ばれるUnityでのUIシステム（`Text`や`Button`などのUIオブジェクト）を開発する際には**Canvasコンポーネントがアタッチされている親オブジェクト**が必要となります。Canvasを配置していない状態で、`Button`などを作成した場合でも、自動的にCanvasが作成されます。
![image](https://user-images.githubusercontent.com/10665134/103173636-8a2ae900-489f-11eb-823c-2b319a36e072.png)
![image](https://user-images.githubusercontent.com/10665134/103173680-d5dd9280-489f-11eb-8733-e489c291c63d.png)

またCanvasがついたオブジェクトが作成されると自動的に`EventSystem`オブジェクトも作成されます。これはシーン内にて、タップなどのイベントを処理するためのものです。これがないとuGUIは反応しません。`Button`などはこのコンポーネントを利用して作られています。また、この`EventSystem`オブジェクトはシーン上で1つだけが有効になります。複数置いた場合はランダムでどれかが有効になるようです。シーン上の`EventSystem`オブジェクトは1つのみにしましょう。

## Canvasオブジェクトとセットになっているコンポーネント

Canvasオブジェクトを作成した際に、以下の4つのコンポーネントがデフォルトでアタッチされています。

- Rect Transform
- Canvas
- Canvas Scaler
- Graphic Raycaster

![image](https://user-images.githubusercontent.com/10665134/103174180-56ea5900-48a3-11eb-94a6-6d853872945b.png)

### Rect Transform

2DのUIレイアウトに特化したUI要素専用の**Transformコンポーネント**です。このコンポーネントを設定することでアンカーなどの便利な機能を用いてUI要素の**位置やサイズの変更**を行うことができます。

参考：
[【Unity uGUI】RectTransformの基本的な使い方を理解する](https://xr-hub.com/archives/11543)

|項目|値|概要|
|----|---|----|
|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を目的別に理解する](https://light11.hatenadiary.com/entry/2019/04/21/222337)

### Graphic Raycaster

UIのタップなどのイベントを受け取るために必要なコンポーネントです。

|項目|値|概要|
|----|---|----|
|Ignore Reversed Graphics|bool|レイキャスターから反対方向を向いていても考慮するか否か|
|Blocking Objects||UIの前にオブジェクトが配置されている場合に、レイキャストをブロックするオブジェクトタイプを設定。|
||None|なし|
||Two D|2Dオブジェクト|
||Three D|3Dオブジェクト|
||All|全て|
|Blocking Mask|Blocking Objects＋レイヤーが一致するオブジェクトのみブロック対象とする。|



# 参考

- [【Unity】【uGUI】マルチ解像度対応に必須なCanvas Scalerを目的別に理解する](https://light11.hatenadiary.com/entry/2019/04/21/222337)
- [【Unity入門】徹底的に使いこなそう！Canvasのまとめ](https://mogi0506.com/unity-canvas/#2Canvas_Scaler)
- [＜Graphic Raycasterとは＞](https://dkrevel.com/unity-explain/graphic-raycaster/)
- [Event Systemの個人的なまとめ](https://note.com/yoda0280/n/n8dbb8a78ba25)
- [＜Event Systemとは＞](https://dkrevel.com/unity-explain/eventsystem/)