「QualiArts Advent Calendar 2022」 4日目の記事になります。
株式会社QualiArtsでUnityエンジニアをしています片岡です。
今回はUnityで独自のOrbitalなCamera（以降、Orbital Camera）を実装する方法について紹介していきます。独自に実装することで以下のGifのように3Dモデルを観察するのに特化したOrbital Cameraも実現できます。このOrbital Cameraの仕組みは弊社のゲームアプリ「IDOLY PRIDE」や社内ツールにて実際に導入されています。本記事ではGifのものと異なる、簡易機能版のご紹介となります。

なお、CinemachineのVirtual Cameraの利用を前提とします。
コアラについて気になる方は昨年のアドベントカレンダーの私の記事をぜひご覧ください！

はじめに

UnityでのOrbital Cameraの実現はCinemachineのVirtual CameraにOrbital Transposerという備え付けの機能があるので、それを利用すると簡単です。しかし、備え付けであるため追加で色々なことをしようとすると独自で実装してしまった方が良かったりするかもしれません。今回はその一手法をご紹介します。

OrbitalCameraとは

Orbital Cameraは下図で示すように、ある軌道に沿ってぐるぐると操作できるカメラのことを指します。
例としては、キャラを俯瞰しながら操作するTPS(Third Person Shooting)ゲームがありますね。

CinemachineのOrbital Transposer

先述したようにUnityでは、CinemachineにOrbital Transposerという機能があります。とても簡単なのでこの機能を利用したOrbital Cameraの実現手順を述べておきます。

UnityのScene上にお好きな3Dモデルを配置し、VirtualCameraを作成します。
CinemachineVirtualCameraコンポーネントの"Follow"と"LookAt"に3Dモデルを指定し、"Body"をOrbitalTransposerにします。以上です。

以下のように、ぐるぐるできるようになります。

また、Orbital Transposerには様々なパラメーターが用意されており、これらを調整することでカメラの挙動を変更することができます。

少し分かりづらいですが、Scene上の赤線に沿ってぐるぐるします。

独自実装の手法

さて、Orbital Cameraの概要を述べましたが、ここからは独自実装の手法についてになります。結論から述べますと、CinemachineExtensionを利用した実装となります。具体的にはCinemachineExtensionを継承した独自クラスを用意し、abstructなメソッドであるPostPipelineStageCallback()を実装してカメラの移動や回転を反映していきます。PostPipelineStageCallback()はカメラ処理時に毎回呼ばれる関数となるため、主に引数のCameraStateを書き換えることでカメラの移動や回転を反映できます。

    public class OrbitalTest : CinemachineExtension
    {
        protected override void PostPipelineStageCallback(CinemachineVirtualCameraBase vcam, CinemachineCore.Stage stage, ref CameraState state, float deltaTime)
        {
            // posとrotateを処理して位置と回転を反映
            state.RawPosition = pos;
            state.RawOrientation = rotate;
        }
    }

Virtual Cameraコンポーネントの"AddExtension"から独自クラスを適用できるようになります。
今回は縦横回転とズームに対応したOrbital Cameraを実装してみます。

縦横回転に対応してみる

キーボードの矢印キー操作による縦横回転に対応してみます。

using Cinemachine;
using UnityEngine;

public class OrbitalTest : CinemachineExtension
{
    private const float RotateSpeed = 2f;

    private Vector2 _currentRotate;
    private Transform _lookAt;

    private CinemachineVirtualCamera _virtualCamera;

    private void Update()
    {
        // 簡易的に操作を受け付けてみる
        if (Input.GetKey(KeyCode.LeftArrow)) Rotation(new Vector2(1f, 0f));

        if (Input.GetKey(KeyCode.RightArrow)) Rotation(new Vector2(-1f, 0f));

        if (Input.GetKey(KeyCode.UpArrow)) Rotation(new Vector2(0f, 1f));

        if (Input.GetKey(KeyCode.DownArrow)) Rotation(new Vector2(0f, -1f));

        // 左右上下回転操作
        void Rotation(Vector2 diffDelta)
        {
            diffDelta *= RotateSpeed * Time.deltaTime * 30;
            _currentRotate.x += diffDelta.y;
            _currentRotate.y += diffDelta.x;
        }
    }

    protected override void ConnectToVcam(bool connect)
    {
        base.ConnectToVcam(connect);
        if (connect == false) return;

        // 初期化処理
        // VirtualCameraのLookAt対象を生成しておく。わざわざ生成しなくても直接対象物を設定も可。
        _lookAt = GameObject.Find("LookAt")?.transform;
        if (_lookAt == null)
        {
            _lookAt = new GameObject("LookAt").transform;
            _lookAt.position = new Vector3(0f, 0.5f, 0f);
        }

        _virtualCamera = VirtualCamera as CinemachineVirtualCamera;
        _virtualCamera.LookAt = _lookAt;
    }

    protected override void PostPipelineStageCallback(CinemachineVirtualCameraBase vcam,
        CinemachineCore.Stage stage, ref CameraState state, float deltaTime)
    {
        var (pos, rotate) = GetTransform(_virtualCamera.LookAt.localToWorldMatrix);
        state.RawPosition = pos;
        state.RawOrientation = rotate;
    }

    /// <summary>
    /// カメラのTransformを取得
    /// </summary>
    private (Vector3 pos, Quaternion rotate) GetTransform(Matrix4x4 baseCenterMatrix)
    {
        // 中心点を回転させる
        var centerMatrix = baseCenterMatrix * Matrix4x4.Rotate(Quaternion.AngleAxis(_currentRotate.y, Vector3.up) *
                                                               Quaternion.AngleAxis(_currentRotate.x, Vector3.right));

        // 回転に基づいたカメラの位置を取得
        var distanceVector = new Vector3(0f, 0f, -3f);
        var pos = centerMatrix.MultiplyPoint3x4(distanceVector);

        return (pos, centerMatrix.rotation);
    }
}

上記のように記述します。PostPipelineStageCallback()内でカメラのTransformに関わるデータを取得するメソッドGetTransform()を呼び出し、GetTransform()は_cuttentRotateに基づいた回転、distanceVector(カメラとLookAtの距離)と先に計算した回転に基づいた位置を返します。返した値をRawPositionとRawOrientationにセットします。_currentRotateはUpdate()内のキー操作で更新されます。また、お察しの方もいらっしゃるかもしれませんが、後ほどズームの実装も行うため、distanceVectorは一旦ローカル変数で置いています。

Unityエディターに戻ると以下のように「LookAt」という名前のオブジェクトが生成され、CinemachineVirtualCameraコンポーネントの"LookAt"が「LookAt」となります。こちらはソースコード内のコメントにあるように、対象のゲームオブジェクトが存在しうる場合は、最初からそのゲームオブジェクトをLookAtに設定しても構いません。

以上で縦横回転に対応したOrbital Cameraが実装できました。

ズームに対応してみる

縦横回転に対応してしまえば簡単です。GetTransform()にあったローカル変数distanceVectorをフィールド変数_distanceVectorに変更し、縦横回転の対応と同じくキー操作による更新対象となるフィールド変数_currentDistanceを用意します。

    private const float RotateSpeed = 2f;

    private Vector2 _currentRotate;
    private Vector3 _distanceVector;
    private float _currentDistance = 3f;
    private Transform _lookAt;

    private CinemachineVirtualCamera _virtualCamera;

    private void Update()
    {
        // 簡易的に操作を受け付けてみる
        if (Input.GetKey(KeyCode.LeftArrow)) Rotation(new Vector2(1f, 0f));

        if (Input.GetKey(KeyCode.RightArrow)) Rotation(new Vector2(-1f, 0f));

        if (Input.GetKey(KeyCode.UpArrow)) Rotation(new Vector2(0f, 1f));

        if (Input.GetKey(KeyCode.DownArrow)) Rotation(new Vector2(0f, -1f));

        if (Input.GetKey(KeyCode.W)) Scale(-0.1f);

        if (Input.GetKey(KeyCode.S)) Scale(0.1f);

        // 左右上下回転操作
        void Rotation(Vector2 diffDelta)
        {
            diffDelta *= RotateSpeed * Time.deltaTime * 30;
            _currentRotate.x += diffDelta.y;
            _currentRotate.y += diffDelta.x;
        }

        // ズーム
        void Scale(float delta)
        {
            _currentDistance += delta;
        }
    }

    /// <summary>
    /// カメラのTransformを取得
    /// </summary>
    private (Vector3 pos, Quaternion rotate) GetTransform(Matrix4x4 baseCenterMatrix)
    {
        // 中心点を回転させる
        var centerMatrix = baseCenterMatrix * Matrix4x4.Rotate(Quaternion.AngleAxis(_currentRotate.y, Vector3.up) *
                                                               Quaternion.AngleAxis(_currentRotate.x, Vector3.right));

        // 回転に基づいたカメラの位置を取得
        _distanceVector.z = -_currentDistance; // -にしておく（カメラの角度と初期位置的による）
        var pos = centerMatrix.MultiplyPoint3x4(_distanceVector);

        return (pos, centerMatrix.rotation);
    }

以上でズームにも対応したOrbital Cameraが実装できました。

まとめ

本記事では、縦横回転とズームに対応した独自のOrbital Cameraの例を紹介させていただきました。実際に導入されているものはカメラの高さの調整や平行移動ができたり、当たり判定の処理、焦点距離の処理、スマホのドラッグ操作に対応、操作感の考慮などなどまだまだてんこ盛りです。いずれはこれらについてもご紹介したいなと思います。
最後まで読んでくださった方に向けてになりますが、「IDOLY PRIDE」の着替え機能が上記てんこ盛りのOrbital Cameraとなりますので、気になるという方はぜひアプリをインストールしてご確認いただけますと幸いです！

ありがとうございました！以上です！