Unityに関連する記事です

Cinemachineとは


 Cinemachine(シネマシン)は、Unityが無料で提供している、カメラの機能をまとめた Packege になります。
対象を指定することでカメラが自動で追尾したり、複数のカメラをゲーム画面内に配置してそれらの制御をしたりできる機能などを実装することが可能です。


 例えば、カメラを2台用意し、エリアを移動する際に自動的に切り替えてみると、下記の動画のようなカメラワークでゲームを進行してくことが出来ます。
2台のカメラが切り替わるときには、前のカメラと次のカメラとは、自動的に補間処理されてスムースにつながります。これもCinemachineの機能の1つです。

実装動画
https://gyazo.com/ab10d5c7d98f603670da5db207585996


 なおCinemachineは機能が膨大であるため、この手順では使用する機能についてしか説明をしていません。
詳しくは自分で調べて実装を行ってみましょう。説明を読みながらいじっていると自然に機能が分かってきます。


参考サイト
Unity公式様
Cinemachine を使ってカメラを設定しましょう
https://forpro.unity3d.jp/unity_pro_tips/2019/07/2...
のっぴの備忘録様
Cinemachineの使い方 Virtual Camera)
https://nopitech.com/2017/10/26/post-182/


設計


 MainCamera1台を使ってゲームシーンを映していくこともできますが、今回は演出の一環としまして、このCinemachineの機能を使っていきます。
具体的には、エリアを移動する際にカメラを順次切り替えていくことで3D空間を上手く演出に取り入れたステージを作成することを目的にしていきます。

 ベルトスクロールですので、そのまま右方向に水平にカメラが移動していってもよいのですが、3Dゲームですので立体空間が自由に扱えます。
つまり、各カメラの位置と角度を調整すれば、右方向にスクロールする際に上下方向や斜め方向に向かってカメラを移動できます。
ステージの形状に沿ったカメラ移動を実現できますので、横に長く作る以外の設計が可能になります。

 折角ですから、かっこいいカメラワークでゲームが進行するようにしてみましょう。

 基本的にはエリア1つにつき、1台のCinemachineのカメラ(Virtual Cameraといいます)を用意します。
エリアの移動に合わせて、このカメラも順番に1台ずつ切り替わっていくような設計にします。

 そのため、Virtual Cameraを管理し、エリアの情報をVirtual Cameraに伝達するためのスクリプト AreaCameraManagerクラスを新しく作成します。
エリアの情報はStageListスクリプタブル・オブジェクトに用意されていますので、こちらの情報をそのまま参照し、エリアの番号とVirtual Cameraの番号とを同期させる処理を記述します。

カメラとエリアの仕組み
 エリア 0 = Virtual Camera 0 でゲーム画面を映す
   ↓
 エリア移動
   ↓
 エリア 1 = Virtual Camera 1 でゲーム画面を映す(このエリアに合わせたカメラの切り替えをAreaCameraManagerクラスで行う)
   ↓
 この手順をエリア数分繰り返す
 


実装の手順


 実装手順は以下の通りです。

 1.CinemachineをUnityに導入(インポート)する
 2.1台目のVirtual Cameraを設置・設定する
 3.2台目のVirtual Cameraを設置・設定する
 4.AreaCameraManagerクラスを作成して設定する
 5.ゲームを実行して動作を確認する


新しく学習する内容


 ・Cinemachineの導入
 ・Virtual Cameraの実装方法(配置・設定)
 ・スクリプトからVirtual Cameraのプロパティを操作する


1.CinemachineをUnityに導入(インポート)する

PackageManagerビューを使って Cinemachine を選択する


 エディター内にある、PackageManagerビューを選択します。
もしもエディター内にPackageManagerビューがない場合には、Unityの左上のメニューから、Window => PackageManager を選択してください。

 PackageManagerビュー内の左上の Packages を選択するとプルダウンメニューが表示されますので、この中から Unity Registry を選択します。
読み込みが始まり、PackageManagerビュー内の左側の項目に複数のアセットが表示されますので、この中から Cinemachine を探してクリックください。
 

Packagesを Unity Registry に変更


手順動画 Packagesを Unity Registry に変更
https://gyazo.com/f4bbb72494da5975b9677e49c6b767c9


Cinemachineのインポート

 

 Cinemachine 内の右下にある Download ボタンをクリックします。Downloadが終了すると Import ボタンになりますので、そちらもクリックしてください。
Importする内容を選択するウインドウが開きますので、すべての内容の Import を行いますので、そのまま Import ボタンを押してください。

 プログレス表示が出て、しばらくすると Import が完了します。Import された Cinemachine は、Assets 内ではなくて Packages 内に追加されます。


Cinemachine フォルダの場所



 以上でCinemachineのImportの手順は終了です。続いて、Virtual Cameraを設置していきます。


2.1台目のVirtual Cameraを設置・設定する


 早速Cinemachineの機能を活用していきます。

 UnityにCinemachineがインポートされると、左上のメニューに Cinemachine の項目が追加されます。


Unity メニュー


 この中に Virtual Cameraをゲームシーンに追加するコマンドが含まれてますので、実行していきましょう。
各項目はすべて Virtual Cameraを追加するメニューになっており、一番上の Create Virtual Camera がプレーンの状態で追加されるコマンドです。
それ以外のコマンドはプレーンの状態ではなく、Virtual Cameraにカスタム設定を追加した状態で追加してくれるテンプレート的なコマンドになっています。


CinemachineVirtualCameraコンポーネントを持つゲームオブジェクトをヒエラルキーに追加する


 Cinemachine => Create 2D Camera を選択してください。ヒエラルキーに CM vcam1 ゲームオブジェクトが追加されます。
これは CinemachineVirtualCamera コンポーネントを持つゲームオブジェクトであり、設定が2D用にカスタマイズされているものです。
このコンポーネントを持つゲームオブジェクトを Virtual Camera と総称しています。


手順動画 Cinemachine => Create 2D Camera を選択
https://gyazo.com/0c86994c38b509f9290df4c4ea5da977


ヒエラルキー



MainCamera ゲームオブジェクトとVirtual Cameraの関わり


 Virtual Cameraである CM vcam1ゲームオブジェクトが作成される同時に、MainCamera ゲームオブジェクトの右端に新しいアイコンが追加されます。


ヒエラルキーのMainCameraゲームオブジェクト



 Virtual Cameraがある限り、ゲーム画面を映すカメラの役割は Virtual Camera となり、そのVirtual Cameraの映した内容を投影するカメラが MainCamera の役割になります。
そのためこのアイコンは、今現在、MainCameraはVirtual Cameraと連携しているので、直接動かすことができなくなることを示すアイコンです。


 MainCamera ゲームオブジェクトのインスペクターを確認します。
新しく CinemachineBrain コンポーネントが追加されているはずです。
こちらが先ほど説明しました、MainCameraの役割を Virtual Cameraの映した内容を投影するように設定しているコンポーネントです。
今回はこのコンポーネントの設定は変更しませんので、アタッチされている確認をしておいてください。

 またTransformの値も注目してください。あとで確認しますが、 Virtual Cameraである CM vcam1 ゲームオブジェクトのTransformの値に自動的に設定が行われます。 


MainCamera ゲームオブジェクト インスペクター画像



CM vcam1 ゲームオブジェクトの設定を確認する


 CM vcam1 ゲームオブジェクトの名前を AreaCamera_0 に変更します。


ヒエラルキー



 コンポーネントを確認しましょう。
CinemachineVirtualCameraコンポーネントがアタッチされています。このコンポーネントによってVirtualCameraが機能しています。
また MainCameraにアタッチされているCinemachineBrainコンポーネントとこのコンポーネントとが連動しています。


AreaCamera_0 ゲームオブジェクト インスペクター画像



 CinemachineVirtualCameraコンポーネントのBodyの設定が、どのようにVirtual Cameraが振る舞いをするかを決定しています。
Create 2D Camera で作成した場合には、このBodyの設定が Framing Transposer になります。これは 2D用にVirtual Cameraを振る舞うようにする設定です。
ゲーム的には3Dですが、カメラワークとしては2Dとしてキャラの追従などを行わせたいため、あえて2Dの設定を利用しています。


AreaCamera_0 ゲームオブジェクト インスペクター画像



カメラにキャラを追跡させるためのFollow設定を行う


 CinemachineVirtualCameraコンポーネントにある Follow プロパティを設定します。
これは設定した任意のターゲット(Transform)をカメラに追跡させる機能です。

 プレイヤーキャラクターのゲームオブジェクトをドラッグアンドドロップしてアサインしてください。


Followに追跡するゲームオブジェクトをアサインする
https://gyazo.com/b930ef6b86e512d5e0a9a5a0237261bc


 GameSceneビューを確認してみてください。カメラが設定したキャラを追跡するために位置が変更になっています。

Follow設定後のGameSceneビュー



カメラの追跡位置を合わせるために、FollowPosゲームオブジェクトを作成する


 ちゃんとアサインしているはずですが、カメラの位置が少しキャラの中心よりも下ですね。

 これはFollow対象であるキャラの中心位置(ピボット)が、キャラの真ん中ではなく、足元に設定されているためです。
そのためこのままですと、カメラは追従するのですが、ずっとキャラのモデルの足元を中心に映してしまうので正常なカメラの追従処理になりません。

 対策としまして、キャラの子オブジェクトに空のゲームオブジェクトを1つ追加します。
名前を FollowPos に変更します。このゲームオブジェクトの Transformの Y 軸の高さを調整し、キャラの中心に来るようにします。
そしてこのゲームオブジェクトをカメラに追跡させるようにします。


FollowPosゲームオブジェクト



アサイン手順動画 Followのアサイン情報をFollowPosに変更する
https://gyazo.com/a37790d48f006cd1228481be6f353c72

 
 これでカメラは正常な位置になるとともに、FollowPosゲームオブジェクトはキャラの子オブジェクトですので、キャラと一緒に動くため追従してくれています。


カメラの位置がキャラの中心をとらえている



ゲームを実行してデバッグする


 もしもMainCameraゲームオブジェクトに、キャラを追従するためのクラスがアタッチしてある場合には、それをRemoveしてください。

 ゲームを実行し、今までと同じように画面の中央にキャラがいる状態でカメラが一緒に追従して移動するか確認します。


検証動画 .ャラの移動に合わせてAreaCamera_0ゲームオブジェクトが移動する
https://gyazo.com/953d5807be1efb430deca402d32ba9c2


検証動画◆VirtualCameraと一緒にMainCameraも動く(Transformの値が同じ値になっている)
https://gyazo.com/168b18c918633b609c32b22e1c473cf3

 これで1台目のVirtual Cameraの設定は完了です。


3.2台目のVirtual Cameraを設置・設定する

CinemachineVirtualCameraコンポーネントを持つゲームオブジェクトをヒエラルキーに追加する


 【2】と同じ手順で、2台目のVirtual Cameraを作成します。

 Cinemachine => Create 2D Camera を選択してください。ヒエラルキーに CM vcam1 ゲームオブジェクトが追加されます。

ヒエラルキー画像



Followを設定する

 
 CM vcam1 ゲームオブジェクトの名前を AreaCamera_1 に変更してください。
各インスペクターなどは1台目のVirtual Cameraと変わりませんので、同じように、Follow プロパティに FollowPos ゲームオブジェクトをアサインしてください。


カメラの位置と角度を設定する


 2台目のカメラは2番目のエリアを映すカメラになりますので、1台目のカメラとは異なる位置に配置する必要があります。
複数のVirtualCameraがある場合、そのままでは設定を変更しても元の値に強制的に戻ってしまいます。

 インスペクターに Solo ボタンがありますので、そちらをクリックしてください。ボタンの色が赤く変わり、Status が standby => Live になります。
この状態にすることで、Virtual Cameraの設定を個別に変更することが可能になります。


Solo ボタン



検証動画 Solo ボタンを押した場合のカメラの変化
https://gyazo.com/58c5b3f3276c38249785014ad068d840

 2台目のカメラの Solo ボタンを押して、カメラの位置と角度を調整します。Solo ボタンを押して赤くなっていれば設定変更できます。


2つ目のカメラの設定
https://gyazo.com/4c9ab3d9f57ac0b0ed05cefd3f6fd734

この状態でゲームを実行してみると、何故かキー入力を行った際にカメラのオフセットがずれて、想定していない位置へ自動的に移動してしまいます。


検証動画 2つ目のカメラではオフセットがずれる
https://gyazo.com/b7c6fa87544ceaf93dc878808a71fe74


 これは、カメラの位置を変更すると、その前の位置を基準として差分値をオフセットとして自動的に取る設計になっているため、
2台目のカメラのオフセットに自動的に値が登録されてしまっています。そのため、予期しないカメラワークになっていました。


オフセットの設定



 差分値は不要ですので、オフセットを修正し、すべて 0 にします。また、Camera Distance の値も初期値である 10 に戻します。


オフセット修正動画
https://gyazo.com/69b48a9f204d861afadd8ddd16d7a6f6

AreaCamera_1 ゲームオブジェクトインスペクター画像 オフセットを修正



 これで正常な動きになりました。

検証動画 オフセット修正後
https://gyazo.com/1d09cfff2f0bea956aee393ed0833c09

 
 ここまででカメラ側の設定は終了です。続いてスクリプトを作成し、エリアの移動に合わせてカメラを自動で切り替える処理を記述します。


4.AreaCameraManagerクラスを作成して設定する

設計


 複数のCinemachineVirtualCameraコンポーネントを持つVirtual Cameraがヒエラルキーに存在している場合、どのカメラがゲーム画面を映すかどうかは
CinemachineVirtualCameraコンポーネントのプロパティにある Priority の値が決定をしています。基本値はすべて 10 になっています。


CinemachineVirtualCameraコンポーネントのプロパティにある Priority の値



 この値が高いほどゲーム画面を映す優先順位が高くなります。つまり、最初にゲーム画面を映すカメラの Priority の値を 10 よりも大きな値(11以上)に設定すれば
そのカメラの優先順位が一番高くなり、ゲーム画面を映すようになります。(すべて 10 のように同じ数字の場合には、ヒエラルキーに最初に作られたゲームオブジェクトが優先されます。)

 この機能を利用し、エリアが移るタイミングで、 Cinemachineの Priority を逐次変更して、キャラを映すカメラを切り替えます。
エリアを映すカメラとエリアの番号を1セットとし、エリア0のときにはカメラ0の優先順位を高くし、他のカメラの優先順位を低くします。
次のエリアに移動した際にはエリア1を映すカメラ1の優先順位を高くし、他のカメラの優先順位を低くします。

 このように優先順位をスクリプトから制御することによって、エリアの移動に合わせてカメラも切り替えていく処理が実装できます。


AreaCameraManagerスクリプトを作成する


AreaCameraManager.cs

 <= クリックすると開きます。



AreaCameraManagerゲームオブジェクトを作成し、AreaCameraManagerをアタッチする


 ヒエラルキーに空のゲームオブジェクトを追加します。
ヒエラルキーのゲームオブジェクトの何もない部分で右クリックしてメニューを表示し、Create Empty を選択してください。
名前を AreaCameraManager に変更します。作成した AreaCameraManager クラスをドラッグアンドドロップしてアタッチしてください。


AreaCameraManagerゲームオブジェクト AreaCameraManagerクラスのインスペクター画像



AreaCameraManagerの設定を行う


 AreaCameraManagerゲームオブジェクトを選択し、インスペクターにてAreaCameraManagerクラスがアタッチされているかを確認し、設定を行います。

 配列で用意した areaCameras 変数の Size を 0 から用意してあるカメラの数に変更します。ここでは 2 に変更します。
Element が追加されますので、ヒエラルキーにある AreaCamera_0 ゲームオブジェクトとAreaCamera_1 ゲームオブジェクトを Element の番号と合うように
ドラッグアンドドロップして順番にアサインします。


手順動画 AreaCameraを順番にアサインする
https://gyazo.com/259ad44455792c4c9a8d05764e3e3f17


AreaCameraManagerゲームオブジェクト アサイン後のAreaCameraManagerスクリプトのインスペクター画像



 

StageListを登録する


 もしもStageListスクリプタブル・オブジェクトにAreaの情報が登録していない場合には、ゲーム実行時にデバッグできるようにここでいくつか登録しておいてください。
仮データですので、あとでステージ製作時に正式なデータと差し替えてください。


Area0



Area1



Area2



5.ゲームを実行して動作を確認する


 2台のVirtual Cameraを設置し、カメラとエリアとの設定が終了しました。

 ゲームを実行して動作を確認します。エリアクリアを待って、次のエリアへ移動してみましょう。
カメラが自然に次のカメラに切り替わるとともに、そのカメラが前のカメラと同じようにキャラを追従するようになっていれば成功です。


検証動画
https://gyazo.com/ab10d5c7d98f603670da5db207585996


 以上でこの手順は終了です。
同じ手順でエリアの数だけカメラも順次設定していきましょう。

コメントをかく


「http://」を含む投稿は禁止されています。

利用規約をご確認のうえご記入下さい

Menu



技術/知識(実装例)

2Dおはじきゲーム(発展編)

2D強制横スクロールアクション(発展編)

3Dダイビングアクション(発展編)

2Dタップシューティング(拡張編)

レースゲーム(抜粋)

2D放置ゲーム(発展編)

3Dレールガンシューティング(応用編)

3D脱出ゲーム(抜粋)

2Dリアルタイムストラテジー

2Dトップビューアドベンチャー(宴アセット使用)

3Dタップアクション(NavMeshAgent 使用)

2Dトップビューアクション(カエルの為に〜、ボコスカウォーズ風)

VideoPlayer イベント連動の実装例

VideoPlayer リスト内からムービー再生の実装例(発展)

AR 画像付きオブジェクト生成の実装例

AR リスト内から生成の実装例(発展)

private



このサイト内の作品はユニティちゃんライセンス条項の元に提供されています。

管理人/副管理人のみ編集できます