カメラ(2D)とキャンバスを合わせる

検証環境

Windows

• Windows 11

Unity エディター

• 2020.3.25f1

カメラとキャンバスの初期状態

オブジェクトとして「入力フィールド」や「ボタン」を配置すると自動的に「キャンバス (Canvas)」が作成されます。 しかし、エディター上ではカメラ(2D)の表示領域とキャンバスの表示領域が異なるため、編集時にカメラの表示領域に配置しているオブジェクトとキャンバスの UI の位置関係が掴みづらいです。

ゲームを実行すれば一応２つのビューは重なって表示されます。

３Ｄの場合はカメラの位置は３Ｄ空間上に配置するため、UI とはまったく別な配置で問題ないのですが、 ２Ｄの場合はカメラで見る視点と UI を見る視点が同じであることが多いので、ここではこの２つのレイアウトが同じ位置になるように設定します。

カメラにキャンバスを合わせる

シーンにボタンなどのなんらかの UI を配置します。すると Canvas が自動的に追加されます。

追加された Canvas を選択し、インスペクターから Canvas にある「レンダーモード」を「スクリーンスペース - カメラ」に変更します。

新たに「レンダーカメラ」という項目が追加され警告が表示されます。ここにカメラを設定します。

警告

A Screen Space Canvas with no specified camera acts like an Overlay Canvas.
(カメラが指定されていないスクリーンスペースキャンバスは、オーバーレイキャンバスのように機能します。)

「なし (カメラ)」の右にあるボタンから選択してもよいですが、 ヒエラルキーにある Main Camera をレンダーカメラにドロップしたほうが手っ取り早いです。 Main Camera を選択すると Canvas にドロップできないので、 Canvas を選択したまま Main Camera をレンダーカメラにドロップします。

するとシーンビューでは Canvas の領域がなくなります。

拡大してみるとカメラの範囲にキャンバスに配置したオブジェクトが表示されていることが分かります。 これでカメラによる表示範囲とキャンバスに配置した UI を同じ領域にセットすることができるようになりました。