Cinemachineで見下ろし視点のカメラを作る

Cinemachineで 見下ろし視点のカメラを作る Tatsuhiko Yamamura @ Unity

Cinemachineとは？

Cinemachineとは Cinemachineの説明 • 強力なカメラ制御機能 • 便利な機能群 • 対象を追跡（座標/向き） • 被写体を画面のどの位置に表示するか • 壁のめり込み防止 • 手ブレ・衝撃による振動

Cinemachineとは Cinemachineを導入する方法 • PackageManagerからImport • QuickSearchでCamera関連の パッケージを検索してインポート

Cinemachineとは Virtual Cameraの考え方 ※本来は沢山の項目があるので 縦に長いUIが表示されます。 本スライドでは説明のため いくつかの項目を省略しています。 Virtual Cameraを使う上で、 ココだけ覚えておけば良いポイント 本来の UI全体図

Cinemachineとは Virtual Cameraの考え方 被写体を（座標的に） 追跡するための設定群 被写体の後ろを追う カートに乗って移動する マウスで被写体の周囲を回る その他 被写体の座標が変われば位置を追う

Cinemachineとは Virtual Cameraの考え方 被写体を（方向的に） 目で追う為の設定群 被写体の座標が変われば向きを変える

Cinemachineとは Virtual Cameraの考え方 1 一つのVirtual Cameraを 使い回さず、用途や構図毎に Virtual Cameraを用意。 Cameraは座標や設定は、 最も優先度の高いVirtual Camera の設定を使用する。 2 3 Cameraコンポーネントは Virtual Cameraの間を移動する

Cinemachineで 見下ろし型のカメラを作る

見下ろし型のカメラを作る 見下ろし型のカメラにはFraming Transposerを使う カメラ座標に関する設定 カメラの向きに関する設定 プレイヤーを指定 設定しなくても良い Framing Transposer 設定しない （Do nothing）

見下ろし型のカメラを作る Framing Transposerとは？ • 元々は2D向け • スクリーン上で被写体を 表示する位置を設定できる。 • 被写体がスクリーンの指定位置に 来るようにカメラの座標を 動かすカメラリグ。 • 今回のケースではカメラは 自主的に回転しないので、 FramingでOK

どうやって使うの？ Framing Transposerを見下ろし型カメラで使う手順

見下ろし型のカメラを作る １ Framing Transposerを3Dゲームで使う手順（1/6） • BodyにFraming Transposerを設定

2 見下ろし型のカメラを作る Framing Transposerを3Dゲームで使う手順（2/6） • BodyにFraming Transposerを設定 • Followの対象に被写体を指定 被写体のpivotに合わせて カメラが移動する

3 見下ろし型のカメラを作る Framing Transposerを3Dゲームで使う手順（3/6） • BodyにFraming Transposerを設定 • Followの対象に被写体を指定 • TransformのRotationで角度をつける Rotationを変更すると 被写体を中心にカメラが回転

4 見下ろし型のカメラを作る Framing Transposerを3Dゲームで使う手順（4/6） • BodyにFraming Transposerを設定 • Followの対象に被写体を指定 • TransformのRotationで角度をつける • Distanceで被写体との距離を設定 Distanceの大きさで 被写体とカメラの距離が決定 （近づきたい場合は小さい値を設定）

5 見下ろし型のカメラを作る Framing Transposerを3Dゲームで使う手順（5/6） • BodyにFraming Transposerを設定 • Followの対象に被写体を指定 • TransformのRotationで角度をつける • Distanceで被写体との距離を設定 • 被写体を表示する位置を調整 被写体を画面の何処に写すのかを設定 （斜めにすると少し手前が見えにくいので、上に調整したり） キャラクターの表示位置を調整 （ピボットが足元の場合、頭の位置にくるようにオフセットを設定）

6 見下ろし型のカメラを作る Framing Transposerを3Dゲームで使う手順（6/6） • BodyにFraming Transposerを設定 • Followの対象に被写体を指定 • TransformのRotationで角度をつける • Distanceで被写体との距離を設定 • 被写体を表示する位置を調整 • 上の５つを微調整して完成！ 良い感じに見えるように調整（大事）

Framing Transposerの応用 常にキャラクターを表示しつつ、対象を表示する ターゲットココに表示するようにAimを調整 キャラでココに表示されるようにBodyを調整 プレイヤーを常に 画面左下に表示する設定 右上に巨大ロボを 表示する設定

良い感じのカメラにするための＋１ プレイヤーが見たいモノを見せる

プレイヤーが見たい情報を表示する 状況により見たいものが違う 状況 アイテム ギミック探索中 ボスや敵と戦闘中 移動中 ギミック探して ウロウロ 画面外のボスから 即死攻撃をプレゼント カメラも ウロウロ カメラに 期待する動作 周辺を表示したい 見えない 移動先を表示したい ボスを常に表示したい

プレイヤーが見たい情報を表示する アイテム/ギミック探索中（狭い範囲をウロウロ） • アイテム探索時は背景を見たい • カメラの追跡速度を落とす • キャラが高速で瞬間移動する場合、 カメラが被写体を追う速度 青い枠で影響する値。 値を高めに設定 設定高めにすると混乱が少ない カメラが動作しない範囲 透明の枠として表現 値を少し大きめに設定 プレイヤーが動き回っても カメラは余り動かない

プレイヤーが見たい情報を表示する 移動先の地形を見たい • 被写体の移動速度に応じて カメラが先回りする • 急停止等で急激に変化するのを 回避するためSmoothingで 変化をまろやかにする 被写体の移動先にカメラを 動かす設定と、 目標位置への到達速度 値を高めに設定 カメラが被写体を追う速度 青い枠で影響する値 値を低めに設定 カメラの中心点がプレイヤーの移動先になる ※脳が予測できないカメラの急激な変化は酔うので、高速移動からの急停止がある場合はコレをしないのも手

プレイヤーが見たい情報を表示する アンカー 切り替え線 移動方向と見たい範囲が一致するなら、 SoftZonoe範囲内でキャラを追跡 移動先の地形を見たい 移動方向 • ScreenXとScreenYを 状況に応じて移動する 見たい範囲 • 例）キャラクターがスクリーン上で 指定の座標（アンカー切り替え線）を出たら、 ScreenXを反対側に動かす 見たい範囲の反対に行きたい場合 アンカーの線を超えたら 移動方向 見たい範囲 • 例）プレイヤーの移動に応じて ScreenXやScreenYを動かす ScrenXの値を更新して 画面の中心点をズラす （速度0で中央に戻らない） 移動方向 • 移動軸が固定なら（常に右がゴール等） 最初からズラしておいてもOK 画面中央 見たい範囲

プレイヤーが見たい情報を表示する 同じ位置を移動するなら ダンプ高めのカメラのウェイトを強めに設定 被写体の状況に応じて、カメラを自然に切り替える • 連続して移動してるとき 移動リグの重みを上げる 大きく移動するなら 移動先を表示するカメラのウェイトを高めに設定 • Mixerで2つのカメラリグを 重みベースでブレンド • 重みベースで切り替えることで 切り替えを意識させない 余り移動しない カメラリグの重み 先回りする カメラリグの重み

プレイヤーが見たい情報を表示する プレイヤーに影響を与えるモノを見せる • ボスや即死罠等の ターゲットの中間点を 取得するコンポーネント 重要な要素を常に表示 • カメラはプレイヤーと 対象との中間点に配置 （TargetGroupを使用） プレイヤー ボス カメラは二人の中間点を写す ボスの大きさを少し大きめに設定して 画面ギリギリに表示されるのを防ぐ

プレイヤーが見たい情報を表示する 優先順位の高いカメラリグを割り込ませる • ボスの接近等のイベント時に GameObjectをアクティブに変更。 通常はプレイヤー追跡用カメラ Player Boss Player GameObjectがActiveの時 優先度が高いカメラリグに 自動的に切り替わる ボス戦中はボス用カメラを有効化

プレイヤーが見たい情報を表示する 完成 1.基本はカメラを出来る限り動かさないようにしつつ 2.遠くへ移動するときはカメラが移動先に先回りしつつ １ ２ 3.ボスの接近等では常にボスをカメラに捉える が出来ました。 ３ ※カメラの挙動が予測できないと酔うので、切り替え可能なバリエーションを増やす場合は慎重に

TargetGroupの応用 マウスの位置でカメラの位置を調整する • 射撃先を見たい場合等で 便利な挙動 • シューティング等は こちらの方が多い • 他の重みも足せる カーソルよりキャラクターに 重みを設定 カーソルとの距離に応じて 画面をズームしないように設定 マウスの位置を追跡するカメラ （正確にはマウスの位置とプレイヤーで、プレイヤー寄りの中間点を写す）

Virtual Cameraの拡張

カメラに独自の挙動を追加する

[AddComponentMenu("")]
public class Pan : CinemachineExtension
{
Vector3 offset;
[SerializeField] float MaxDistance = 3;
protected override void PostPipelineStageCallback(
CinemachineVirtualCameraBase vcam,
CinemachineCore.Stage stage,
ref CameraState state, float deltaTime)
{
if( stage == CinemachineCore.Stage.Body)
{
if( Input.GetMouseButton(1))
{
float deltaX = Input.GetAxis("Mouse X");
float deltaY = Input.GetAxis("Mouse Y");
var delta = new Vector3(deltaX,0 , deltaY);
offset = Vector3.ClampMagnitude(offset + delta, MaxDistance);
}
if( Input.GetMouseButtonUp(1))
{
offset = Vector3.zero;
}
state.RawPosition += offset;

カメラの動き
}
}
}

マウスのドラッグで
カメラの位置を補正

マウスの動き

Virtual Cameraの拡張

カメラに独自の挙動を追加する

Followの対象を追跡するだけのサンプル
[AddComponentMenu("")]
[ExecuteAlways]
[SaveDuringPlay]
public class MyCameraRig : CinemachineComponentBase
{
[SerializeField] Vector3 offset;
public override bool IsValid => enabled && FollowTarget != null;

警告の有無

処理のタイミング

public override CinemachineCore.Stage Stage => CinemachineCore.Stage.Body;
public override void MutateCameraState(ref CameraState curState, float deltaTime)
{
if (IsValid)
{
curState.RawPosition = FollowTargetPosition + offset;
}
}

カメラの動き

}

Virtual Cameraの拡張 カメラに独自の挙動を追加する • カメラリグの挙動を止めて Virtual CameraのTransformを 直接操作する • AnimationやTimeline、スクリプトで 動かしてもOK • Cinemachineの拡張機能は使える （手ブレ、インパルス、他VMとの補完）

良い感じのカメラにするための＋１＋１ ゲームを遊びやすくする演出

ゲームを遊びやすくする プレイヤーが「衝撃を受けた」と伝える • ダメージを受けたこと、および 衝撃の大きさを視覚的に表現 • 「衝撃で視界が揺れる」の表現 ダメージを受けると • やりすぎに注意 （ゲームの邪魔になる） • 出来ればオプションでOFFに する設定があることが望ましい 衝撃でカメラが揺れる

ゲームを遊びやすくする プレイヤーが「衝撃を受けた」と伝える インパルスを 発生させるコンポーネント GetComponent<Cinemachine.CinemachineImpulseSource>().GenerateImpulse(); インパルスに応じて 画面を揺らすVirtualCameraの拡張

ゲームを遊びやすくする これ以上先に行けない事を伝える • カメラの移動範囲を制限 １ ２ • 画面端であることを 視覚的に伝える。 • 見下ろし視点の場合、 ３ 2D Colliderは使えない 画面端ではカメラを スクロールしない この先には行けないな…

ゲームを遊びやすくする これ以上先に行けない事を伝える • カメラの移動範囲を制限 • 画面端であることを 視覚的に伝える。 • 見下ろし視点の場合、 2D Colliderは使えない ゲーム外の世界を見せないように カメラの移動範囲を限定

ゲームを遊びやすくする 5 カットシーンで動かしたボスの位置を伝える • カットシーン用カメラからゲーム用カメラに シームレスに戻すことで、相対距離をプレイヤーに伝える カットシーンが入り ボス戦の範囲に入ると １ 2 3 ゲームカメラに ゆっくりと切り替わる 6 7 4

ゲームを遊びやすくする カットシーンで動かしたボスの位置を伝える （EaseIn/EaseOut）Durationを設定して、 ゆっくりとカットシーンカメラを無効化する Durationが設定されて なければ一瞬で切り替わる カットシーン前 ボス、アピール中 カメラの遷移中

おさらい • 上から視点のカメラを作るならFraming Transposerがオススメ • カメラを切り替えて、プレイヤーが興味があるモノを表示する • カメラの挙動に一手間加えてゲームを遊びやすくする • ↑を用法・用量を守って適度にお使いください。

Cinemachine を 2D で使用する ― ヒントとテクニック https://blogs.unity3d.com/jp/2018/07/17/cinemachine-for-2d-tips-and-tricks Cinemachine を使ってカメラを設定しましょう https://forpro.unity3d.jp/unity_pro_tips/2019/07/28/79/

• https://blogs.unity3d.com/jp/2018/07/17/cinemachine-for-2d-tips-and-tricks
• https://forpro.unity3d.jp/unity_pro_tips/2019/07/28/79/

Cinemachineを 2Dプロジェクトに適応して遊んじゃうぞー よーし、パパ Cinemachineで教えるゲームの3つの大切なこと https://learning.unity3d.jp/4729/ https://learning.unity3d.jp/2976/

• https://learning.unity3d.jp/4729/
• https://learning.unity3d.jp/2976/

おわり