【Unity】複数のカメラをひとつの画面内に表示させる方法

Unity

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

このページでは、

「複数のカメラを表示させたい!」

「カメラの映像の上に別のカメラの映像を重ねたい!」

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

Unityでは、複数のカメラを使って異なる視点の映像を同時に表示させることができます。

具体的には、複数のカメラを同時に表示させる場合、Viewport Rectを使ってカメラを表示させる位置や大きさを指定してあげることで、複数のカメラの映像を表示させることができます。

例えば、画面を分割してそれぞれのカメラの映像を表示させたり、ワイプと呼ばれるカメラ映像が表示されている上に、他のカメラの映像を小さく重ねて表示させたりすることができます。

そこで、このページでは、Unityで複数のカメラの映像を表示させる方法についてまとめていきます。

この記事を書いた人

ゲーム作りを学び始めた一児のパパです。
このブログは、子供から「ゲームを作ってみたい!」と言われ、非プログラマーでゲーム作りをしたことない僕が、ゲーム作りの本を読んで独学でゲーム開発を学んでいるブログです。
同じように初めてゲーム作りをしている方と一緒に学んでいけるようなブログに出来たらいいなと思っています。
また、「このコードはおかしい」とか「もっと良い書き方があるよ!」などあれば、どんどん指摘して頂けると助かります。

Viewport Rectを指定して複数のカメラを表示する

Unityで複数のカメラを表示する場合は、Cameraコンポーネントで設定できるViewport Rectという項目でカメラの表示サイズや位置を決めることで、実装していくことができます。

Viewport Rectとは?

Viewport Rectは、CameraコンポーネントのOutputの中で設定できる項目で、画面のどこにカメラの映像を表示するかをビューポート座標で決めている項目です。

このビューポート座標とは、ゲーム画面の左下の座標を(0,0)、ゲーム画面の右上の座標を(1,1)とした座標になっています。

そして、Viewport Rectの「X」「Y」の項目で、それぞれ0~1までの値を設定してあげることで、(X,Y)の座標の場所にカメラの表示画面の左下がくるように設定できます。

また、カメラを描画する画面の大きさを決めているのが、Viewport Rectの「W」「H」の項目で、Wは画面の、Hは画面の高さを指定することができます。

例えば、Viewport Rectの値で、Xを0.2、Yを0.1、Wを0.6、Hを0.5と設定すると、

上記のように、ゲーム画面よりも少し小さくしたカメラ映像を表示させることができるようになります。

Viewport Rectで画面を分割して表示する処理

このViewport Rectを使って、ゲーム画面を分割することができるようになります。

ここでは、ゲーム画面を2分割4分割にして、それぞれで異なるカメラの映像が流れるような処理を作ってみます。

画面を2分割にする

まず、カメラを2つ準備(カメラAとカメラB)して、分かりやすいようにそれぞれ異なるオブジェクトを撮影するようにしておきます。

カメラA
カメラB

そして、カメラAのViewport Rectの値を、Xに0、Yに0、Wに0.5、Hに1と設定してあげます。

次に、カメラBのViewport Rectの値を、Xに0.5、Yに0、Wに0.5、Hに1と設定します。

これでゲーム画面を見てみると、

画面がに2分割されて、それぞれのカメラ映像が表示されているのが分かります。

ちなみに、画面をに2分割したい場合は、カメラAのViewport Rectの値にXを0、Yを0、Wを1、Hを0.5に設定、カメラBのViewport Rectの値にXを0、Yを0.5、Wを0.5、Hを1に設定することで、以下のように縦に2分割で表示することができます。

画面を4分割にする

先ほどの2分割と同じ要領で、画面を4分割にすることもできます。

今度は、カメラを4つ準備しておきます。

カメラA
カメラC
カメラB
カメラD

そして、それぞれのカメラのViewport Rectを以下のように設定していきます。

▼カメラAのViewport Rect
X: 0、Y:0.5、W:0.5、H:0.5

▼カメラBのViewport Rect
X: 0.5、Y:0.5、W:0.5、H:0.5

▼カメラCのViewport Rect
X: 0、Y:0、W:0.5、H:0.5

▼カメラDのViewport Rect
X: 0.5、Y:0、W:0.5、H:0.5

これでゲーム画面を見てみると、

綺麗に画面が4分割されて、それぞれのカメラ映像を一画面に表示させることができています。

他のカメラの上に重ねて表示する処理

ここまでは、画面を分割してカメラ映像を表示させる方法を紹介していきましたが、今度はカメラ映像の上に他のカメラ映像を重ねて表示する処理を作ってみます。

重ねる側のカメラのビューポート座標を設定する

ここではカメラを2つ準備して、カメラAを全画面に表示させて、その映像の上にカメラBの映像を右上に小さく表示させるワイプ処理を作っていきます。

カメラAはオブジェクトの正面からの映像、カメラBはオブジェクトの頭上からの映像を撮影するように、以下のように配置しています。

カメラA
カメラB

カメラBのViewport Rectの項目で、Xを0.77、Yを0.7、Wを0.2、Hを0.25に設定します。

これでカメラBの表示サイズを小さくすることができましたが、ゲーム画面を見てみると、以下のようにカメラAの映像しか表示されていないことがあります。

これは、カメラの描画順が決められていないことが原因です。

Priorityでカメラの描画順を決めて重ねる

カメラの描画順を決める項目は、CameraコンポーネントのRenderingの中にあるPriorityという項目です。

このPriorityは、-100から100までの数値を入力することができ、数値が大きいカメラの映像が手前数値が小さいカメラの映像が奥側、カメラの描画順を数値で決めている項目です。

ここでは、カメラAよりもカメラBの映像を手前に表示させる必要があるため、カメラAのPriorityを「0」、カメラBのPriorityを「1」に設定してみます。

これで再度ゲーム画面を確認してみると、

カメラAの映像の上にカメラBの映像が右上に重なって表示できているのがわかります。

まとめ

このページでは、Unityで複数のカメラの映像を表示させる方法についてまとめていきましたが、いかがでしたでしょうか?

Unityで複数のカメラ映像を同時に表示させる場合は、Viewport Rectを使ってカメラの表示位置や大きさを変更してあげることで実装できます。

例えば、画面を分割してカメラ表示させたり、カメラの映像の上に他のカメラ映像を重ねて表示することができます。

ゲーム内で様々な視点を表示させることで、よりゲームの醍醐味を高めていくことができます。

なお、複数のカメラを使った画面の切り替えについては、以下の記事でまとめているので参考にしてみてください。

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

コメント