【UE5：検証】Actor Componentでタイムラインを使ってみる
皆様、こんばんは！
最近 UE5 に触れる時間が少し出てきたのでまた楽しんでおります。
今回は「Add Component by Class(クラスごとにコンポーネントを追加)」ノードを利用した時にたまたま見かけた "Timeline Component" というコンポーネント。
Actor Component で「Add Timeline」は利用できないけどコンポーネント経由ならもしかして利用できたりするのかな...という疑問から始まった久々の検証記事です。
結果的に利用できたという内容なのですが、Actor Component で「Add Timeline」ノードは普通の方法で利用できず、使い方的に大丈夫なのかは一切不明なため利用の際は十分ご注意下さい！
UE5.3.2 を利用しました。
この記事で行う事
Actor Component 内で Timeline Component を利用したタイムラインの挙動を作成し、この Actor Component を別の Actor(BP_Cube) で利用してキューブの位置を動かすだけのサンプルを作成します(Blueprint のみです)
始める前に
既にそういう機能が Fab で販売されているので興味のある方は是非！
Component Timeline
Actor Component では検索してもヒットしない
タイムラインの追加はグラフ上で右クリックし、add timeline など検索すると見つかりますが、Actor Component では "状況に合わせた表示" のチェックを外しても見つかりません。
パレットからドラッグ、別の Actor BP からコピペして張るとかも禁止されています。
そこで今回の趣旨である "Timeline Component" を使ってタイムラインを作成し、必要なイベントをバインドして利用するというのが目的です。
Actor Component の作成
コンテンツブラウザから右クリック＞ ブループリントクラス＞ Actor Component をクリックし、名前を "AC_TimelineSample" で作成しました(AC = Actor Component)
Timeline Component の追加
"AC_TimelineSample" のイベントグラフで、「BeginPlay」から「Add Component by Class」を繋ぎ、"Target"ピンに「Get Owner(Actor Component)」、"Class"ピンに [Timeline Component] を指定します。
そして "Return Value"ピンから変数へ昇格(Promote to variable)します。
いつもならここで変数名を決めるんですが、変数名を変えてもデフォルトの New Var に戻ってしまうのでそのまま New Var として扱います(理由は分かりません)
タイムラインエディタ内の [+トラック]ボタンからトラックを追加することができますが、そのトラックは関数が用意されています。
画像にも載せましたが「Add Interp Float」「Add Interp Vector」「Add Interp Linear Color」「Add Event」となっています。
今回はキューブの位置を動かすだけなので「Add Interp Float」を利用します。
「Add Interp Float」とイベントのバインド
先程の New Var を作成した続きです。
New Var から引っ張り「Add Interp Float」を出します。
"Float Curve"ピンから引っ張り、これも変数へ昇格しました。後ほどカーブアセットを作成して指定します。
"Interp Func"ピンにはカスタムイベントを繋ぎ、名前はタイムラインノードに合わせて Update としました。
例えばタイムラインの「Play from Start」を呼ぶと、Update が再生～終了まで継続的に呼ばれます。
"Output"ピンには後ほど作成するカーブアセットに基づいた Float値が流れてきます。後ほどキューブの位置を動かす処理で追記します。
"Property Name" / "Track Name"ピンに必要に応じて名前を付けます。
プロパティ名・トラック名それぞれ None でもバインド先の Update はちゃんと機能していたので必須ではないようです。
「Set Timeline Finished Func」とイベントのバインド
キューブを動かすだけなので終了後に何かすることはないのですが、タイムラインの再生終了後に何かしたい時の備忘録として記載しました。
(おまけの項目で簡単に触れています)
先程の「Add Interp Float」からの続きです。
今度は New Var から引っ張り「Set Timeline Finished Func」を出します。これはタイムラインの "Finished" 実行ピンと同じくタイムラインの再生終了時にバインドしたイベントが呼ばれます。
"New Timeline Finished Func"ピンにカスタムイベントを繋ぎ、名前を「FinishedTimeline」としました。
必須ではないですが、イベントディスパッチャー(OnFinished としました)を作成し、「FinishedTimeline」の後に呼び出しておくと今回作成した AC_TimelineSample を BP で利用する際、"OnFinished” というイベントで利用できるので便利になるかもしれません。
カーブアセットの作成
コンテンツブラウザから右クリックし、その他＞ カーブをクリックします。「カーブクラスを選択」のウインドウが出たら Curve Float を選択ます。名前は CA_Cube としました(CA = Curve Asset)
CA_Cube を開き、右クリック＞ キーを追加から2つキーを追加します(マウスホイールをクリックでもキーの追加は可能です)
追加されると △ アイコンがタイムライン上に作成されます。
1つキーをクリックし、左上の入力欄へ直接数値を入力します。
記載がないので分かりづらいですが、左側が時間、右側が値になります。それぞれ 0, 0 のキーと、1, 1 のキーが出来ればOKです。
これは1秒かけて0～1へ値が変化するという意味になります。
Float値は先程「Add Interp Float」で作成したカスタムイベント(Update)の "Output"ピンから受け取ることが出来ます。
カーブアセットをセットして残りの処理を完成させる
AC_TimelineSample に戻り、変数 "Float Curve" の初期値に CA_Cube をセットします(表示がない場合は AC_TimelineSample のコンパイルが必要です)
AC_TimelineSample の「BeginPlay」に追加の処理を入れていきます。New Var の変数を昇格した後くらいに、「Get Owner」＞「Get Actor Location」を出し、"Return Value" を変数に昇格します。
名前を "Start Location" としました。
この位置から適当な距離移動させるために利用します。
次は「Add Interp Float」で作成したカスタムイベント(Update)に追加の処理を入れていきます。
Lerp(Vector) の "Alpha"ピンと "Output"ピンを繋ぎ、 "Start Location" から Y軸方向に適当な距離動かすような処理にしました。
これで1秒かけて初期位置から250動く挙動が完成です。
BP_Cube で AC_TimelineSample を利用する
コンテンツブラウザで右クリックから、ブループリントクラスをクリックし、Actor を選択して作成します。名前を BP_Cube としました。
BP_Cube を開き、「コンポーネント」パネルからキューブと、AC_TimelineSample を追加したのが画像の左側です。
BP_Cube のイベントグラフより、"AC_TimelineSample"＞ "Get New Var(Timeline Component)"＞ 「Play from Start」を出し、「BeginPlay」と繋いだのが画像の右側です。
余談ですが、「Play from Start」はタイムラインの入力実行ピンの1つです。これは最初からタイムラインを再生したい時に利用できます。
これで BP_Cube をレベルに配置してプレイすると、キューブの位置が1秒間Y軸方向に250動きます。
簡単な挙動ですが、タイムラインの機能は利用出来てそうな雰囲気です。
おまけ：タイムラインの再生終了時に何かしたい場合
「Set Timeline Finished Func」の所でちらっと書いた Finished ですが、使い方は BP_Cube 内だとこんな感じになります。
また、タイムラインで利用可能な関数はイベントグラフで右クリックから「コンポーネント＞タイムライン」カテゴリで確認してみて下さい。
最後に
冒頭にも書きましたが、Actor Component ではタイムラインノードが使えないので無理やり使ってるような気がしなくもないです。
利用できると便利なのに...と感じることがちょくちょくあったので今回はとても勉強になりました。
それでは、また！