３Ｄタップアクション 手順１０
最終更新：
orika_ex_miyako 2023年02月19日(日) 21:01:06履歴
プレイヤーの移動に合わせてカメラが追従して移動する機能を実装します。
＜実装動画＞
動画ファイルへのリンク
以下の内容で順番に実装を進めていきます。
手順１０ ーカメラの追従機能ー
＜新しく学習する内容＞
Cinemachineとは
Cinemachine（シネマシン）は、Unityが無料で提供している、カメラの機能をまとめた Packege になります。
対象を指定することでカメラが自動で追尾したり、複数のカメラをゲーム画面内に配置してそれらの制御をしたりできる機能などを実装することが可能です。
例えば、カメラを2台用意し、ギミックを操作する際にカメラを切り替えてみると、下記の動画のようなシームレスなカメラワークを作ることが出来ます。
2台のカメラが切り替わるときには、前のカメラと次のカメラとは、自動的に補間処理されてスムースにつながります。これもCinemachineの機能の1つです。
＜複数カメラの切り替え制御の実装例動画＞
動画ファイルへのリンク
なおCinemachineは機能が膨大であるため、この手順では使用する機能についてしか説明をしていません。
詳しくは自分で調べて実装を行ってみましょう。説明を読みながらいじっていると自然に機能が分かってきます。
参考サイト
１．設計
MainCamera1台を使ってゲームシーンを映していくこともできますが、今回は演出の一環としまして、このCinemachineの機能を使っていきます。
最終的には、ステージを移動する際にカメラを順次切り替えていくことで３Ｄ空間を上手く演出に取り入れたステージを作成することを目的にしていきます。
まずは今回の設計では、プレイヤーの追従を行う機能のみを実装していきます。
プレイヤーを横方向から見たカメラワークでゲームが進行するようにしてみましょう。
２．CinemachineをUnityに導入（インポート）する
＜１．PackageManagerビューを使って Cinemachine を選択する＞
エディター内にある、PackageManagerビューを選択します。
もしもエディター内にPackageManagerビューがない場合には、Unityの左上のメニューから、Window => PackageManager を選択してください。
PackageManagerビュー内の左上の Packages を選択するとプルダウンメニューが表示されますので、この中から Unity Registry を選択します。
読み込みが始まり、PackageManagerビュー内の左側の項目に複数のアセットが表示されますので、この中から Cinemachine を探してクリックください。
Cinemachine のバージョンについては最新のものが自動的に表示されますので、変更する必要はありません。
Packagesを Unity Registry に変更
手順動画 Packagesを Unity Registry に変更
動画ファイルへのリンク
Cinemachineのインポート(画像とバージョンが異なる場合があります)
Cinemachine 内の右下にある Download ボタンをクリックします。Downloadが終了すると Import ボタンになりますので、そちらもクリックしてください。
Importする内容を選択するウインドウが開きますので、すべての内容の Import を行いますので、そのまま Import ボタンを押してください。
プログレス表示が出て、しばらくすると Import が完了します。Import された Cinemachine は、Assets 内ではなくて Packages 内に追加されます。
Cinemachine フォルダの場所
以上でCinemachineのImportの手順は終了です。続いて、Virtual Cameraを設置していきます。
３．1台目のVirtual Cameraを設置・設定する
早速Cinemachineの機能を活用していきます。
UnityにCinemachineがインポートされると、左上のメニュー内の GameObject 内に Cinemachine の項目が追加されます。
(古いバージョンの場合には、直接メニューに Cinemachine の項目が追加されます)
Unity メニュー
この中に Virtual Cameraをゲームシーンに追加するコマンドが含まれてますので、実行していきましょう。
各項目はすべて Virtual Cameraを追加するメニューになっており、一番上の Virtual Camera がプレーンの状態で追加されるコマンドです。
それ以外のコマンドはプレーンの状態ではなく、Virtual Cameraにカスタム設定を追加した状態で追加してくれるテンプレート的なコマンドになっています。
参考サイト
＜１．CinemachineVirtualCamera コンポーネントを持つゲームオブジェクトをヒエラルキーに追加する＞
GameObject => Cinemachine => Virtual Camera を選択してください。ヒエラルキーに CM vcam1 ゲームオブジェクトが追加されます。
これは CinemachineVirtualCamera コンポーネントを持つゲームオブジェクトであり、特別な設定がない基本的なものです。
このコンポーネントを持つゲームオブジェクトを Virtual Camera と総称しています。
ヒエラルキー例
＜２．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 ゲームオブジェクトにアタッチされているコンポーネントの種類は、最初に選択したテンプレートにより設定されます。
今回は 3D(URP)コアを選択しているため、URP の設定が可能なコンポーネントがアタッチされています。
MainCamera ゲームオブジェクト(URP の場合) インスペクター画像(Transform の値は参照しないでください)
以下は参考用です。こちらの画像は URP ではないテンプレートでの MainCamera ゲームオブジェクトの設定です。
MainCamera ゲームオブジェクト(URP ではない場合) インスペクター画像(Transform の値は参照しないでください)
＜３．CM vcam1 ゲームオブジェクトの設定を確認する＞
CM vcam1 ゲームオブジェクトの名前は任意の名前に変更して構いません。
コンポーネントを確認しましょう。
CinemachineVirtualCamera コンポーネントがアタッチされています。このコンポーネントによって VirtualCamera が機能しています。
また MainCamera にアタッチされている CinemachineBrain コンポーネントとこのコンポーネントとが連動しています。
主にカメラの機能を設定しているのは、Body と Aim という設定です。
Body は、カメラをどのように制御するのかを設定する内容です。初期設定で Transposer になっています。
この設定にしておくと、カメラが Follow 対象として指定したゲームオブジェクト(今回はプレイヤー)を、一定の距離を置いて追従します。
Aim は、カメラの回転の設定です。初期設定で Composer になっています。
この設定にしておくと、Look At 対象に指定したゲームオブジェクトをカメラフレーム内に維持します。
今回はこちらの設定はそのまま利用します。
参考サイト
CM vcam1 ゲームオブジェクト インスペクター画像
CinemachineVirtualCamera コンポーネントの Body の設定が、どのように Virtual Camera が振る舞いをするかを決定しています。
Virtual Camera で作成した場合には、このBodyの設定が Transposer になります。これは ３Ｄ用に Virtual Camera を振る舞うようにする設定です。
現在は Body と Aim の部分に黄色い警告が表示されていると思います。これはカメラの設定に不備があることを示す警告です。
このうち、Body については設定を行っていくことで解消されますので、いまは警告は表示されている状態で問題ありません。
４．Virtual Camera にキャラを追跡させるための Follow と Body の設定を行う
＜１．Follow の設定を行う＞
CM vcam1 ゲームオブジェクトの CinemachineVirtualCamera コンポーネントにある Follow プロパティを設定します。
これはカメラの追跡対象を設定する部分です。
Follow プロパティに、ヒエラルキーにあるプレイヤーキャラクターのゲームオブジェクト(GamblerCat)をドラッグアンドドロップしてアサインしてください。
Follow にアサインする
GameSceneビューを確認してみてください。カメラが設定したキャラを追跡するため、位置が変更になっています。
これで Virtual Camera はプレイヤーのキャラクターである GamblerCat ゲームオブジェクトを追跡するようになりました。
こちらの設定を行うと、Body に表示されていた警告が解消されます。
＜２．Body の設定を行う＞
次に Body の設定を行います。これは Follow に設定した任意のターゲット（Transform）に対して、カメラがどのように追跡を行うかを設定します。
初期設定では Transposer になっているため、こちらを Framing Transposer に設定を変更してください。
＜Framing Transposer＞
https://docs.unity3d.com/ja/Packages/com.unity.cin...
Body を設定を変更すると、インスペクターの表示内容が選択した Body の設定に応じた内容に切り替わります。
２か所、設定を行います。
最初は CameraDistance です。この値が 10 になっています。
こちらがカメラが Follow する対象に対してどの位の距離で追跡するかを設定します。
4.5 〜 5 前後に変更すると、カメラと Follow 対象の距離が近くなります。適宜な距離に調整してください。
次は SoftZone です。
SoftZone は Game ビューで確認することができる、青と赤の部分のうち、青い部分のことです。
Game ビューで確認できる SoftZone
SoftZone、つまり、Game ビューの青い部分がカメラが追跡を行う範囲です。
この範囲内に Follow 対象が入るようにカメラが追従します。(DeadZone という他の設定もあります)
SoftZone には Width と Height の2つがあり、SoftZoneWidth と SoftZoneHeight の値がそれぞれ 0.8 に設定されています。
こちらは水平方向と垂直方向に対して、どの位の位置で Follow の対象を追跡するかを設定します。
常にピッタリとくっつく形でカメラを追従させるには、この SoftZone の設定値をどちらも 0 に設定します。
少し遊びを持たせるのであれば、0.2 〜 0.3 前後で設定しておきます。調整を行いながら設定してください。
これはインスペクターでも操作できますし、Game ビューで青い部分をドラッグアンドドロップして制御することも出来ます。
SoftZone 0.3 前後で設定後の Game ビュー
インスペクター
＜手順動画 SoftZone の設定＞
動画ファイルへのリンク
以上で完成です。
他にも多くの設定があります(Damping や DeadZone など)が、まずは初期設定のままで問題ありませ。
調べて調整してみると、覚えていくことが出来ます。
ここまでの設定を反映した状態のインスペクター画像です。(Transform については参考にしないでください。)
CM vcam1 ゲームオブジェクト インスペクター画像
５．Virtual Camera の Aim の設定を行う
先ほど Body 設定に Framing Transposer を設定しました。
マニュアルにも記載されていますが、FramingTransposer を設定している場合 LookAt プロパティは機能しません（ターゲットを無視します）。
Follow プロパティのターゲットのみが使用されます。
そのままでも問題ありませんが、LookAt プロパティに設定がないと、Aim 設定部分に警告が表示されたままになってしまうため、そちらを解消します。
Aim の設定を Do nothing に設定してください。
設定すると、Aim に表示されていた警告が解消されます。
CM vcam1 ゲームオブジェクト インスペクター画像
６．ゲームを実行してデバッグする
準備ができましたので、ゲームを実行し、画面の中央にキャラがいる状態でカメラが一緒に追従して移動するか確認します。
Game ビューだけではなく、ヒエラルキーにある Main Camera ゲームオブジェクトや、CM vcam1 ゲームオブジェクトを選択しておいて、
それぞれの Transform の Position の値が同期して更新されるかも確認しておいてください。
検証動画 キャラの移動に合わせてカメラが移動する(Virtual Camera と MainCamera の両方の Transform の値が更新されます)
動画ファイルへのリンク
以上でこの手順は終了です。
=> 次は 手順１１ −ポストプロセッシングの実装− です。
＜実装動画＞
動画ファイルへのリンク
以下の内容で順番に実装を進めていきます。
手順１０ ーカメラの追従機能ー
＜新しく学習する内容＞
・Cinemachineの導入 ・Virtual Cameraの実装方法(配置・設定)
Cinemachineとは 
Cinemachine（シネマシン）は、Unityが無料で提供している、カメラの機能をまとめた Packege になります。
対象を指定することでカメラが自動で追尾したり、複数のカメラをゲーム画面内に配置してそれらの制御をしたりできる機能などを実装することが可能です。
例えば、カメラを2台用意し、ギミックを操作する際にカメラを切り替えてみると、下記の動画のようなシームレスなカメラワークを作ることが出来ます。
2台のカメラが切り替わるときには、前のカメラと次のカメラとは、自動的に補間処理されてスムースにつながります。これもCinemachineの機能の1つです。
＜複数カメラの切り替え制御の実装例動画＞
動画ファイルへのリンク
なおCinemachineは機能が膨大であるため、この手順では使用する機能についてしか説明をしていません。
詳しくは自分で調べて実装を行ってみましょう。説明を読みながらいじっていると自然に機能が分かってきます。
参考サイト
Unity公式様
Cinemachine を使ってカメラを設定しましょう
https://forpro.unity3d.jp/unity_pro_tips/2019/07/2...
LIGHT11 様
【Unity】Cinemachineの全機能を解説！ありとあらゆるカメラワークを高クオリティに作る方法総まとめ
https://light11.hatenadiary.com/entry/2019/10/24/2...
１．設計
MainCamera1台を使ってゲームシーンを映していくこともできますが、今回は演出の一環としまして、このCinemachineの機能を使っていきます。
最終的には、ステージを移動する際にカメラを順次切り替えていくことで３Ｄ空間を上手く演出に取り入れたステージを作成することを目的にしていきます。
まずは今回の設計では、プレイヤーの追従を行う機能のみを実装していきます。
プレイヤーを横方向から見たカメラワークでゲームが進行するようにしてみましょう。
２．CinemachineをUnityに導入（インポート）する
＜１．PackageManagerビューを使って Cinemachine を選択する＞
エディター内にある、PackageManagerビューを選択します。
もしもエディター内にPackageManagerビューがない場合には、Unityの左上のメニューから、Window => PackageManager を選択してください。
PackageManagerビュー内の左上の Packages を選択するとプルダウンメニューが表示されますので、この中から Unity Registry を選択します。
読み込みが始まり、PackageManagerビュー内の左側の項目に複数のアセットが表示されますので、この中から Cinemachine を探してクリックください。
Cinemachine のバージョンについては最新のものが自動的に表示されますので、変更する必要はありません。
Packagesを Unity Registry に変更
手順動画 Packagesを Unity Registry に変更
動画ファイルへのリンク
Cinemachineのインポート(画像とバージョンが異なる場合があります)
Cinemachine 内の右下にある Download ボタンをクリックします。Downloadが終了すると Import ボタンになりますので、そちらもクリックしてください。
Importする内容を選択するウインドウが開きますので、すべての内容の Import を行いますので、そのまま Import ボタンを押してください。
プログレス表示が出て、しばらくすると Import が完了します。Import された Cinemachine は、Assets 内ではなくて Packages 内に追加されます。
Cinemachine フォルダの場所
以上でCinemachineのImportの手順は終了です。続いて、Virtual Cameraを設置していきます。
３．1台目のVirtual Cameraを設置・設定する
早速Cinemachineの機能を活用していきます。
UnityにCinemachineがインポートされると、左上のメニュー内の GameObject 内に Cinemachine の項目が追加されます。
(古いバージョンの場合には、直接メニューに Cinemachine の項目が追加されます)
Unity メニュー
この中に Virtual Cameraをゲームシーンに追加するコマンドが含まれてますので、実行していきましょう。
各項目はすべて Virtual Cameraを追加するメニューになっており、一番上の Virtual Camera がプレーンの状態で追加されるコマンドです。
それ以外のコマンドはプレーンの状態ではなく、Virtual Cameraにカスタム設定を追加した状態で追加してくれるテンプレート的なコマンドになっています。
参考サイト
のっぴの備忘録 様
Cinemachineの使い方� �Virtual Camera）
https://nopitech.com/2017/10/26/post-182/
＜１．CinemachineVirtualCamera コンポーネントを持つゲームオブジェクトをヒエラルキーに追加する＞
GameObject => Cinemachine => Virtual Camera を選択してください。ヒエラルキーに CM vcam1 ゲームオブジェクトが追加されます。
これは CinemachineVirtualCamera コンポーネントを持つゲームオブジェクトであり、特別な設定がない基本的なものです。
このコンポーネントを持つゲームオブジェクトを Virtual Camera と総称しています。
ヒエラルキー例
＜２．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 ゲームオブジェクトにアタッチされているコンポーネントの種類は、最初に選択したテンプレートにより設定されます。
今回は 3D(URP)コアを選択しているため、URP の設定が可能なコンポーネントがアタッチされています。
MainCamera ゲームオブジェクト(URP の場合) インスペクター画像(Transform の値は参照しないでください)
以下は参考用です。こちらの画像は URP ではないテンプレートでの MainCamera ゲームオブジェクトの設定です。
MainCamera ゲームオブジェクト(URP ではない場合) インスペクター画像(Transform の値は参照しないでください)
＜３．CM vcam1 ゲームオブジェクトの設定を確認する＞
CM vcam1 ゲームオブジェクトの名前は任意の名前に変更して構いません。
コンポーネントを確認しましょう。
CinemachineVirtualCamera コンポーネントがアタッチされています。このコンポーネントによって VirtualCamera が機能しています。
また MainCamera にアタッチされている CinemachineBrain コンポーネントとこのコンポーネントとが連動しています。
主にカメラの機能を設定しているのは、Body と Aim という設定です。
Body は、カメラをどのように制御するのかを設定する内容です。初期設定で Transposer になっています。
この設定にしておくと、カメラが Follow 対象として指定したゲームオブジェクト(今回はプレイヤー)を、一定の距離を置いて追従します。
Aim は、カメラの回転の設定です。初期設定で Composer になっています。
この設定にしておくと、Look At 対象に指定したゲームオブジェクトをカメラフレーム内に維持します。
今回はこちらの設定はそのまま利用します。
参考サイト
Unity 公式マニュアル
Transposer
https://docs.unity3d.com/ja/Packages/com.unity.cin...
Unity 公式マニュアル
Transposer
https://docs.unity3d.com/ja/Packages/com.unity.cin...
CM vcam1 ゲームオブジェクト インスペクター画像
CinemachineVirtualCamera コンポーネントの Body の設定が、どのように Virtual Camera が振る舞いをするかを決定しています。
Virtual Camera で作成した場合には、このBodyの設定が Transposer になります。これは ３Ｄ用に Virtual Camera を振る舞うようにする設定です。
現在は Body と Aim の部分に黄色い警告が表示されていると思います。これはカメラの設定に不備があることを示す警告です。
このうち、Body については設定を行っていくことで解消されますので、いまは警告は表示されている状態で問題ありません。
４．Virtual Camera にキャラを追跡させるための Follow と Body の設定を行う
＜１．Follow の設定を行う＞
CM vcam1 ゲームオブジェクトの CinemachineVirtualCamera コンポーネントにある Follow プロパティを設定します。
これはカメラの追跡対象を設定する部分です。
Follow プロパティに、ヒエラルキーにあるプレイヤーキャラクターのゲームオブジェクト(GamblerCat)をドラッグアンドドロップしてアサインしてください。
Follow にアサインする
GameSceneビューを確認してみてください。カメラが設定したキャラを追跡するため、位置が変更になっています。
これで Virtual Camera はプレイヤーのキャラクターである GamblerCat ゲームオブジェクトを追跡するようになりました。
こちらの設定を行うと、Body に表示されていた警告が解消されます。
＜２．Body の設定を行う＞
次に Body の設定を行います。これは Follow に設定した任意のターゲット（Transform）に対して、カメラがどのように追跡を行うかを設定します。
初期設定では Transposer になっているため、こちらを Framing Transposer に設定を変更してください。
＜Framing Transposer＞
https://docs.unity3d.com/ja/Packages/com.unity.cin...
Body を設定を変更すると、インスペクターの表示内容が選択した Body の設定に応じた内容に切り替わります。
２か所、設定を行います。
最初は CameraDistance です。この値が 10 になっています。
こちらがカメラが Follow する対象に対してどの位の距離で追跡するかを設定します。
4.5 〜 5 前後に変更すると、カメラと Follow 対象の距離が近くなります。適宜な距離に調整してください。
次は SoftZone です。
SoftZone は Game ビューで確認することができる、青と赤の部分のうち、青い部分のことです。
Game ビューで確認できる SoftZone
SoftZone、つまり、Game ビューの青い部分がカメラが追跡を行う範囲です。
この範囲内に Follow 対象が入るようにカメラが追従します。(DeadZone という他の設定もあります)
SoftZone には Width と Height の2つがあり、SoftZoneWidth と SoftZoneHeight の値がそれぞれ 0.8 に設定されています。
こちらは水平方向と垂直方向に対して、どの位の位置で Follow の対象を追跡するかを設定します。
常にピッタリとくっつく形でカメラを追従させるには、この SoftZone の設定値をどちらも 0 に設定します。
少し遊びを持たせるのであれば、0.2 〜 0.3 前後で設定しておきます。調整を行いながら設定してください。
これはインスペクターでも操作できますし、Game ビューで青い部分をドラッグアンドドロップして制御することも出来ます。
SoftZone 0.3 前後で設定後の Game ビュー
インスペクター
＜手順動画 SoftZone の設定＞
動画ファイルへのリンク
以上で完成です。
他にも多くの設定があります(Damping や DeadZone など)が、まずは初期設定のままで問題ありませ。
調べて調整してみると、覚えていくことが出来ます。
ここまでの設定を反映した状態のインスペクター画像です。(Transform については参考にしないでください。)
CM vcam1 ゲームオブジェクト インスペクター画像
５．Virtual Camera の Aim の設定を行う
先ほど Body 設定に Framing Transposer を設定しました。
マニュアルにも記載されていますが、FramingTransposer を設定している場合 LookAt プロパティは機能しません（ターゲットを無視します）。
Follow プロパティのターゲットのみが使用されます。
そのままでも問題ありませんが、LookAt プロパティに設定がないと、Aim 設定部分に警告が表示されたままになってしまうため、そちらを解消します。
Aim の設定を Do nothing に設定してください。
設定すると、Aim に表示されていた警告が解消されます。
CM vcam1 ゲームオブジェクト インスペクター画像
６．ゲームを実行してデバッグする
準備ができましたので、ゲームを実行し、画面の中央にキャラがいる状態でカメラが一緒に追従して移動するか確認します。
Game ビューだけではなく、ヒエラルキーにある Main Camera ゲームオブジェクトや、CM vcam1 ゲームオブジェクトを選択しておいて、
それぞれの Transform の Position の値が同期して更新されるかも確認しておいてください。
検証動画 キャラの移動に合わせてカメラが移動する(Virtual Camera と MainCamera の両方の Transform の値が更新されます)
動画ファイルへのリンク
以上でこの手順は終了です。
=> 次は 手順１１ −ポストプロセッシングの実装− です。
コメントをかく