【Unity】Canvasとは？基本の設定方法と使い方

こんにちは！UnityのCanvasについて理解していますか？

UnityのUIはボタンやテキストを配置するだけで簡単に作ることができます。

ですがCanvasの設定は最初にしておかないと、後から配置を一つずつ変更する羽目になる可能性もあります！

そこで本記事では、Canvasの基本の設定方法と使い方について解説していきます。

Canvasとは

Canvasとは、UIが配置・描画される領域のことです。

Unityでは、ボタンや画像などのUIはCanvasの中に置くことで初めて画面上に表示されます。

つまりCanvasは、UIを作るときに必ず必要になる土台のようなものです。

このCanvasの設定を変更することで、UIの大きさや配置などをまとめて変えることができます。

作るのは非常に簡単で、例えばテキストのUIを作ると下のように自動的にCanvasが作成されその中に格納されます。

Canvasの設定方法

Canvasには色々な設定項目があります。

それぞれの設定項目について以下のような順番で解説していきます。

1. CanvasScalerで複数画面サイズに対応
2. RenderModeでCanvasをカメラに合わせる
3. Canvasが動かせないとき
4. CanvasGroupとは

CanvasScalerで複数画面サイズに対応

Canvasには下のようなCanvasScalerというコンポーネントがついています。

CanvasScaler内のUIScaleModeを変更することで、画面サイズが変わった時のUIの伸縮のさせ方を設定できます。

3つの設定項目があり、以下のような違いがあります。

• Constant Pixel Size → 画面サイズに関係なく一定のピクセル数で表示させる
• Scale With Screen Size → どのような画面サイズでも同じような比率でUIを表示させる
• Constant Physical Size → センチやミリなど単位を指定し、画面サイズに関係なく一定の大きさで表示させる

Constant Pixel SizeとConstant Physical Sizeの表示例は下の通りです。

画面サイズが大きくなっても、UIの要素は常に一定の大きさで表示されているのが分かります。

次に、Scale With Screen Size の表示例は下の通りです。

画面サイズが大きくなるとボタンもそれに合わせて大きく表示されているのが分かりますね。

このように、Scale With Screen Size を使えば複数の画面サイズに対応したUIを作ることができます。

RenderModeでCanvasをカメラに合わせる

UIを配置した時に、下のように画面の表示と大きさが合わないことがあるかと思います。

そんなときはCanvasのRenderModeの設定を変更すると解決することがあります。

まずはCanvasのRenderModeについて解説します。

Canvasには下のようにRenderModeというものがあります。

このRenderModeで、Canvasの大きさや位置をどんな基準で設定するかを変更できます。

RenderModeには以下の3種類があります。

• Screen-Space Overlay→カメラを使わずに画面サイズいっぱいにCanvasを配置
• Screen-Space Camera→カメラの描画サイズと合うようにCanvasを配置
• World Space→ワールド空間にCanvasを配置

今回は、これがWorldSpaceになっていました。

これをScreen-Space Cameraに変えてみましょう。

以下のように、Screen-Space Cameraに変更し、Render CameraにCameraをドラッグアンドドロップすれば設定完了です。

これでCanvasがカメラの描画サイズと合うようになりました。

Canvasが大きすぎるとき

CanvasのUIがカメラに対して大きすぎる場合があります。

これはRenderModeをScreen-Space Overlayに設定している時にそのような表示になります。

大きすぎるのを解消したい場合は、RenderModeをScreen-Space Cameraに変更しましょう。

これでカメラとCanvasのUIが良いバランスの大きさになります。

Canvasが動かせないとき

RenderModeがScreen-Space OverlayとScreen-Space Overlay Cameraの時は、下のようにCanvasを動かすことができません。

それぞれ画面やカメラに合わせて自動でCanvasが調整されるためです。

Canvasを動かしたい時は、RenderModeをWorldSpaceに変更しましょう。

すると下のように座標や大きさを自由に変更することができます。

CanvasGroupとは

複数のUIを一度に操作したい場面があるかと思います。

そんなとき、CanvasGroupを使えばCanvas単位でUIの表示・非表示を切り替えることができます。

CanvasGroupコンポーネントは下のようにAddComponentから選択することで設定できます。

今3つのボタンは同じCanvasに入れているため、このCanvasGroupで一度に操作することができます。

下のように、Alphaの数値を変更することで透明度を変更することができます。

0にすると非表示、1にすると完全に表示させることになりますね。

またInteractableのチェックを外すことで、ボタンの色が暗くなりました。

これはボタンの操作を受け付けない状態を意味します。

一時的にボタンを無効にするときなどに使えそうですね。

Canvasを複数作る方法

Canvasは複数作ることもできます。

既にCanvasがある状態で、ヒエラルキー上でUI→Canvasから新たなCanvasを作成できます。

Canvasを複数作る時は、動くUIと動かないUIとでCanvasを分けることをオススメします。

UnityではUIになんらかの変化があった場合、そのUIが属するCanvasのUI一つ一つを更新する処理を行っています。

そのため全てを一つのCanvasに入れると動かないUIにまで毎回更新が入り、負荷がかかってしまうのです。

Canvasを複数作って負荷の少ないUI作りを心掛けたいですね！

おすすめアセット

Curved UI – VR Ready Solution To Bend / Warp Your Canvas!

Curved UIは、VR用のカーブしたキャンバスを実装することができるアセットです。

マウスやコントローラー、凝視によってUIを操作することができます。

セットアップも簡単に行うことができ、VR用のUIにぜひ使いたいアセットです。

3D Modern Menu UI

3D Modern Menu UIは、Canvasを用いて作られたUIの無料アセットです。

スマホの画面サイズでの表示にも対応しており、無料ながらも頼りになるアセットです。

現在でも無料でアップデートが行われています。

まとめ

以上、UnityのCanvasの使い方について解説してきました！

CanvasはUIに必須の要素なのでぜひマスターしておきたいですね！