【Unity】タイムラインにおけるプレイアブルトラック作成手順


冒頭画像_タイムライン

以前の記事で、タイムラインを用いてアニメーションを動かすことについてご紹介しました。よろしければ先に以下の記事を読んでいただけると幸いです。

【Unity】タイムラインを用いたアニメーション管理方法

タイムラインは「Animation Track」以外のモノもトラックに追加することができます。種類を挙げると「Activation Track」「Audio Track」「Control Track」「Playable Track」といったものがあります。

今回はスクリプトをトラックに追加して実行することができる「Playable Track」について、以下の流れでご紹介していきます。

  • プレイアブルトラックとは
  • 下準備
  • プレイアブルトラック作成
  • まとめ

公式のマニュアルはこちら

プレイアブルトラックとは

タイムラインに追加できるトラックの一種。タイムライン上のアニメーションを、スクリプトで制御するための仕組みです。タイムラインに追加すると以下のように表示されます。

PlayableTrack_参考
Playable Track

スクリプトの制御をタイムライン上で行う際に必要になってくるクラスが「Playable Asset」と「Playable Behaviour」の2つです。この2つは基本的にセットで用意して使うものと考えておきましょう。

Playable Asset

「Playable Asset」のスクリプトはテンプレートが用意されています。[Assets]->[Create]->[Playables]->[Playable Asset C# Script]の手順で作成できます。

PlayableAsset_作成手順
Playable Asset 作成手順

「Playable Asset」はその名の通りアセット部分の役割を担うスクリプトです。タイムライン上ではこの部分がトラックに追加され、調整をして利用することになります。

アセット部分
Playable Asset

Playable Behaviour

「Playable Behaviour」も「Playable Asset」同様、テンプレートが用意されています。[Assets]->[Create]->[Playables]->[Playable Behaviour C# Script]の手順で作成できます。

PlayableBehaviour_作成手順
Playable Behaviour作成手順

実際にアニメーションを実行する際の処理をこちらのスクリプトで作成します。タイムライン上の動作に関するイベントを受け取り、各種の処理を行います。

Playable Behaviourには複数のメソッドがあらかじめ用意されています。メソッドの働きは以下の通りです。

OnGraphStart タイムライン開始時に呼び出される。
OnGraphStop タイムライン停止時に呼び出される。
OnBehaviourPlay タイムラインでこのスクリプト実行されたときに呼び出される。
OnBehaviourPouse タイムラインで、このスクリプトが一時停止した時に呼び出される。
PrepareFrame アニメーションの各フレームごとに呼び出される。

簡単な例を用いて動かしてみましょう。

下準備

以前の記事と同様の下準備を施しています。よろしければ先に以下の記事をご覧ください。

*Cubeのアニメーターコントローラーは忘れずに解除してください。

オブジェクトの配置は以下の通りです。

下準備2
下準備

Transformは以下の通りです。

「Cube」 Position ( X: 0, Y: 0.5, Z: 0 )

「Plane1」 Position ( X: 5, Y: 0, Z: 5 )

「Plane2」 Position ( X: 5, Y: 0, Z: -5 )

「Plane3」 Position ( X: -5, Y: 0, Z: -5 )

「Plane4」 Position ( X: -5, Y: 0, Z: 5 )

また今回は色変更のアニメーションを作成していく関係上、「Cube」の色を変えておきます。

今回は青色系のマテリアルを「Cube」にアタッチしています。

Cube_色変更
Cube

プレイアブルトラック作成

最初にプレイアブルトラックをタイムラインに準備しておきます。タイムラインウィンドウのトラックエリアで右クリック押します。その後「Playable Track」を選択して追加完了です。

PlayableTrack_追加手順
Playable Track 追加手順

 

では、スクリプト作成していきます。まず先述した手順で「Playable Asset」のスクリプトを作成します。内容は以下のように書き換えます。

「PlayableBehaviourをつくり、オブジェクト設定し、それをもとにScriptPlayableをつくってリターンする」という流れは最初は丸暗記の方が楽かもしれません。

 

続いて「Playable Behaviour」です。「Playable Asset」と同様の手順で「Playable Behaviour」のスクリプトを作成し、スクリプトの内容を書き換えていきます。

まずは「OnGraphStart」「OnGraphStop」メソッドを用いるパターンをご紹介していきます。

実行することとしては「Cubeの色をタイムライン再生時に緑色停止時に青色に変化させる」といった内容です。スクリプトは以下のように書き換えます。

スクリプトが書き終わったら、先ほど準備しておいた「Playable Track」内にアセットを配置していきます。こちらも手順は簡単です。

「Playable Track」のアセットエリアを右クリックし、追加したい「Playable Asset」を選択して完了です。

PlayableTrack_Asset_追加手順
Playable Asset 追加手順

アセットの配置や幅はドラッグ&ドロップもしくはInspectorビューで設定できます。

アセット配置_設定方法
アセット配置設定

アセットを追加し終えたらさっそく実行していきます。

OnGraphStart_OnGraphStop改
OnGraphStartーOnGraphStop

設定が反映される基準が「タイムラインが再生されているか、いないか」に左右されるため、アセットの配置とは関係なく色の変化が行われていることが確認できます。

OnGraphStart_OnGraphStop_イメージ2
OnGraphStartーOnGraphStopイメージ

 

次は「OnBehaviourPlay」「OnBehaviourPause」です。実行内容は「Cubeの色をアセット部分再生時に緑色非再生時に青色に変化させる」です。

スクリプトは先ほど記載した色変更のプログラムを各メソッドに移し替える形をとっています。メソッド部分のみ記載しておきます。

*「OnGraphStart」「OnGraphStop」メソッドのプログラムはコメントアウトしています。

実行すると以下のようになります。

OnBehaviourPlay_OnBehaviourPause_新2
OnBehaviourPlayーOnBehaviourPause

アセット部分を再生しているときのみCubeが緑色になり、それ以外は青色であることが確認できます。

OnBehaviourPause_OnBehaviourPlay_イメージ1
OnBehaviourPauseーOnBehaviourPlayイメージ

 

最後は「PrepareFrame」です。実行内容は「アセット部分再生時Cubeの色を緑色に変化させる」です。

スクリプトは以下の通りです。こちらも書き換えるメソッド部分のみ記載しておきます。

実行してみましょう。

PrepareFrame_新
PrepareFrame

ループ再生である場合、「PrepareFrame」単体で用いると、アセット部分を通過して以降Cubeの色はずっと緑色のままです。

PrepareFrame_イメージ5
PrepareFrameーイメージ

変化にメリハリをつけたい場合は他のメソッドと併用してみるといいかもしれません。

例:「OnBehaviourPause」を併用してアセット部分に限った色の変化を行う。

まとめ

いかがでしたでしょうか。今回は「Playable Track」を用いたアニメーション表現についてご紹介していきました。

「Playable Asset」と「Playable Behaviour」といった2つのクラスを併用するものであり、複雑に感じた方もいらっしゃるかもしれません。

先述しましたが「Playable Asset」の書き方は丸暗記が手っ取り早いかもしれません。「Playable Behaviour」はメソッドの使い方次第で様々な表現が可能です。

うまく組み合わせて理想のアニメーション表現を実現しましょう。

その他、アニメーション機能について興味がわいた方はこちら↓


Massuuuu