Posted at

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

More than 5 years have passed since last update.


カットシーンとは?

ゲームで言うと寸劇のようなシーンの事です。

例えば3D格闘ゲームの勝利シーンなどで使用されています。

win


Unityでカットシーンを作るには?

色々とAssetが出ています。

Aperture Cutscene Editor

Unity uSequencer

などが有名でしょうか。

しかし、有料となっておりますので、ちょっと使いたい時は敷居が高い…。

というわけでテラシュールウェアさんで見かけた

無料のカットシーンエディタ Animator Timeline Editor

を使ってみたいと思います。


Animator Timeline Editorのインストール

Asset StoreからAnimator Timeline EditorをDLしimportするだけで完了です。githubにソースも公開されていますので、そこから入れる事も可能です。

スクリーンショット 2014-07-27 16.43.45.png


Animator Timeline Editor用語

・Take = 作成した1つのカットシーンのこと

・Track = カットシーン内の一つ一つのイベントのこと


事前準備

Animator Timeline Editorのimportが完了しましたので、

その他必要なものをざっと用意して追加しました。

・Unity-chan(Asset Store)

・Direction Light(光源)

スクリーンショット 2014-07-27 16.59.36.png


カットシーンの作成

Unity画面上部メニューからwindow→Animator Timeline Editorを選択。

スクリーンショット 2014-07-27 17.04.35.png

すると以下のようなウィンドウが開かれます。

スクリーンショット 2014-07-27 17.05.03.png

ウィンドウ内のAddComponentを押下します。するとヒエラルキーにAnimatorDataオブジェクトが追加され、以下のような画面が開かれます。

なお、この際に作られたカットシーン名は「Take1」となります。

スクリーンショット 2014-07-27 17.06.39.png


作成したカットシーンにイベントを追加する

ウィンドウ右下にある以下の新規追加マークをクリックします。

スクリーンショット 2014-07-27 18.53.55.png

左から、新規追加、グループ管理の追加、削除となっています。

するとどのイベントを追加するか聞かれるので、ここではTranslationを選択します。

スクリーンショット 2014-07-27 17.07.09.png

軽く命令の説明をすると

・Translation : オブジェクトの移動イベント

・Rotation : オブジェクトの回転イベント

・Orientation : オブジェクトがどこにLookAtするかを指定出来るイベント

などとなっております。詳しくは同梱されているDocumentationを確認してください。

Translationを選択すると以下のような"Translation Track"が追加されます。

スクリーンショット 2014-07-27 17.26.15.png

次にこのTranslation Trackで動作をさせたいオブジェクトを紐付けます。

ここではMain Cameraを動かしたいので、Main CameraをD&Dしました。

スクリーンショット 2014-07-27 17.26.30.png

次にキーフレームを追加します。追加したいフレーム選択して「右クリック→Insert Keyframe」か、選択してウィンドウ内にある「K」を書かれたボタンを押下すると追加することが出来ます。

以下の画像は1frame目、30frame目、60frame目にキーフレームを打った状態になります。

スクリーンショット 2014-07-27 17.27.27.png

次にキーフレームごとのxyz座標を設定します。

パッ見てどこで設定するのか分かりにくいのですが、キーフレームを選択している状態で「<マーク」を押下すると詳細を開くことが出来、値を入力することが出来ます。

スクリーンショット 2014-07-27 17.27.38.png

これでイベントを追加することが出来ました。

複数のTrackの組み合わせで複雑なカットシーンも作成することが出来ます。


カットシーンの終了イベントを受け取る

これもTrackを追加することで解決出来ます。

新規追加→Eventと押下して、Event Trackを追加します。

スクリーンショット 2014-07-27 17.37.45.png

そして、Event Trackに通知したいスクリプトを持っているGameObjectを紐付けます。

そして「<マーク」を押下するとどのイベントを呼び出すか選ぶことが出来ます。

ここで1点注意ですが、スクリプトを記述した際にpublicにしていないとここで選択することが出来ません。ご注意ください。

スクリーンショット 2014-07-27 17.38.57.png

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


スクリプトから操作する

以下のコードで操作することが可能です。


CutSceneEvent.cs


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

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

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

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

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



シーン起動時にいきなりカットシーンを呼び出したい

Optionから設定することが出来ます。

スクリーンショット 2014-07-27 17.39.33.png

ここにある「Play On Start」に指定すればいきなりカットシーンを呼び出す事ができます。

スクリーンショット 2014-07-27 17.39.45.png


作ってみた

用意したものでカットシーンを作成したら以下のような感じになりました。

Unityちゃんの後ろから横を通って前にカメラが動きつつ、

向きはUnityちゃんの足から顔に向かってLookAtします。

EaseはeaseInQuintでキュッと止まる感じにしました。

さらに途中でUnityちゃんがwinポーズを行うという命令を呼び出して

最後に合わせています。

スクリーンショット 2014-07-27 18.13.18.png

実行結果は以下のようになります。

cutscene.gif


まとめ

ちょっとしたカットシーンを作りたいなら是非気軽に使ってみてください。

Documentがとても分かりやすく書いてありますので、

まずは一読してみるのをオススメします。

僕はゲーム買っても説明書読まないタイプなので、

読まずに使い始めて止まったらDocument開いて検索してみる、

というスタンスでやってみましたが、それでもここまで簡単に作れました。

以上