
ユニティちゃんを動かせるようになりました。
キャラクターとのオフセットでカメラを追従させてましたが、ちょっと物足りなくなったのでTPSっぽくマウスでカメラワークを変更できるようにしました。

この記事では、TPS視点のカメラワークとCinemachineをスクリプトで拡張する方法です。`CinemachineVirtualCamera`や`CinemachineOrbitalTransposer`をスクリプトで制御します。

操作はSkyrimをイメージしている。**The Elder Scrolls**の次回作が楽しみだけどまだ数年はかかるかな。

Unity 2019.4

## Chinemachine

Unityのカメラツールの**Cinemachine**というパッケージを使います。

**Cinemachine**はUnityのカメラワークのためのパッケージです。
ターゲットをカメラで追う動きでも、定点で追う、ターゲットの真後ろから追う、ターゲットの周囲を回るなどたくさんの動きをノーコードで実現できます。
また、複数のカメラを滑らかに切り替える、手振れを付ける、画角に遊びを持たせるなど高度なカメラワークも出来ます。

- [Unity Cinemachine のチュートリアル](https://unity.com/ja/unity/features/editor/art-and-design/cinemachine)
- [Unity Cinemachine について](https://docs.unity3d.com/ja/Packages/com.unity.cinemachine@2.6/manual/index.html)
- [Cinemachine](https://docs.unity3d.com/ja/2019.4/Manual/com.unity.cinemachine.html)

▼ノーコードでもこのGIFのようにTPS視点+マウスで左右に操作することができるようになりました。
![unitychan](/images/posts/270/275/unitychan.gif)

他のカメラワークの動きについては▼のリンク先の動画がわかりやすいです。
- [Unity Cinemachineの再生リスト](https://www.youtube.com/playlist?list=PLX2vGYjWbI0TQpl4JdfEDNO1xK_I34y8P)


▼Cinemachineの機能についてはこちらの記事を見た方がいい。わかりやすく手順が書いてあります。
- [【Unity】Cinemachineの全機能を解説！ありとあらゆるカメラワークを高クオリティに作る方法総まとめ](https://light11.hatenadiary.com/entry/2019/10/24/220542)



## Cinemachine のインストール
Unityの「Window」→「Package Manager」を開いて「Unity Resistry」で検索するとCinemachineが出てくるのでインポートします。

![import](/images/posts/270/275/import.png)

Cinemachineは外部依存関係を持ってないため、以上でOKです。

## TPS視点で追従するカメラを作ってみる

Cinemahineを使ってノーコードでTPS視点+マウス操作のカメラを作っていきます。
ちなみにTPSはThird Person perspectiveの略で三人称視点という意味で、
一人称視点はFPS（First Person Perspective）です。
今までFPSはシューティングゲームの視点って意味かと思ってました。

### CinemahineBrain

まずは、`Main Camera`に`CinemahineBrain`のコンポーネントを追加します。
これによって後で追加するバーチャルカメラのカットやブレンドを制御します。

![main](/images/posts/270/275/maincamerainspector.png)

- [Cinemachine Brain プロパティーの設定](https://docs.unity3d.com/ja/Packages/com.unity.cinemachine@2.6/manual/CinemachineBrainProperties.html)

### CinemahineVirtualCamera

続いて空のGameObjectを作って`CinemahineVirtualCamera`コンポーネントを追加します。
バーチャルカメラのAim、Body、Noise プロパティーを使用して、バーチャルカメラ が位置、回転、その他のプロパティーをどのようにアニメーション化するかを設定します。
空のGameObjectは`VirtualCamera`と名付けます。

`Follow`に紐づけたオブジェクトに追従し、`Look At`のオブジェクトにカメラの照準を合わせます。
`Follow`と`Look At`にプレイヤーの`unitychan`をアタッチしました。

![virtualcamera](/images/posts/270/275/virtualcamerainspector.png)

- [Virtural Camera プロパティーの設定](https://docs.unity3d.com/ja/Packages/com.unity.cinemachine@2.6/manual/CinemachineVirtualCamera.html)

`CinemahineVirtualCamera`の`Body`と`Aim`をそれぞれ`Orbital Transpoter`と`Composer`と選択しました。

#### Body

**Body**プロパティーは、バーチャルカメラを動かすアルゴリズムを指定します。

そのアルゴリズムの内のひとつ**Orbital Transposer**は、バーチャルカメラの Followターゲットから可変の距離でUnityのカメラを移動させます。
Orbital Transposerの`Binding Mode`にもいくつか種類があって、これは好みで選んで下さい。動きが少しずつ異なります。
私は`Lock To Target With World Up`がなんとなく好みで使ってます。

![binfingmode](/images/posts/270/275/bindingmode.png)

- [Body プロパティー](https://docs.unity3d.com/ja/Packages/com.unity.cinemachine@2.6/manual/CinemachineVirtualCameraBody.html)
- [Orbital Transposer](https://docs.unity3d.com/ja/Packages/com.unity.cinemachine@2.6/manual/CinemachineBodyOrbitalTransposer.html)

#### Aim

Aim プロパティーはバーチャルカメラの回転をどのように行うかを設定するものです。
Look At ターゲットをカメラフレーム内に維持する`Composer`を利用します。

![aim](/images/posts/270/275/aim.png)

- [Aim プロパティー](https://docs.unity3d.com/ja/Packages/com.unity.cinemachine@2.6/manual/CinemachineVirtualCameraAim.html)

### Noise

せっかくなのでNoiseにも言及します。
これはカメラの振動をシミュレートすることができます。
手振れや混乱、ドスンとする表現にも使えます。

- [Noise プロパティー](https://docs.unity3d.com/ja/Packages/com.unity.cinemachine@2.6/manual/CinemachineVirtualCameraNoise.html)

## 動かしてみる

以上の設定で冒頭のTPS視点のカメラワークになりました。
![unitychan](/images/posts/270/275/unitychan.gif)

マウスを左右に動かすと水平方向にカメラの位置が回転します。

## Cinemachineをスクリプトで拡張する

TPS視点のマウス操作で、水平方向の操作に加えて（個人的に）欲しいのは次の２点です。
- 垂直方向のカメラの操作
- ホイールで前後に動ける

この２つのスクリプトを書いて拡張します。

VirtualCameraオブジェクトにスクリプトを追加する。

```cs:VirtualCameraController.cs
using UnityEngine;
using Cinemachine;

[RequireComponent(typeof(CinemachineVirtualCamera))]
public class VirtualCameraController : MonoBehaviour
{
  private CinemachineVirtualCamera virtualCamera;
  private CinemachineOrbitalTransposer orbitalTransposer;
  private Vector2 lastMousePosition;
  // カメラの角度を格納する変数（初期値に0,0を代入）
  private Vector2 cameraAngle = new Vector2(0, 0);

  public float forwardSpeed;
  public float riseSpeed;
  void Start()
  {
    this.virtualCamera = this.GetComponent<CinemachineVirtualCamera>();
    this.orbitalTransposer = this.virtualCamera.GetComponentInChildren<CinemachineOrbitalTransposer>();
  }

  // Update is called once per frame
  void Update()
  {
    forwardViewPoint();
    heightViewPoint();
  }

  // 前後のカメラ操作
  private void forwardViewPoint()
  {
    // マウスホイールの回転値を変数 scroll に渡す
    float scroll = Input.GetAxis("Mouse ScrollWheel");
    Vector3 offset = this.virtualCamera.transform.forward * scroll * forwardSpeed;
    orbitalTransposer.m_FollowOffset -= offset;
    Debug.Log(offset.ToString());
  }


  // 垂直方向のカメラ操作
  private void heightViewPoint()
  {
    // 左クリックした時
    if (Input.GetMouseButtonDown(0))
    {
      // マウス座標を変数"lastMousePosition"に格納
      lastMousePosition = Input.mousePosition;
    }
    // 左ドラッグしている間
    else if (Input.GetMouseButton(0))
    {
      float y = (lastMousePosition.y - Input.mousePosition.y);
      orbitalTransposer.m_FollowOffset.y += y * riseSpeed;
      // マウス座標を変数"lastMousePosition"に格納
      lastMousePosition = Input.mousePosition;
    }
  }
}
```

`Cinemachine`のクラスを利用するため名前空間を追加。

`[RequireComponent(typeof(CinemachineVirtualCamera))]`はスクリプトをアタッチするオブジェクトに`CinemachineVirtualCamera`のアタッチも要求します。

`forwardViewPoint()`では前後のカメラ操作を制御します。
マウスホイールの前後に合わせて`Orbital Transposer`の位置を更新します。
`this.virtualCamera.transform.forward`がカメラの方向ベクトルです。

`heightViewPoint()`はカメラの高さを制御します。
マウスをドラッグして視点の高さを動かせる。
`lastMousePosition`とマウスの上下の差分が、`Orbital Transposer`のzの値を下げるか上げるか決めます。

▼イメージ通りの動きになってきました！
![script](/images/posts/270/275/scriptcontroll.gif)

ホイールがスマホの拡大みたいにカクつくのと、水平方向の操作がマウスの絶対位置になってしまってるのでドラッグしたときに条件付けしたい。

## おまけ、Cinemachineを使わずスクリプトで実現しようとすると

始めはCinemahineを使わずにTPS視点をスクリプトで実現しようとしてました。
結構いい感じにはなりましたが、水平方向が傾いたり動きがぎこちなかったりと細部を納得できるまで作りこむのはかなり大変だと感じました。

▼作ってみたスクリプトのカメラワーク。
マウスをドラッグして視点を動かせる。
垂直な軸の回転がうまくできておらず、横で動かすと水平軸が傾いてしまう。
![makescript](/images/posts/270/275/makescript.gif)

一応、視点操作のリバースとFPS視点への切り替えも作りこんでいる。

<details><summary>Cinemahineなしで作ってみたもののコード</summary>

```cs:CameraControll.
using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class CameraControll : MonoBehaviour
{

  public Camera mainCamera;
  public GameObject playerObject;
  private GameObject cameraControll;
  public GameObject tpsViewPoint;
  public GameObject fpsViewPoint;

  // カメラの回転速度を格納する変数
  public Vector2 fpsRotationSpeed;
  public Vector2 tpsRotationSpeed;
  // カメラの前後の移動の速度
  public float tpsForwardSpeed;
  // マウスホイールの回転値を格納する変数
  private float scroll;

  // マウス移動方向とカメラ回転方向を反転する判定フラグ
  public bool isReversed;

  // true: 三人称視点(TPS)。false: 一人称視点(FPS)。
  public bool isTPS;
  // マウス座標を格納する変数
  private Vector2 lastMousePosition;
  // カメラの角度を格納する変数（初期値に0,0を代入）
  private Vector2 cameraAngle = new Vector2(0, 0);


  //呼び出し時に実行される関数
  void Start()
  {
    //メインカメラとユニティちゃんをそれぞれ取得
    cameraControll = GameObject.Find("CameraController");
    setViewPoint();
  }


  //単位時間ごとに実行される関数
  void Update()
  {
    //rotateCameraの呼び出し
    rotateCamera();
    trakingCamera();
  }

  //カメラを回転させる関数
  private void rotateCamera()
  {
    toggleViewPoint();

    if (isTPS)
    {
      thirdPersonShooter();
    }
    else
    {
      firstPersonShooter();
    }
  }

  // F5キーでTPS, FPSの切り替え
  private void toggleViewPoint()
  {
    if (Input.GetKeyDown(KeyCode.F5))
    {
      setViewPoint();
    }
  }

  // 視点をセットする
  private void setViewPoint()
  {
    isTPS = !isTPS;
    // 視点切り替え
    if (isTPS)
    {
      // TPS視点に初期化
      cameraAngle = Vector2.zero;
      mainCamera.transform.localEulerAngles = cameraAngle;
      mainCamera.transform.position = tpsViewPoint.transform.position;
    }
    else
    {
      // FPS視点に初期化
      cameraAngle = Vector2.zero;
      mainCamera.transform.localEulerAngles = cameraAngle;
      mainCamera.transform.position = fpsViewPoint.transform.position;
    }
    Debug.Log(mainCamera.transform.position.ToString());

  }

  // 一人称視点のカメラ
  private void firstPersonShooter()
  {

    // 左クリックした時
    if (Input.GetMouseButtonDown(0))
    {
      // カメラの角度を変数"cameraAngle"に格納
      cameraAngle = mainCamera.transform.localEulerAngles;
      // マウス座標を変数"lastMousePosition"に格納
      lastMousePosition = Input.mousePosition;
    }
    // 左ドラッグしている間
    else if (Input.GetMouseButton(0))
    {
      float reverse = isReversed ? -1f : 1f;
      // Y軸の回転：マウスドラッグ方向に視点回転
      // マウスの水平移動値に変数"rotationSpeed"を掛ける
      //（クリック時の座標とマウス座標の現在値の差分値）
      cameraAngle.y -= (Input.mousePosition.x - lastMousePosition.x) * reverse * fpsRotationSpeed.y;
      cameraAngle.x -= (lastMousePosition.y - Input.mousePosition.y) * reverse * fpsRotationSpeed.x;

      // カメラアングルの制限
      cameraAngle.y = cameraAngle.y > 80 ? 80 : cameraAngle.y;
      cameraAngle.y = cameraAngle.y < -80 ? -80 : cameraAngle.y;
      cameraAngle.x = cameraAngle.x > 80 ? 80 : cameraAngle.x;
      cameraAngle.x = cameraAngle.x < -80 ? -80 : cameraAngle.x;
      // "cameraAngle"の角度をカメラ角度に格納
      mainCamera.transform.localEulerAngles = cameraAngle;
      // マウス座標を変数"lastMousePosition"に格納
      lastMousePosition = Input.mousePosition;
    }
  }

  private void thirdPersonShooter()
  {
    // マウスホイールの回転値を変数 scroll に渡す
    scroll = Input.GetAxis("Mouse ScrollWheel");
    mainCamera.transform.position += mainCamera.transform.forward * scroll * tpsForwardSpeed;

    // 左クリックした時
    if (Input.GetMouseButtonDown(0))
    {
      // カメラの角度を変数"cameraAngle"に格納
      cameraAngle = mainCamera.transform.localEulerAngles;
      // マウス座標を変数"lastMousePosition"に格納
      lastMousePosition = Input.mousePosition;
    }
    // 左ドラッグしている間
    else if (Input.GetMouseButton(0))
    {
      float reverse = isReversed ? -1f : 1f;
      float x = (Input.mousePosition.x - lastMousePosition.x) * reverse;
      float y = (lastMousePosition.y - Input.mousePosition.y) * reverse;
      if (Mathf.Abs(x) < Mathf.Abs(y))
        x = 0;
      else
        y = 0;
      Vector3 angle = Vector3.zero;
      angle.x -= x * tpsRotationSpeed.x;
      angle.y -= y * tpsRotationSpeed.y;
      // カメラアングルの制限
      angle.y = angle.y > 80 ? 80 : angle.y;
      angle.y = angle.y < -80 ? -80 : angle.y;
      // "cameraAngle"の角度をカメラ角度に格納
      mainCamera.transform.RotateAround(playerObject.transform.position, Vector3.up, angle.x);
      mainCamera.transform.RotateAround(playerObject.transform.position, transform.right, angle.y);
      // マウス座標を変数"lastMousePosition"に格納
      lastMousePosition = Input.mousePosition;
    }
  }

  // Playerを追跡するカメラ
  private void trakingCamera()
  {
    cameraControll.transform.position = playerObject.transform.position;
    cameraControll.transform.rotation = playerObject.transform.rotation;
    // playerObject.transform.rotation = mainCamera.transform.rotation;
  }
}
```

</details>

前フレームのマウスの位置`lastMousePosition`と現在のマウスの位置の差分だけX,Y軸方向のアングルを変えることでマウスと連動したカメラワークを実現してます。

TPS視点はアングルをキャラクター方向に向けつつ、`transform.RotateAround()`でプレイヤーを中心に回転している。
FPS視点はカメラを動かさなくて良いため、アングルだけマウスに合わせて向きを変える。

▼Inspecterと設定。
`CameraController`をキャラクターに追従させて、子オブジェクトのViewPointにメインカメラの位置を切り替えている。

![makescriptinspecter](/images/posts/270/275/makescriptinspecter.png)


【Unity】TPSっぽいカメラワークをCinemahineでつくる


Unityでオブジェクトに色付きのマテリアルを設定しても画面は茶色くなっている。

![objects](/images/posts/270/273/addobjects.png)

バージョンはUnity 2019.4。
新規プロジェクトでは毎回このような色味のない暗い感じになる。

メニューバーから「Window」→「Rendering」→「LightingSettings」を開く。一番下の「Auto Generate」にチェックすると色実のある世界になる。

![light](/images/posts/270/273/lightsetting.png)

## 参考
Auto Generateの既定値がunity2019からOFFに変わったらしい。
- [unity2019で、新たに作成したSceneに配置したオブジェクトが暗い色で表示される問題 Qiita](https://qiita.com/culage/items/32266778975266d3b742)



UnityのオブジェクトがMaterialを設定しても茶色い

Unity ML-Agentsで新しく学習環境を作る


UnityもML-Agentsもわからなかったので参考書を買いました。

![mlagents-book](/images/posts/270/273/mlagents-book.jpg)

[Unityではじめる機械学習・強化学習 Unity ML-Agents実践ゲームプログラミング](https://amzn.to/365Q94z)


## この本の良い点

- 日本語の情報が少ないML-Agentsについてまとめてある
- ハイパーパラメータの典型的な範囲と説明がある！！
- Unityのパラメータの画像が豊富にありわかりやすい

### 日本語の情報が少ないML-Agentsについてまとめてある

ML-Agentsについてググって出る日本語の情報は多くない。
あってもサンプルを動かすところまでがほとんどで、UnityもML-Agentsもわからないのでナンモワカラン状態だった。

[公式のドキュメント](https://github.com/Unity-Technologies/ml-agents/blob/release_12_docs/docs/Readme.md)はかなり詳しいが、英語を読むにも手がかりが欲しい。

書籍でML-Agentsを体系的に学んだことで、公式のドキュメントも読んでなんとなくわかるくらいまでになりました。

### ハイパーパラメータの典型的な範囲と説明がある！！

個人的に一番おすすめのポイントはこれ！
これだけで今後も長く見返すことが決まったぐらいありがたい。

ハイパーパラメータはニューラルネットワークの層の数や報酬にかかる係数など、推論や予測の枠組みの中で決定されないパラメータで人が任意に決める数値です。
このパラメータは学習する速度や精度に大きく影響していて、的外れなパラメータだと学習できないこともあります。
そのため、あらかじめ良さげなパラメータで学習を始めて徐々に調整していく必要があります。
この調整がチューニングです。
また、ML-AgentsではPPOやSACといった強化学習のモデルを利用しますが、モデルによってもハイパーパラメータが異なります。

はい。
このハイパーパラメータが何を意味するのか？
そして、どの範囲で調整したら良いか？大きくしたら学習にどんな影響があるのか？が初心者にとってさっぱりで悩んだら嵌ります。
それゆえ、ハイパーパラメータの典型的な範囲と説明があるのはありがたいなと思いました。

著者の布留川英一さんは「[AlphaZero 深層学習・強化学習・探索 人工知能プログラミング実践入門](https://amzn.to/363EWl4)」なども書いていらっしゃるので信頼感があります。




## 前提

- Unityに初めて触った。
- DeepLeaningは[ゼロから作るDeep Learning](https://amzn.to/3qJFYuw)のシリーズといくつかの本で学んだ。
- 10年くらい前に研究でSVMを使ってた。
- C#とPythonは業務で利用した

UnityのオブジェクトがMaterialを設定しても茶色い

参考

【Unity】TPSっぽいカメラワークをCinemahineでつくる

UnityのオブジェクトがMaterialを設定しても茶色い

Unity ML-Agentsで新しく学習環境を作る

【技術書】Unityではじめる機械学習・強化学習 Unity ML-Agents実践ゲームプログラミング

Unity ML-Agentsのインストールから学習まで