LoginSignup
24
26

More than 3 years have passed since last update.

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

Posted at

最初に

どうも、ろっさむです。

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

開発環境

  • Rider 2020.3
  • Unity 2020.2

Canvasとは何か

UIオブジェクトの親となるオブジェクトです。uGUIと呼ばれるUnityでのUIシステム(TextButtonなどのUIオブジェクト)を開発する際にはCanvasコンポーネントがアタッチされている親オブジェクトが必要となります。Canvasを配置していない状態で、Buttonなどを作成した場合でも、自動的にCanvasが作成されます。
image
image

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

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

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

  • Rect Transform
  • Canvas
  • Canvas Scaler
  • Graphic Raycaster

image

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+レイヤーが一致するオブジェクトのみブロック対象とする。

参考

24
26
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
24
26