[カメラワーク] Timeline x Cinemachine


以下のgifが今回つくったもの。ゲームは再生せずにタイムラインをプレビューしているだけなので、すごく軽い。タイミングの微修正だけならGUIでできてしまう手軽さもある。簡単なムービーを差し込みたいときなどに使えそう。

![camerawork.gif](https://qiita-image-store.s3.amazonaws.com/0/136286/337176a7-bdc6-f67b-cc80-9dfce9592a14.gif "camerawork.gif")



# Timeline

https://docs.unity3d.com/ja/current/Manual/TimelineSection.html

時間で動くものを制御する。全体の時間軸に沿って、複数の要素（アニメーション、オーディオ、カメラなど）を管理したい場合に有効。

> 参考
[【Unity】今日から使えるTimeline](https://www.slideshare.net/UnityTechnologiesJapan/unitytimeline)
[Unity2017のTimelineをやってみた](http://blog.applibot.co.jp/blog/2017/06/16/unity2017timeline/)


## 作成

[Assets] -> [Create] -> [Timeline]
ヒエラルキーウィンドウにD&D

Timelineエディターウィンドウを開き、Lockをかける
https://docs.unity3d.com/ja/current/Manual/TimelineEditorWindow.html


## Animaton Track

Timelineウィンドウで[Add] -> [Animation Track]
Animatorが空なのでアニメーションさせたいゲームオブジェクト（ユニティちゃん）をバインドする。

Trackの右側のTimeline上で右クリック -> [Add From Animation Clip]を選択し、AnimationClipを追加。複数追加して切り替え部分を重ね合せることで、アニメーションがブレンドされる。

### 位置移動が発生するアニメーションの場合

ユニティちゃんのAnimatorの`Apply Root Motion`にチェックを入れると、アニメーションによる位置移動が適用されるが、アニメーションを切り替える時に初期地点に戻ってきてしまう。

![スクリーンショット 2017-11-08 16.35.41.png](https://qiita-image-store.s3.amazonaws.com/0/136286/9cf6f90c-368a-180d-b07c-9dc149f5b718.png "スクリーンショット 2017-11-08 16.35.41.png")

なのでオフセットを設定する。AnimationClip上で右クリック -> [Match Offsets To Previous Clip]を選択すると、前のアニメーションの位置を参考にオフセットが設定される。今回はこれでうまくいった。

`Override Track Matching Fields`もやってみたけどズレてしまった。さらにゲームを再生しないと適応されないので、やっぱりこれは良くない。


## Control Track

Timelineウィンドウで[Add] -> [Control Track]

Timeline経由でコンポーネントを操作する`ITimeControl`を使用する。
https://docs.unity3d.com/ScriptReference/Timeline.ITimeControl.html



### ITimeControlを継承したスクリプトの作成

`ITimeController`と名付けたゲームオブジェクトをヒエラルキーに追加し、以下のスクリプトをアタッチする。

```c:ITimeController.cs
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.Timeline;

public class ITimeController : MonoBehaviour, ITimeControl {

	[SerializeField] Vector3 axis = Vector3.up;
	[SerializeField] float speed = 1;

	[SerializeField] GameObject r_cube;
	[SerializeField] GameObject particle;
	[SerializeField] GameObject unity_chan;

	void Start() {
		particle.SetActive(false);
	}

	// アクティブ時に毎フレーム実行
	public void SetTime(double time) {
		// 後方で回転するcube
		r_cube.transform.localRotation = Quaternion.AngleAxis(((float) time) * speed, axis);

		if(time > 3){
			// ジャンプ地点からパーティクルを発射
			particle.SetActive(true);
			particle.transform.position = unity_chan.transform.position;
		}
	}

	// アクティブになったときに実行
	public void OnControlTimeStart() {
	}
	// 非アクティブになったときに実行	
	public void OnControlTimeStop() {
	}
}
```

### Control PlayableからITimeControlを呼び出す

Control TrackのTimeline上で右クリック -> [Add Control Playable Asset Clip]で`ControlPlayable`を追加。

`Control Playable`の`Source Game Object`に、上記で作成したITimeControllerゲームオブジェクトを設定する。

![スクリーンショット 2017-11-08 14.21.18.png](https://qiita-image-store.s3.amazonaws.com/0/136286/d31ad47f-f18e-f08f-b6e3-f29d2f5a5821.png "スクリーンショット 2017-11-08 14.21.18.png")


> 参考
[【Unity】ITimeControlで、Timelineから"コンポーネント"を操作する](http://tsubakit1.hateblo.jp/entry/2017/09/21/234138)


以上でカメラワーク以外の設定が完了。



# Cinemachine

「指定したオブジェクトがカメラの何処に映ってほしいのか」と「複数カメラ座標・設定のブレンド」機能を持ったカメラリグ。

[Cinemachine](https://www.assetstore.unity3d.com/jp/#!/content/79898)をインポートすると使うことができる。

> 参考
[Unity2017のCinemachineをやってみた](http://blog.applibot.co.jp/blog/2017/07/31/unity2017-cinemachine/)
[【Unity】Timeline × Cinemachine でカットシーンのカメラワークを作る](http://tsubakit1.hateblo.jp/entry/2017/06/15/225504)


## Virtual Cameraの設置

[Cinemachine] -> [Create Virtual Camera]を選択しカメラをシーンに設置していく。「CM」という印がカメラ位置。

![スクリーンショット 2017-11-08 17.37.43.png](https://qiita-image-store.s3.amazonaws.com/0/136286/e2b02dc9-1182-d5a4-16e8-aa5c85e29826.png "スクリーンショット 2017-11-08 17.37.43.png")

各カメラの`Cinemachine Virtual Camera`スクリプトの`Look At`にユニティちゃんをバインドすることで、カメラがユニティちゃんの方を向くようになる。 

## Cinemachine Track

Timelineウィンドウで[Add] -> [Cinemachine.Timeline] -> [Cinemachine Track]

続いてTrackのTimeline上で右クリック -> [Add Cinemachine Shot Clip]を選択し`Cinemachine Shot`を追加。任意のVirtual Cameraをバインドすることでカメラの視点がバーチャルカメラの視点になる。

![スクリーンショット 2017-11-08 17.53.23.png](https://qiita-image-store.s3.amazonaws.com/0/136286/5073c90f-0259-cb7f-0133-77f78e5d9a9a.png "スクリーンショット 2017-11-08 17.53.23.png")


あとは、タイムラインにカメラを並べていくだけでカメラの切り替えができる。アニメーションと同様に切り替え部分を重ねるとブレンドされ、Tweenのようにカメラとカメラの間の座標をいい感じにつないでくれる。