Unityに関連する記事です

 プレイヤーキャラの移動に合わせてカメラが追従する制御処理を実装します。


<実装動画>
動画ファイルへのリンク


<実装動画>
動画ファイルへのリンク



 以下の内容で順番に実装を進めていきます。

ーカメラの追従制御の実装ー
1.Cinemachine アセットを利用して、Player をカメラが追従する機能を実装する
2.カメラの移動範囲をゲーム画面内に収める制御を実装する



 新しい学習内容は、以下の通りです。

 ・Cinemachine(シネマシン)の導入
 ・Virtual Cameraの実装方法(配置・Chinemachine Virtual Camera コンポーネントの設定)
 ・Layer Collision Matrix の設定
 ・Polygon Collider 2D コンポーネント
 ・Chinemachine Confiner コンポーネント



1.Cinemachine アセットを利用して、Player をカメラが追従する機能を実装する

1.設計


 Scene ビューにおいて製作したゲーム画面は Main Camera ゲームオブジェクトにアタッチされている Camera コンポーネントを通じて
Game ビューに映されています。そしてこれが実際のゲーム画面になります。

 今回は Cinemachine(シネマシン) という機能を利用して、Main Camera ゲームオブジェクト以外にもカメラの役割を持つコンポーネントを使い、
このカメラに映った Scene ビューの内容を Game ビューへと投影する処理を実装します。

 Cinemachine の機能を利用すると、プレイヤーキャラを追従するカメラの処理や、カメラの移動する範囲の制御などをノーコードで実装することが可能です。


2.Cinemachine


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

 例えばカメラを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...
のっぴの備忘録様
Cinemachineの使い方 Virtual Camera)
https://nopitech.com/2017/10/26/post-182/


3.Cinemachine を Unity にインポートする


 エディター内にある、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 のインポートの手順は終了です。続いて、Virtual Camera を設置していきます。


4.Virtual Camera を作成する


 Cinemachine の機能を実装していきます。

 UnityにCinemachineがインポートされると、左上のメニューの GameObject 内に Cinemachine の項目が追加されます。
古いバージョンの Unity ではそのままメニューに Cinemachine が追加されています。


Unity メニュー



Unity メニュー(古いバージョン)


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


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


 Unity Editor の左上のメニューより、GameObject => Cinemachine => 2D Camera を選択してください。
ヒエラルキーに CM vcam1 ゲームオブジェクトが追加されます。


 これは CinemachineVirtualCamera コンポーネントを持つゲームオブジェクトであり、
この CinemachineVirtualCamera コンポーネントを持つゲームオブジェクトを Virtual Camera と総称しています

 今回は 2D Camera を指定して新規の Visual Camera を作成しているので、最初から 2D 用の設定がされているカメラが作成されています。


ヒエラルキー



インスペクター画像



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


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


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



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



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

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


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


3Dゲームにおいて2D環境のカメラを適用する場合

 Unityhub でのプロジェクトの選択時に3Dを選択している場合、Camera コンポーネントの Projection の設定が自動的に 3D用の Perspective に設定されています。
この状態ですと 2D空間の描画が正常に行えないため、Projection の設定を Orthographic に変更してください。カメラのサイズが画面内に収まるようになります。


<Main Camera ゲームオブジェクト インスペクター画像>



<Sceneビュー画像(白い枠がカメラの描画領域です)>




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


 CM vcam1 ゲームオブジェクトのコンポーネントを確認しましょう。

 Cinemachine Virtual Camera コンポーネントがアタッチされています。このコンポーネントによって Virtual Camera が機能しています。
また Main Camera ゲームオブジェクトにアタッチされている Cinemachine Brain コンポーネントとこの Cinemachine Virtual Camera コンポーネントとが連動しています。

 主にカメラの機能を設定しているのは、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 ゲームオブジェクト インスペクター画像 Body の詳細





 Cinemachine Virtual Camera コンポーネントは Body の設定により、Virtual Camera がどのような振る舞いをするかを決定しています。

 Visual Camera を作成する際に 2D Camera で作成した場合には、このBodyの設定が Framing Transposer になります。
これは 2D用に Virtual Camera を振る舞うようにする設定になります。


CM vcam1 ゲームオブジェクト インスペクター画像 Body の詳細




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


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

 今回カメラに追跡させたい対象はプレイヤーキャラのゲームオブジェクトです。
Follow にヒエラルキーにある Player ゲームオブジェクトをドラッグアンドドロップしてアサインしてください。


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



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


Follow設定後のGameSceneビュー




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


 ゲームを実行し、今までと同じように画面の中央にキャラがいる状態でカメラが一緒に追従して移動するか確認します。
また、Virtual Camera の情報が、Main Camera とリンクしているかも合わせて確認を行います。


<実装動画 Chinemachine Virtual Camera コンポーネントの Follow に設定した対象物(Player ゲームオブジェクト)の移動に合わせて CM vcam1 ゲームオブジェクトが移動する>
動画ファイルへのリンク


<検証動画◆Virtual Camera と一緒に Main Camera も動く(Transformの値が同じ値になっている)>
動画ファイルへのリンク


 これで Virtual Camera の設定は完了です。どの機能がどのように利用されているのかをしっかりと確認しておいてください。
また、Unity ではインスペクターを活用することで、色々な情報を確認しながらデバッグすることが出来ます。
この方法を覚えて自分のゲーム製作の際に活用してください。


2.カメラの移動範囲をゲーム画面内に収める制御を実装する

1.設計


 Virtual Camera がプレイヤーキャラの移動に合わせて追従するようになりました。
そのためプレイヤーキャラを常にゲーム画面の中央位置に映した状態でゲームが進行するようになりました。

 実際にプレイヤーキャラを移動していて、カメラの制御に問題があることに気づいたと思います。

 プレイヤーキャラをゲーム画面の端まで移動した際に、プレイヤーキャラを中心にカメラが移動していることにより、
ゲーム画面内に、作りこんでいない部分が映りこんでしまっています。


Game ビュー画像(画面下部にゲームのタイルのない背景部分が見えてしまっている)
動画ファイルへのリンク


 このままですとゲーム画面には映したくない部分まで映ってしまうことになりますので、
この部分を制御する処理を考えて実装します。



 対応方法はいくつかありますが、今回は Cinemachine のカメラを利用していますので、こちらの可動範囲を制限する処理によって対応しようと思います。

 具体的には、ゲーム画面に映したい大きさでコライダーを作成して、そのコライダーの内側に Cinemachine のカメラを閉じ込める機能を利用することにより、
プレイヤーキャラがゲーム画面の端まで移動した際には、カメラの移動がコライダーの範囲内で移動を制限し、ゲーム画面外を映さないように制御を施していきます。


<実装動画>
動画ファイルへのリンク


 上記の動画の Sceneビュー を確認してください。白い長方形がカメラの映している範囲です。
プレイヤーキャラが画面の下まで移動するとカメラが画面外には移動せずに、プレイヤーキャラのみがカメラの範囲内で移動し、カメラはコライダーの設定した範囲内で収まっています
そして、プレイヤーキャラが画面内に再度移動することに合わせて、またプレイヤーキャラを画面の中央に沿えてカメラの移動が始まっています

 この機能を実装して、ゲーム画面外を映さないようにします。 


2.CameraConfiner ゲームオブジェクトを作成する


 ヒエラルキーの空いている部分で右クリックをしてメニューを開き、Create Empty を選択して、新しいゲームオブジェクトを1つ作成します。
名前を Camera Confiner に変更します。


ヒエラルキー画像



 このゲームオブジェクトにコライダーを設定し、そのコライダーの範囲内のみを Chinemachine のカメラが移動するようにしていきます。
 

3.新しい Layer を作成して、Camera Confiner ゲームオブジェクトに設定する


 ヒエラルキーの Camera Confiner ゲームオブジェクトを選択して、インスペクター上部にある Layer を選択します。
プルダウンメニューが開きますので、一番下にある Add Layer… を選択します。インスペクターの表示が Tags & Layers に切り替わり、Layer の編集が可能になります。

 Layers を選択し、Layers 6 以降に Confiner を登録してください。


Tags & Layers インスペクター画像(ここでは Layers 6 に登録していますが任意です)




 再度、Camera Confiner ゲームオブジェクトを選択して、インスペクターの Layer を選択します。
プルダウンメニューに Confiner が追加されていますので、そちらを選択します。


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

 
 
 続いて、この Confiner レイヤーの設定を行います。


4.Layer Collision Matrix の設定を行う


 レイヤーの設定を行うことにより、特定のレイヤー間の接触判定のみを感知したり、あるいは特定のレイター間を無視したりすることが出来ます。

 Unity Editor の左上のメニューより、Edit => Project Settings を選択します。
Project Settings ウインドウが開きますので、左側の項目より、Physics 2D を選択します。
右側の内容が選択した項目の内容に切り替わりますので、一番下までスクロールしてください。
Layer Collision Matrix という部分が表示されます。

 Confiner のレイヤーのチェックをすべて外して、下記の画像のようにしてください。


Layer Collision Matrix



 これで Confiner のレイヤーが設定されているゲームオブジェクトのコライダーは、
いずれのレイヤーのゲームオブジェクトのコライダーとも接触判定を行わない状態になりました。

 以上で設定は完了です。


5.Camera Confiner ゲームオブジェクトに Polygon Collider 2D コンポーネントを追加して設定を行う


 ヒエラルキーの Camera Confiner ゲームオブジェクトを選択し、インスペクターの一番下にある Add Component を選択します。
Polygon Collider 2D コンポーネントを探して追加します。


インスペクター画像


 このコライダーのサイズを設定し、【Chinemachineのカメラの稼働できる範囲】として制御させます。



 このコンポーネントは複数の頂点を移動して、形状を自由に変更できるタイプのコライダーになります。
初期設定では頂点の数が 5 になっていますので、こちらを設定しやすいように頂点は 4 つに設定してからサイズを変更します。

 Polygon Collider 2D コンポーネントの Points を 5 => 4 に変更します。これで頂点の数が 4 つになります。

 Edit Collider のボタンを押して、Sceneビュー にてタイルの大きさに合わせてサイズを設定してください。
頂点を選択してドラッグアンドドロップすることによって、頂点を自由に移動することができますので、左上、左下、右上、右下と頂点を設定してください。

 大切なポイントとしては、カメラを収めたい範囲として設定を行いますので、プレイヤーキャラの実際に移動できる範囲内に頂点を配置するといいでしょう
例えば、下記のようにプレイヤーキャラの移動範囲を四方を山のタイルが囲んでいますが、その内側に頂点を配置するようにしてください。

 頂点の数字が細かくなりすぎる場合には、近い数字に丸めてください。
インスペクターの参考画像の数字は、自分のゲーム画面のサイズに合わせてください。


インスペクター画像



Sceneビューの Polygon Collider のサイズ(わかりやすいように Grid_Base ゲームオブジェクトは非表示にしています)



Collider の検証動画
動画ファイルへのリンク


 以上で設定は完了です。最後に、このコンポーネントを制御させるための機能を追加します。


6.CM vcam1 ゲームオブジェクトに Cinemachine Confiner 2D コンポーネントを追加して設定を行う


 ヒエラルキーの CM vcam1 ゲームオブジェクトを選択し、Chinemachine Virtual Camera コンポーネント 内の Extensions の部分にある Add Extension を選択します。
プルダウンメニューが開きますので、Chinemachine Confiner 2D を選択してください。新しく Chinemachine Confiner 2D コンポーネントが追加されます。

 この機能を利用することで、Polygon Collider 2D コンポーネントで設定した範囲をCinemachine のカメラの稼働範囲として設定することが可能になります。


インスペクター画像





 Chinemachine Confiner 2D コンポーネントの設定を行います。

 Bounding Shape 2D の部分に、Camera Confiner ゲームオブジェクトをドラッグアンドドロップしてアサインします。
Polygon Collider 2D コンポーネントが自動的に登録されます。


インスペクター画像


 
 以上で設定は完了です。



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


 すべての設定が完了しました。どの機能がどのようにつながっているかを確認してから、ゲームを実行してください。

 プレイヤーキャラを移動させてみてください。画面の端に移動した際に、Polygon Collider 2D コンポーネントのコライダーの範囲内でカメラが移動を停止するようになれば制御成功です。


<実装動画>
動画ファイルへのリンク

 
 今回は Cinemachine の機能を利用することで、すべてノーコードで(スクリプトをかかずに)実装を行うことができました。



 以上でこの手順は終了です。

コメントをかく


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

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

Menu



技術/知識(実装例)

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

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

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

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

レースゲーム(抜粋)

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

3D脱出ゲーム(抜粋)

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

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

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

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

VideoPlayer イベント連動の実装例

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

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

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

private



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

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