【Unity徹底解説】Canvas【使い方・インスペクター編】

<Canvasとは>

UIを配置・描画するための場所です。UGUIと言われるUnityのUIのシステムを表示させるためのコンポーネントです。UGUIと言われる各種UIはCanvasの子オブジェクトでないと画面に表示されなません。

Canavasを作成するとシーンビュー上に白い四角が表示されますが、これはゲームビューと同期します。(レンダーモードがWorld Spaceの場合は例外)よく絵を描くキャンバスと例えられますが、現実のキャンバスのように固定されたものではないので注意が必要です。ゲームをプレイしている人の端末の解像度によって白い四角は可変します。

canvas move

↑のようにゲームビューに合わせて可変します。

<Canvasを使う際の注意点>

Canvas内のUIを動かすと、Canvas全体のUI全てが再構築されます。そのため、動くUIと動かないUIを別々に分ける手法がとても有効です。また、UIを子オブジェクトにしなければいけない事から、絶対に一番上の親オブジェクトにする必要があるように思えますが、Canvasの子オブジェクトにCanvasを置く事もできます。これをSubCanvasと呼びます。このSubCanvasを動くUIの上に置く事で処理を軽くする事ができます。

<インスペクター>

RenderModeによって、インスペクターの内容が変わるので各種RenderMode別に解説していきます。

Screen Space – Overlay

これに設定された場合、必ず前面に出るUIとなります。

screen space overlay
screen space overlay scene view

・Pixel Perfect

解像度やスケーリングの影響でピクセルが欠ける場合があります。普通の画像だと1ピクセルの欠けというのは目に見えづらいですが、ドット絵や1ピクセルで表現されている線などは欠けてしまうと目に見えてわかるようになってしまうので、ピクセル欠けが気になったらこれにチェックを入れると良いです。しかし、処理的に重いので扱いには慎重になりましょう。動くUIがある場合にはチェックを入れるのはオススメしません。

・SortOrder

同じレイヤー内で数字が大きいものほど前に表示されます。同じ、Screen Space – Overlay設定のCanvasに対して効果があります。

・Target Display

マルチディスプレイの際に、どのディスプレイに表示させるのか

・Additional Shader Channels

シェーダーのセマンティクスに何を追加するか選択します。複数選択可能です。

・Nothing・・・全て選択なしにする
・Everything・・・以下のもの全て選択する
・TexCoord1・・・2番目のUV座標(float2,float3,float4)
・TexCoord2・・・3番目のUV座標
・TexCoord3・・・4番目のUV座標
・Normal・・・頂点の法線(float3)
・Tangent・・・接戦(float4)

Screen Space – Camera

これに設定された場合、UIはカメラから一定の距離に存在するようになります。

screen space camera

Pixel Perfect、Additional Shader ChannelsはScreen Space – Overlayと同じです。

screen space camera scene view

・Render Camera

このキャンバスを描画するカメラ。このカメラを基準にUIが配置されます。

・Plane Distance

カメラからどれぐらいの距離にUIを置くか

・Sorting Layer

上部メニューのProject Setting>Tags & Layersで設定されているレイヤー。同じ位置に2D表現で表されたものがある場合、どれを前面に持ってくるかを設定できます。Tags & Layers>Sorting Layerで下に設定したものほど前面に出ます。

・Order in Layer

同じレイヤー内の同じ位置に存在するUIを数字が大きいものほど前に表示します。Sorting Layerの中をさらに細分化して表示順を制御するものです。

World Space

UIを3D空間に置きます。

world space

Sorting Layer、Order in Layer、Additional Shader ChannnelsはScreen Space – Cameraと同じです。

world space scene view

・Event Camera

このUIを触るためのカメラ

SubCanvas

親にCanvasが存在するCanvasです。Canvasを使う際の注意点より処理を軽くするために使用されます。

sub canvas

・Pixel Perfect

内容についてはこちらを参照してください。

Inherit・・・親のキャンバスの設定を受け継ぎます。
On・・・Pixel Perfectをオンにします。
Off・・・Pixel Perfectをオフにします。

・Override Sorting

チェックを入れると親のソート内容を引き継がず上書きます。

Sorting Layer、Order in Layer、Additional Shader ChannnelsはScreen Space – Cameraと同じです。


Canvasのスクリプトについての解説は↓の記事で行なっています。

Canvasを作った時に一緒に作成されるCanvasScalerについては↓の記事で解説しています。

Canvasを作った時に一緒に作成されるGraphicRaycasterについては↓の記事で解説しています。

<わからない事があったら>

このサイトの説明ではよくわからなかったとか、もっと知りたい事などがあれば、また別の勉強方法があるので違った切り口を使ってみるのもいいと思います。

<オススメの本>

本で詳しい解説がされているので書籍を買ってみるというのも手の一つです。最近はKindle版があるので届くまで待つ事もなく場所も取らないのでとても良いです。

<オンラインスクール>

オンラインスクールでは人に質問する事ができるので、行き詰まってしまった方にオススメです。 無料体験もあるので試しに見てみるのも手ですよ



タイトルとURLをコピーしました