【Unity】カットシーンを作成するAssetの使い方【Animator Timeline Editor】

# カットシーンとは？
ゲームで言うと寸劇のようなシーンの事です。
例えば3D格闘ゲームの勝利シーンなどで使用されています。
![win](http://cdn-ak.f.st-hatena.com/images/fotolife/s/samepa/20120313/20120313044153.jpg)

# Unityでカットシーンを作るには？
色々とAssetが出ています。
[Aperture Cutscene Editor](http://www.aperturecutscene.com/)
[Unity uSequencer](http://www.wellfired.com/usequencer.html)
などが有名でしょうか。
しかし、有料となっておりますので、ちょっと使いたい時は敷居が高い…。
というわけでテラシュールウェアさんで[見かけた](http://tsubakit1.hateblo.jp/entry/20140427/1398609115)
無料のカットシーンエディタ [Animator Timeline Editor](https://www.assetstore.unity3d.com/jp/#!/content/3485)
を使ってみたいと思います。

# Animator Timeline Editorのインストール
Asset StoreからAnimator Timeline EditorをDLしimportするだけで完了です。githubにソースも公開されていますので、そこから入れる事も可能です。
![スクリーンショット 2014-07-27 16.43.45.png](https://qiita-image-store.s3.amazonaws.com/0/26453/da30d603-a0d8-dc28-80d0-3078cfdc8548.png)

# Animator Timeline Editor用語
・Take = 作成した1つのカットシーンのこと
・Track = カットシーン内の一つ一つのイベントのこと

# 事前準備
Animator Timeline Editorのimportが完了しましたので、
その他必要なものをざっと用意して追加しました。
・Unity-chan(Asset Store)
・Direction Light(光源)
![スクリーンショット 2014-07-27 16.59.36.png](https://qiita-image-store.s3.amazonaws.com/0/26453/cb920d14-5de0-4857-ad25-fece5c7fcbfa.png)

# カットシーンの作成
Unity画面上部メニューからwindow→Animator Timeline Editorを選択。
![スクリーンショット 2014-07-27 17.04.35.png](https://qiita-image-store.s3.amazonaws.com/0/26453/853aa140-f962-c62f-b92b-d0239c2d8be2.png)

すると以下のようなウィンドウが開かれます。
![スクリーンショット 2014-07-27 17.05.03.png](https://qiita-image-store.s3.amazonaws.com/0/26453/f4c92186-0dbb-40c4-a715-a9b3adc585d7.png)

ウィンドウ内のAddComponentを押下します。するとヒエラルキーにAnimatorDataオブジェクトが追加され、以下のような画面が開かれます。
なお、この際に作られたカットシーン名は「Take1」となります。
![スクリーンショット 2014-07-27 17.06.39.png](https://qiita-image-store.s3.amazonaws.com/0/26453/6608d065-b121-bf0c-3980-3bcac18f4311.png)

# 作成したカットシーンにイベントを追加する
ウィンドウ右下にある以下の新規追加マークをクリックします。
![スクリーンショット 2014-07-27 18.53.55.png](https://qiita-image-store.s3.amazonaws.com/0/26453/461d1eaf-c5ad-430d-9c4f-6bfd14645459.png)
左から、新規追加、グループ管理の追加、削除となっています。

するとどのイベントを追加するか聞かれるので、ここではTranslationを選択します。
![スクリーンショット 2014-07-27 17.07.09.png](https://qiita-image-store.s3.amazonaws.com/0/26453/b0e6fcae-438e-7d58-354c-3ac4c1db6a32.png)

軽く命令の説明をすると
・Translation : オブジェクトの移動イベント
・Rotation : オブジェクトの回転イベント
・Orientation : オブジェクトがどこにLookAtするかを指定出来るイベント
などとなっております。詳しくは同梱されているDocumentationを確認してください。

Translationを選択すると以下のような"Translation Track"が追加されます。
![スクリーンショット 2014-07-27 17.26.15.png](https://qiita-image-store.s3.amazonaws.com/0/26453/7532c6b0-6ced-c3ff-c7c6-987a8e3cba00.png)

次にこのTranslation Trackで動作をさせたいオブジェクトを紐付けます。
ここではMain Cameraを動かしたいので、Main CameraをD&Dしました。
![スクリーンショット 2014-07-27 17.26.30.png](https://qiita-image-store.s3.amazonaws.com/0/26453/1b4ad39f-5733-3018-9342-851b7a527120.png)


次にキーフレームを追加します。追加したいフレーム選択して「右クリック→Insert Keyframe」か、選択してウィンドウ内にある「K」を書かれたボタンを押下すると追加することが出来ます。
以下の画像は1frame目、30frame目、60frame目にキーフレームを打った状態になります。
![スクリーンショット 2014-07-27 17.27.27.png](https://qiita-image-store.s3.amazonaws.com/0/26453/b3d9b736-d69f-cb75-7856-257990615ca5.png)

次にキーフレームごとのxyz座標を設定します。
パッ見てどこで設定するのか分かりにくいのですが、キーフレームを選択している状態で「＜マーク」を押下すると詳細を開くことが出来、値を入力することが出来ます。
![スクリーンショット 2014-07-27 17.27.38.png](https://qiita-image-store.s3.amazonaws.com/0/26453/9e7e4d35-d9d3-8d3b-17cd-15a58318493d.png)

これでイベントを追加することが出来ました。
複数のTrackの組み合わせで複雑なカットシーンも作成することが出来ます。

# カットシーンの終了イベントを受け取る
これもTrackを追加することで解決出来ます。
新規追加→Eventと押下して、Event Trackを追加します。
![スクリーンショット 2014-07-27 17.37.45.png](https://qiita-image-store.s3.amazonaws.com/0/26453/25a87bef-dbaf-1645-2239-cd8b4f6b8469.png)

そして、Event Trackに通知したいスクリプトを持っているGameObjectを紐付けます。
そして「＜マーク」を押下するとどのイベントを呼び出すか選ぶことが出来ます。
ここで１点注意ですが、スクリプトを記述した際にpublicにしていないとここで選択することが出来ません。ご注意ください。
![スクリーンショット 2014-07-27 17.38.57.png](https://qiita-image-store.s3.amazonaws.com/0/26453/a2b990f9-356c-3d4a-5908-2740853cf429.png)

これで指定したフレームまで実行するとその時点でイベントを呼び出す事が出来るようになります。

# スクリプトから操作する
以下のコードで操作することが可能です。

```csharp:CutSceneEvent.cs

// 指定したカットシーンを再生
AnimatorTimeline.Play("Take名");

// 指定したカットシーンをループ再生
AnimatorTimeline.Play("Take名", true);

// 再生中のカットシーンを止める
AnimatorTimeline.Stop();

// 再生中のカットシーンを一時停止する
AnimatorTimeline.Pause();

// 一時停止中のカットシーンを再開する
AnimatorTimeline.Resume();

```

# シーン起動時にいきなりカットシーンを呼び出したい
Optionから設定することが出来ます。
![スクリーンショット 2014-07-27 17.39.33.png](https://qiita-image-store.s3.amazonaws.com/0/26453/a41b570f-6cf0-d449-4d70-c266a226bd02.png)

ここにある「Play On Start」に指定すればいきなりカットシーンを呼び出す事ができます。
![スクリーンショット 2014-07-27 17.39.45.png](https://qiita-image-store.s3.amazonaws.com/0/26453/a267d11f-72ab-5627-c3fe-f267357d8a12.png)

# 作ってみた
用意したものでカットシーンを作成したら以下のような感じになりました。
Unityちゃんの後ろから横を通って前にカメラが動きつつ、
向きはUnityちゃんの足から顔に向かってLookAtします。
EaseはeaseInQuintでキュッと止まる感じにしました。
さらに途中でUnityちゃんがwinポーズを行うという命令を呼び出して
最後に合わせています。

![スクリーンショット 2014-07-27 18.13.18.png](https://qiita-image-store.s3.amazonaws.com/0/26453/e0eaf2f8-3520-b552-b59e-7a34114f5260.png)



実行結果は以下のようになります。
![cutscene.gif](https://qiita-image-store.s3.amazonaws.com/0/26453/0c1a5fb6-245a-ec5f-c953-42c97647e663.gif)

# まとめ
ちょっとしたカットシーンを作りたいなら是非気軽に使ってみてください。
Documentがとても分かりやすく書いてありますので、
まずは一読してみるのをオススメします。
僕はゲーム買っても説明書読まないタイプなので、
読まずに使い始めて止まったらDocument開いて検索してみる、
というスタンスでやってみましたが、それでもここまで簡単に作れました。

以上