【Unity】Canvasコンポーネントとは？UIの表示領域を作る機能

こんにちは、ともくんのゲーム作り部屋にようこそ！

このページでは、

というお悩みの方に向けた内容となっています。

Unityで、UIオブジェクトを配置する際に使われるのがCanvasコンポーネントです。

このCanvasコンポーネントは、UIのオブジェクトを表示させるための領域を作るという役割を持っています。

そして、Canvasコンポーネントを付けたオブジェクトの子に、UI要素を持つオブジェクトを配置することで、UIとして画面に表示できるようにしています。

そこで、このページでは、Unityでのゲーム制作のUI表示に欠かせないCanvasコンポーネントについて、どんな仕組みなのか、また使い方や設定までをまとめていきます。

Canvasコンポーネントとは？

まずは、Canvasコンポーネントがどういうものなのかを紹介していきます。

UIを表示させる場所を作る役割

Canvasコンポーネントとは、Unity内でUIを表示させるための場所を作る役割を持っているコンポーネントです。

ゲームでのUIというのは、ゲーム内のメニューやボタン、テキストなど、プレイヤーに対して様々な情報をゲーム画面上に表示させているもののことを言います。

このUIは、ゲームの中で動いているオブジェクトの画面に対して、上からUI用の画面を重ねて表示させることで、プレイヤーに見せたり操作できるようにしています。

そして、このUI用の画面を作る役割を持っているのが、Canvasコンポーネントになります。

UI要素はCanvasの子オブジェクトに配置する

ゲーム内に表示させたいUI要素(ボタンやテキストなど)は、必ずCanvasコンポーネントの紐づいたオブジェクトの子オブジェクトに配置する必要があります。

なぜなら、先ほどの項目でも説明した通り、UI要素はゲーム内のオブジェクトが表示されている画面とは別で、Canvasコンポーネントで作っているUI画面に表示させる必要があるからです。

もう少し詳しく言うと、それぞれのUI要素には「Canvas Renderer」というコンポーネントが紐づいていて、親オブジェクトのCanvasコンポーネントに紐づいてUI要素がレンダリングされるようになっています。

そのため、親にCanvasコンポーネントが紐づくオブジェクトを配置しておくことで、親によって作られたUI画面にそのUI要素を表示させることができます。

Canvasコンポーネントの使い方や設定項目

ここからは、実際にCanvasコンポーネントを使う際の使い方や設定項目について、まとめていきます。

UIを追加すると自動的にCanvasが紐づく

UI要素をシーン内に配置すると、自動的にCanvasコンポーネントの紐づいた「Canvas」というオブジェクトが作成されます。

例えば、ゲーム内にボタンを表示させたい場合、ヒエラルキーウィンドウから+ボタンを押して、「UI」の中にある「Button – TextMeshPro」を選択します。

すると、「Canvas」というオブジェクトの中に、「Button」オブジェクトが作成されているのが分かります。

このCanvasのオブジェクトには、Canvasコンポーネントが自動的に紐づいており、ここでUI画面の表示領域を作り、その中に子オブジェクトのボタンが表示されることになります。

すでにCanvasコンポーネントがある場合は、UI要素を作成しようとすると、そのCanvasコンポーネントが紐づくオブジェクト配下に、UIのオブジェクトが作成されます。

なお、UIの表示の仕方については、以下の記事で詳しく解説していますので、参考にしてみてください。

Canvasコンポーネントの設定項目

Canvasコンポーネントには、いくつか設定項目がありますので、どんな設定なのかを紹介していきます。

Render Mode：UI表示領域をどのように描画するかを決める

Render Modeは、そのUIをどのように描画するかを決めている項目です。

このRender Modeでは、

• Screen Space – Overlay
• Screen Space – Camera
• World Space

の3つから選択することができます。

Screen Space – Overlay：UI画面をゲーム画面の上から描画する

「Screen Space – Overlay」は、UIの表示画面をゲーム画面の上から重ねて描画するモードになっています。

Overlayモードを選ぶと、上記のようにカメラの撮影範囲とは異なる部分に、UIの表示画面を作ることができます。

このUIの表示画面は、実際のゲーム画面の大きさや解像度に合わせて、自動的に縮小拡大されてゲーム画面の上に表示されるようになります。

上記のように、Overlayモードでは、UI画面が必ずカメラの映像よりも上に表示されるようになります。

Screen Space – Camera：指定したカメラにレンダリングする

「Screen Space – Camera」は、指定したカメラ上に、UIの画面領域をレンダリングするモードになります。

Cameraモードを選ぶと、上記のように指定したカメラの撮影範囲の中で、カメラに近い距離の部分にUI表示画面が作られます。

Overlayモードと違う点は、UIの表示領域もカメラで撮影して表示しているので、UIよりも手前にオブジェクトが配置されている場合は、以下のようにUIが後ろに表示されてしまうことになります。

World Space：UIをオブジェクトと同様に配置する

「World Space」は、UIの表示領域を平面オブジェクトと同じように自由に配置することができるモードです。

World SpaceモードでのUIの表示画面は、通常のオブジェクトと同じでワールド内で自由に動かすことができますが、上記のようにカメラの撮影範囲外に配置するとUIは表示されません。

以下のようにカメラの撮影範囲内にUI領域を移動してあげると、

オブジェクトと一緒にカメラで撮影されて、UIが表示されるようになります。

なお、World SpaceモードのUIの位置は、Rect Transformコンポーネントで制御されています。

Pixel Perfect：UIにアンチエイリアス処理を行うかどうか

Pixel Perfectは、アンチエイリアス処理を行わずにUIを描画するかどうかを決めている項目です。

このPixel Perfectにチェックを入れると、アンチエイリアス処理は無しになり、UIがピクセルのずれなく高い精度で表示できるようになります。

ただし、処理に負荷がかかりやすい設定になります。

Render Modeが「Screen Space」の時だけ表示される項目です。

Render Camera：UIをレンダリングするカメラを指定する

Render Cameraは、UIを表示させたいカメラを指定することができる項目です。

このRender Cameraで指定したカメラ上で、そのUIは描画されることになります。

また、Render Modeが「Screen Space – Camera」との時だけ表示される項目です。

Event Camera：UIイベントを処理するためのカメラを指定する

Event Cameraは、UI上でのクリックなどのイベントをどのカメラで処理するかを決めている項目です。

このEvent Cameraの項目は、Render Modeが「World Space」の時だけ表示される項目です。

World Spaceモードは、UIを平面オブジェクトとして捉えているので、このEvent Cameraでどのカメラでイベント処理を行うかを指定します。

Plane Distance：UIとカメラの距離を設定する項目

Plane Distanceは、UIをカメラからどのくらいの距離に表示するかを決めている項目です。

このPlane Distanceは、Render Modeが「Screen Space – Camera」との時だけ表示される項目で、数値が小さければ小さいほどカメラとUIの距離は近くなり、大きければ大きいほど遠くなります。

Sort Order：UIの描画順を決めている項目

Sort Orderは、複数のCanvasコンポーネントによるUI表示領域がある場合に、それぞれの描画順を決めている項目です。

このSort Orderは、Render Modeが「Screen Space – Overlay」の時だけ表示される項目で、数値が大きいほど手前に描画されるようになります。

Sorting Layer：UIの描画順のレイヤーを決める項目

Sorting Layerは、そのUIを描画するレイヤーを決めている項目です。

UIにレイヤーを設定すると、他のUIやオブジェクトとの描画順を決めることができます。

レイヤーの順番は上記のようにドラッグ＆ドロップで行うことができ、下にいけばいくほど画面の手前にそのレイヤーが表示されるようになります。

このSorting Layerは、Render Modeが「Screen Space – Camera」と「World Space」の時だけ表示される項目です。

レイヤーの設定については、以下のページで詳しく解説していますので、参考にしてみてください。

Order in Layer：同じレイヤー同士での描画順を決める

Order in Layerは、Sorting Layerで同じレイヤー同士での描画順を決めている項目です。

例えば、「UI」のレイヤーに複数のCanvasを指定していた場合に、片方のUIを必ず手前に表示させたいなどの場合に、このOrder in Layerを使います。

Order in Layerに設定した数値が大きければ大きいほど、手前に表示されるようになります。

このOrder in Layerは、Sorting Layerと同じで、Render Modeが「Screen Space – Camera」と「World Space」の時だけ表示される項目です。

Target Display：UIを表示させる画面を選択する

Target Displayは、マルチディスプレイの際に、どのティスプレイにUIを表示させるかを決めている項目です。

このTarget Displayは、UIをカメラで撮影しないRender Modeが「Screen Space – Overlay」の時だけ表示される項目です。

Additional Shader Channels：シェーダーのセマンティクスに何を追加するか

Additional Shader Channelsは、シェーダーのセマンティクスに追加する項目を選択することができます。

このAdditional Shader Channelsを使うことで、UIに独自のシェーダーを使って表現を変えることができます。

Additional Shader Channelsでは、以下の7つから選択することができます。

• Nothing：いずれも選択をしない
• Everything：すべて選択をする
• TexCoord1：2番目のUV座標
• TexCoord2：3番目のUV座標
• TexCoord3：4番目のUV座標
• Normal：頂点の法線
• Tangent：接線

Vertex Color Always In Gamma Color Space：頂点カラーをガンマ空間に保持するかどうか

Vertex Color Always In Gamma Color Spaceは、頂点カラーをガンマ空間に保持させるかどうかを決めている項目です。

頂点カラーをガンマ空間に保持させることで、UIシェーダーでガンマ空間からリニア空間への変換が可能になり、UIカラーの精度が向上する効果があります。

Canvasと連携しているコンポーネント

UI要素を追加した際に作成されるCanvasオブジェクトには、Canvasコンポーネント以外に「Rect Transform」「Canvas Scaler」「Graphic Raycaster」というコンポーネントが紐づいています。

また、UI要素自体には「Rect Transform」「Canvas Renderer」というコンポーネントが紐づいているのが分かります。

それぞれのコンポーネントがどんな役割を持っているのか、簡単に解説していきます。

Canvas Scaler：UI画面の大きさを調整する

Canvas Scalerは、画面サイズが異なる際のUIの表示方法を定めている項目です。

例えば、パソコンとスマホでは画面サイズが異なり、UIの表示のされ方が変わってしまいます。

そのような場合に、このCanvas Scalerを使って、フォントサイズや画像などの大きさを調整するように、Canvasコンポーネントと連携して動作します。

Graphic Raycaster：UIのタッチ操作を検出する

Graphic Raycasterは、UIのボタンを押したりタッチしたりといった動作を検出することができるコンポーネントです。

Canvasコンポーネントと連携して、Canvas上にある要素にレイキャストを行って、どのUIに触れたかを検出しています。

また、Graphic Raycasterによって検出したものは、「EventSystem」と連携を行うことで様々なアクションを行うことができるようになります。

Rect Transform：UIをどこに表示させるかを決める

Rect Transformは、UIをどこに表示させるかを決めるためのコンポーネントです。

通常のゲームオブジェクトは、Transformの中で座標の位置を決めることができますが、UI要素には、このTransformがありません。

その代わりに、このRect Transformを使って、Cavasコンポーネントと連携して、UI表示領域のどこにそのUIを表示させるのかを決めていくことができます。

Canvas Renderer：UIを表示させる役割

Canvas Rendererは、そのUIを表示させる処理を行うコンポーネントです。

このCanvas Rendererは、親のCanvasコンポーネントと連携して、そのUIを描画させる役割を持っています。

記事内でも解説しましたが、このCanvas Rendererを使ってUIを表示させるため、親オブジェクトがCanvasコンポーネントに紐づいている必要があります。

まとめ

このページでは、UnityでUI表示をする際に使用するCanvasコンポーネントについて、仕組みや特徴、また設定項目までをまとめていきましたが、いかがでしたでしょうか？

UnityのCanvasコンポーネントは、ゲーム内でUIを表示させるための場所を作る役割を持っているコンポーネントです。

UI表示させるためには、このCanvasコンポーネントを持つオブジェクト配下(子オブジェクト)に、UI要素を配置していく必要があります。

また、Canvasコンポーネントは、他のコンポーネントと連携してUI表示を決めているコンポーネントになります。

最後までお読みいただきまして、ありがとうございました！