キャンバス(Canvas)の使い方

ここではキャンバス(Canvas)の使い方について説明します。


※この記事で使用しているUnityのバージョン:Unity2019.1

キャンバス(Canvas)とは?

キャンバスはUI要素を表示するための画面のようなゲームオブジェクトです。

UIを表示させるには、そのUI要素をキャンバスの子として設定する必要があります。キャンバスの子になっていないUI要素は表示されないので注意してください(※とくにUI要素をスクリプトでInstantiateしたときは親の設定を忘れやすいので気を付けましょう)。

キャンバスの作り方

キャンバスの作り方は簡単で、ヒエラルキーで右クリック→「UI」→「キャンバス」を選択するだけです。

そうするとシーンのゲームオブジェクトに対してめちゃくちゃデカいキャンバスが作られますが、それで何の問題もないので安心してください(標準の設定ではカメラの範囲内にぴったり収まるように表示されます)。

あと、Canvasを作ると一緒に「EventSystem」というゲームオブジェクトも作られると思います。これはキャンバス上のUIをクリックするなどの操作(=イベントという)を検知するためのゲームオブジェクトですので、ボタンなどを設置する場合は削除しないようにしてください(削除するとボタンなどが反応しなくなります)。

キャンバスに関係するコンポーネントについて

さて、作ったキャンバスをインスペクターで見てみると次のようなコンポーネントがアタッチされていることが分かります。

キャンバスのコンポーネント

これらのうち「矩形トランスフォーム」以外はキャンバスに関係するコンポーネントです。では一つずつその役割を見ていきましょう。

キャンバス(Canvas)

キャンバス本体のコンポーネントです。チェックマークを外すとキャンバスが非表示になります。

  • レンダーモード(Render Mode):
    キャンバスをどのように描画するかを指定します。詳細は公式マニュアルの「Canvas」を参照のこと。
  • ピクセルパーフェクト(Pixel Perfect):
    UIをアンチエイリアス(=滑らか表示)無しで表示するかどうか。ドット絵などの場合はONにしたほうが綺麗に表示される場合があります。
  • ソート順(Sort Order):
    キャンバスが複数ある時、この値が大きいキャンバスほど手前に表示されます。

キャンバススケーラ(Canvas Scaler)

キャンバスを拡大・縮小するコンポーネントです。「UIスケールモード」は「画面サイズに拡大」に設定しておくのがオススメ。その場合は参照解像度をしっかり設定しておくこと。

グラフィックレイキャスター(Graphic Raycaster)

キャンバス上のUIに「触れる」かどうかを設定するコンポーネントです。チェックボックスをOFFにすると、そのキャンバス上のUI要素を操作できなくなります(イベントが発生しなくなる)。

通常は特に変更する必要はないでしょう。

キャンバスグループ(Canvas Group)

キャンバス全体のUI要素をまとめて操作するコンポーネントです。例えばキャンバス内のすべてのUI要素の不透明度を0にする、といった場面でとても役立ちます。

  • アルファ:キャンバス内のすべてのUI要素の不透明度。0で完全に透明
  • Interactable:キャンバス内のすべてのUI要素が入力を受け付けるかどうか。OFFで操作できなくなる。