
マイケル
みなさんこんにちは!
マイケルです!
マイケルです!

エレキベア
クマ〜〜〜

マイケル
前回Cinemachineの基本的な使い方について見てみたけど
今回は更に一歩踏み込んだカメラワークをいくつか作ってみようと思います!
今回は更に一歩踏み込んだカメラワークをいくつか作ってみようと思います!

エレキベア
どんなカメラワークを作るクマ?

マイケル
今回は、今作っているゲームで使おうと思ってる
・Target全体をカメラ全体に収めるカメラワーク
・複数カメラを任意のタイミングで切り替えるカメラワーク
・パス上を移動するカメラを切り替えるカメラワーク
について作ってみようと思うよ!
・Target全体をカメラ全体に収めるカメラワーク
・複数カメラを任意のタイミングで切り替えるカメラワーク
・パス上を移動するカメラを切り替えるカメラワーク
について作ってみようと思うよ!

エレキベア
おお〜〜〜それっぽいクマ〜〜〜
これは楽しみクマね
これは楽しみクマね

マイケル
なお今回使用するUnityとCinemachineのバージョンは下記になります!
使用するバージョンにより操作が異なる可能性もあるのでご注意ください!
使用するバージョンにより操作が異なる可能性もあるのでご注意ください!
バージョン | |
Unity | 2021.3.1f |
Cinemachine | 2.8.6 |
用意されているカメラの種類

マイケル
制作に入る前に、Cinemachineに用意されているカメラの種類について
ざっと見ていきましょう!
ざっと見ていきましょう!

マイケル
Create -> Cinemachineで一覧を見ると分かる通り、
下記の種類のカメラが用意されています。
下記の種類のカメラが用意されています。
種類 | 概要 |
FreeLookCamera | マウス入力にてカメラを移動、回転できる |
BlendListCamera | 複数のカメラを時間経過で切り替える |
StateDrivenCamera | 複数のカメラをAnimatorのStateに応じて切り替える |
ClearShotCamera | 追従対象が適切に描画されるようカメラを切り替える |
DollyCamera with Track | カメラをパスに沿って動かす |
CinemachineDollyCart | オブジェクトをパスに沿って動かす |
CinemachineTargetGroup | 複数のオブジェクトがカメラに収まるよう移動する |
CinemachineMixingCamera | 複数のカメラを合成する |
2D Camera | 2D表示に特化したカメラ |
↑それぞれのカメラの概要

エレキベア
うげ〜〜
こんなに用意されているクマか
こんなに用意されているクマか

マイケル
今回はこの中のいくつかを活用しながら作っていきます!
一つ一つについては解説しませんが、そちらに関しては青木ととさんのCinemachine紹介動画がとても分かりやすいのでこちらをご参照ください!!
一つ一つについては解説しませんが、そちらに関しては青木ととさんのCinemachine紹介動画がとても分かりやすいのでこちらをご参照ください!!
【復習】10分でCinemachine
↑青木ととさんの動画

エレキベア
むしろCinemachineについてはこの動画だけで十分クマ
ありがたいクマ・・・
ありがたいクマ・・・
Case1. Target全体を画面内に収める

マイケル
まずはTargetとなるオブジェクトを常に画面内に収める方法についてです!
下記のように画面サイズを変えても全体に移してくれるので、様々な画面に対応したい場合に重宝しそうです!
下記のように画面サイズを変えても全体に移してくれるので、様々な画面に対応したい場合に重宝しそうです!

エレキベア
これはよく使えそうクマね

マイケル
こちらはTarget Group Cameraを使用すると簡単に作成できます!
Create -> Cinemachine から作成すると、Virtual CameraとTargetGroupのオブジェクトが作成されます。
Create -> Cinemachine から作成すると、Virtual CameraとTargetGroupのオブジェクトが作成されます。

マイケル
VurturlCameraのFollow、LookAtにTargetGroupが指定されていて、
TargetのオブジェクトはTargetGroupの方で指定する形となります。
TargetのオブジェクトはTargetGroupの方で指定する形となります。

エレキベア
TargetGroupのコンポーネントにオブジェクトを設定したら
画面に写るよう調整してくれるわけクマね
でもこれはオブジェクト1つの場合でも使えるクマ??
画面に写るよう調整してくれるわけクマね
でもこれはオブジェクト1つの場合でも使えるクマ??

マイケル
基本的には複数のオブジェクトをグループとして全体を画面に写すのに使用するのですが、
オブジェクト1つでも設定することができるため単純に画面に写したい場合にも使用することができるみたいです!
オブジェクト1つでも設定することができるため単純に画面に写したい場合にも使用することができるみたいです!

マイケル
こんな感じですね!

エレキベア
なるほどクマ〜〜〜
これなら画面に写したいだけにも活用できそうクマ
これなら画面に写したいだけにも活用できそうクマ
Case2. 複数カメラを任意のタイミングで切り替える

マイケル
次は下記のように複数設置してあるVirtual Cameraを切り替える方法についてです!

エレキベア
むむ、簡単にできる方法はあるのかクマね〜〜
指定秒数で切り替える場合

マイケル
このように指定秒数で切り替えたい場合には簡単で、
BlendListCameraを使用すると実現できます!
BlendListCameraを使用すると実現できます!

マイケル
カメラの切り替え処理はBlendListCameraが担う形になり、
指定した順番で切り替えを行うことができます。
下記はそれぞれのカメラを2秒ごとに切り替える例になります。
指定した順番で切り替えを行うことができます。
下記はそれぞれのカメラを2秒ごとに切り替える例になります。

エレキベア
これはお手軽に使えるクマね〜〜
任意のタイミングで切り替える場合

マイケル
しかしこのようにボタン押下時など任意のタイミングで切り替えたい場合には
自前でスクリプトを記述しなければなりません。
どのカメラを優先するかはPriorityの値で決まるため、下記のようにボタン押下時に設定値を変更することで切り替えることができます。
自前でスクリプトを記述しなければなりません。
どのカメラを優先するかはPriorityの値で決まるため、下記のようにボタン押下時に設定値を変更することで切り替えることができます。

マイケル
このスクリプトにカメラとボタンをアタッチすると
切り替え処理の完成です!
切り替え処理の完成です!

エレキベア
スクリプトは作らないといけないクマが、
値を一つ変えるだけで済むのは楽クマね
値を一つ変えるだけで済むのは楽クマね
Case3. パス上を動くカメラを切り替える

マイケル
最後にパス上を動くカメラを切り替えて簡単なアニメーションを作成
してみようと思います!
してみようと思います!

エレキベア
タイトル画面とかでよくあるやつクマね

マイケル
作成に入る前に、既存で用意されたパスを使用したカメラの
・DollyCamera with Track
・CinemachineDollyCart
の概要について軽く見ていきます!
・DollyCamera with Track
・CinemachineDollyCart
の概要について軽く見ていきます!
DollyCamera with Track

マイケル
作成時にDollyCamera with Trackを選択すると
DollyTrackというパスと、VirtualCameraが作成されます。
DollyTrackというパスと、VirtualCameraが作成されます。
DollyCartにカメラを置くことで動かすことも可能

マイケル
作成されたVirtualCameraの設定をみてみるとTracked Dollyが指定されており、
こちらのPathPositionの値によりパス上のどの位置かを指定することができます。
こちらのPathPositionの値によりパス上のどの位置かを指定することができます。

マイケル
PathPositionの値を変更してみると下記のように移動することが確認できます。

エレキベア
これは中々楽しいクマね
CinemachineDollyCart

マイケル
対してCinemachineDollyCartはカメラ以外のオブジェクトを移動させることを想定しており、
DollyTrackとDollyCartのスクリプトがアタッチされた空のオブジェクトが作成されます。
DollyTrackとDollyCartのスクリプトがアタッチされた空のオブジェクトが作成されます。

マイケル
オブジェクトをDollyCartの子オブジェクトに設定することでパス上を動かすことができます。
この時、動かす速度はDollyCartスクリプトのSpeed変数で指定できます。
この時、動かす速度はDollyCartスクリプトのSpeed変数で指定できます。

エレキベア
こっちは速度に応じて処理も用意されているクマね
ドリーパスを使用したカメラを指定秒数で切り替える

マイケル
これらを活用してドリーパスを使用したカメラを切り替えてアニメーションを作成する方法について考えてみましょう!

エレキベア
むむ、指定秒数で切り替えるならBlendListCameraでいけそうな気もするクマが
毎回パスの開始地点に戻すのが難しそうクマね・・・
毎回パスの開始地点に戻すのが難しそうクマね・・・

マイケル
そうなんだよね・・・
なので今回はCinemachineDollyCartを複数用意してスクリプト側で切り替えることにしました!
なので今回はCinemachineDollyCartを複数用意してスクリプト側で切り替えることにしました!

エレキベア
結局それしかないクマか・・・

マイケル
下記のようにCinemachineDollyCartを二つ作成して、
更にDollyCartの子オブジェクトとしてVirtualCameraを作成します。
更にDollyCartの子オブジェクトとしてVirtualCameraを作成します。

マイケル
そして今回は動きを出すために
それぞれのDollyCartオブジェクトの速度は変更しておきます。
それぞれのDollyCartオブジェクトの速度は変更しておきます。

マイケル
あとは下記のように指定秒数ごとに切り替えるスクリプトを作成することで
今回のような動きを実現することができます!
今回のような動きを実現することができます!
↑切り替える処理の作成

エレキベア
スクリプトを書いたとはいえこれだけの記述で
それっぽいカメラワークが作れるのはすごいクマね
それっぽいカメラワークが作れるのはすごいクマね

マイケル
一歩踏み込もうとすると用意されてる機能だけでは足りない部分が出てくるから、
こういった活用は必要になりそうだね!
こういった活用は必要になりそうだね!
おわりに

マイケル
というわけで今回はCinemachineの活用法についてでした!
どうだったかな?
どうだったかな?

エレキベア
いろんなカメラワークが作れて楽しかったクマ〜〜〜
やっぱりCinemachineは便利クマね
やっぱりCinemachineは便利クマね

マイケル
デフォルトでもいろんな機能が用意されているし、
スクリプトでも自由に操作できるから積極的に使っていきたいね!
スクリプトでも自由に操作できるから積極的に使っていきたいね!

マイケル
それでは今日はこの辺で!
アデュー!!
アデュー!!

エレキベア
クマ〜〜〜〜
【Unity】Cinemachineでいくつかカメラワークを作ってみる 〜完〜