UNREAL→LABØ

Unreal Engine4の情報をまとめます。

【第15回】タイムラインでアクタをランダムに動かす

 

概要

これまでで、タイムラインを使ってアクタを動かしたり色を変える方法を学びました。
今回もタイムラインを組み合わせ、足場が揺れるような演出(動き)を作っていきます。その際に、複数の動作パターンからランダムでひとつを選択する方法も学習します。 

f:id:miccak:20210513190843p:plain

f:id:miccak:20210518141630p:plain

 

多くは復習に近い内容です。
慣れてきたなと思ったら独自の動作を加えてみたり拡張にチャレンジしてみてください。

 

 

確認用のレベルを作成する

確認用のレベルを作成しておきます。
ゲームモードも設定しておきましょう。

 

動作するアクタを作成する

モックアップのジオメトリブラシをメッシュ化してコリジョンを付けておきます。
好きなメッシュをお使い頂いて構いません。

「追加/インポート」>「ブループリントクラス」>「Actor」で新規作成します。

f:id:miccak:20210514152639p:plain


ブループリントエディタを開いてコンポーネントを追加します(詳細な追加説明は省きます)。

f:id:miccak:20210514152713p:plain

 

「Begin Play 」イベントでバインド用の参照を作成します。

以前同様「作成したアイテムを取得したとき」をトリガーに、動作を開始させることにしました。

もちろんトリガーとなるアクタを新規作成しても構いません。たとえばコリジョンだけのブループリントアクタを作成して、起動させたい地点に配置するといいでしょう。

f:id:miccak:20210514155318p:plain

図では「Get All Actors of Class」で検索して参照を作成しましたが、「BP_KeyStone」型の変数を作成してインスタント編集可能にしたあとレベル上で指定する方法を使っても問題ありません。

続けてバインドしておきます。

f:id:miccak:20210514155427p:plain

 

カスタムイベントを作成しましょう。

f:id:miccak:20210514155644p:plain

 

完成です。

f:id:miccak:20210514155748p:plain

動作部分に取りかかりましょう。 

 

 

タイムライン動作(演出)を追加する

アクタが浮かんでいるような上下移動の演出をタイムラインで演出します。

 

タイムラインを追加しましょう。

f:id:miccak:20210514161948p:plain

 

タイムラインエディタを開いてカーブをひとつ作成します。

連続して動かしたいので、「ループ」にチェックを入れておきます。

タイムラインの「Update」処理内でどうアクタを動かすかを考えます。「Set Actor Location」を使用して動かす予定ですが、座標をそのまま打ちこむか悩むところです。

f:id:miccak:20210514162736p:plain

図では(Z座標を変更する想定で)「-250~-230」を行ったりきたりする設定ですね。

しかし、設置するアクタの座標を調整するたびタイムラインの調整をするのは少し面倒ですね。

 

そこで初期位置を変数に保存して「初期位置からどの程度動くか?」という実装をしてみます。

マイブループリントパネルで、初期位置を保存する「Vector」型の変数を作成します。

f:id:miccak:20210514163226p:plain

 

「Begin Play」イベントの最初に、変数のセットを配置して「Get Actor Location」で自身の位置を取得して保存します。これで開始すぐに初期位置を保存できました。

f:id:miccak:20210514163437p:plain

 

タイムラインのグラフは差分だけを指定するように変更します。

0秒:値0
1秒:値15
2秒:値0

f:id:miccak:20210514163615p:plain

 

「Set Actor Location」ノードを配置して、タイムラインに接続します。 f:id:miccak:20210514165233p:plain

 

初期位置の変数をゲットします。

f:id:miccak:20210514165401p:plain

 

変数ピンからワイヤーを伸ばして「Break Vector」ノードを配置します。
「Set Actor Location」の New Location ピンから「Make Vector」ノードを配置します。

タイムライン実行中、XとY座標は変更しない予定なので、それぞれ接続します。

接続しないと「Set Actor Location」でアクタが「X:0 Y:0」の位置にワープしてしまいます。

Z座標のみタイムラインから出力された値を使います。

f:id:miccak:20210514165815g:plain

 

既存の値に加算するように、ノードを配置します。

f:id:miccak:20210514170023p:plain

 

プレイして確認してみてください。
基本位置から差分だけ動くようなアクタができたはずです。

f:id:miccak:20210514170109p:plain

 

 

アクタの動きにばらつきを与える

このアクタはレベルに複数個配置する予定ですが、すべておなじ動きをするとなると少し単調に見えてしまうかもしれません。そこで、いくつかパターンを用意してランダムにどれかが選ばれるような仕組みにしてみましょう。

 

f:id:miccak:20210514171423p:plain

 

テスト用のマップに複数個配置してみました。

 

パターン① タイムラインの再生速度を変更する。

まずはタイムラインの再生速度を変更する方法を試してみましょう。

タイムラインの再生速度(Play Rate)は任意の値に変更できます。

 

ブループリントグラフにタイムラインコンポーネントをゲットします。


これは先程作成したタイムラインをコンポーネントとして取得したものです。

コンポーネント名はタイムラインの名前になります。

タイムラインのコンポーネントからワイヤーを伸ばして「Set Play Rate」ノードを配置します。

f:id:miccak:20210514172026p:plain

 

これがタイムラインの再生速度(倍率)を変更するノードです。
タイムラインを実行する前に、このノードを実行すればタイムラインの速度が変わります。
好きな値を入れて確かめてみましょう。

 

f:id:miccak:20210514172250p:plain

 

たとえば、「2.0」をいれると、2倍の速度で再生されるはずです。
この再生速度に対して、若干ランダム性をもたせてみましょう。


ランダムな値を受け取る基本的なノードに「Random Float」というノードがあります。
これは「0.0~1.0」のどこかの数値を取得するノードです。

f:id:miccak:20210514172405p:plain

値が0~1とはいえ、0かもしれませんし、0.3かも0.4492かもしれません。
浮動小数点のため範囲は膨大ともいえるのですが、「倍率」や「基礎値に加算するゆらぎ」として使えば、ある程度制御が効ききそうです。

 

f:id:miccak:20210514172903p:plain

図のように組んでみると、タイムライン開始前に「0.5+0~1のランダムFloat数」で0.5倍~1.5倍まで無作為な再生速度が設定されることになります。

 

単純にDelayをランダムにするだけでも異なる動きをさせることもできます。

f:id:miccak:20210514174703p:plain

 

 

パターン② プリセットの中から選択する。

パターン①よりも、すこし選択肢を制限したい場合を考えてみましょう。
いくつかのプリセットを作成して(設定者が想定した値になるように)設定します。

 

ひとまず、パターン①の「Set Play Rate」ノードを処理から外します。

f:id:miccak:20210514173957p:plain

 

タイムライングラフにパターンをいくつか作成します。
図では1秒時点での値を変更するようにしました。

f:id:miccak:20210514175021p:plain

 

同じ処理をいくつか作成して接続します。
Update以降で分岐するようにしてみましょう。

f:id:miccak:20210514175358p:plain

 

「Begin Play 」イベントで、どのプリセットを使うか指定するようにします。

「Random Integer In Range」ノードを追加します。

f:id:miccak:20210514175528p:plain


これは指定した値の範囲でランダムな値を返すものです。

「Random Float」と異なる点は浮動小数点ではなく整数で返すことです。
値をMin0、Max2に設定したならば、0、1、2の間のどこかの値を返します。

 

これを使って「Begin Play」イベントでプリセット値を決定する変数を保存しておくことにします。

f:id:miccak:20210514180019g:plain

 

「Random Integer In Range」の引数にMin0、Max2で指定します。
変数を作ってそれを保存しておくことにしました(変数「RandomMoveNum」)。

 

つづけて「Update」処理で、プリセットにあわせて動きを分岐させましょう。
プリセット用の変数をゲットします。

f:id:miccak:20210514180215p:plain

 

そこからワイヤーを伸ばして、「Switch」と検索します。
「整数型でスイッチ」を選んで配置しましょう。

f:id:miccak:20210514180348p:plain

このノードは受け取った整数値にあわせて分岐するという非常に便利なノードです。

 

「Default」値も設定できますが、ここでは不要なので詳細パネルから削除します。
スイッチノードを選択して詳細パネルでチェックを外しましょう。

f:id:miccak:20210514180533p:plain

ちなみに開始数値も変更できます。

ノードの「+」を押して分岐用の実行ピンを増やして接続します。

f:id:miccak:20210514180651p:plain

 

やってみたものの、それほど差を感じませんね……。タイムラインのグラフ時間幅を広くして山を複数作るなどすれば、よりランダム感が増すかもしれません。


ここでは、①と②を複合して使うことにしました。

f:id:miccak:20210514181349p:plain

 

 

マクロでわかりやすくする

若干タイムライン上の表示がごちゃついてきました。
こういった同じ処理をまとめるには「マクロ」が便利です。

マクロはブループリントの機能のひとつで、「同じ処理」をまとめるときなどに多用します。

マイブループリントのマクロから「+」を押して新規マクロを作成しましょう。
任意の名前をつけます。

f:id:miccak:20210514181614p:plain

 

マクロには入力の「インプット」と出力の「アウトプット」のノードがあります。

イベントグラフの重複しているノード部分をコピペしましょう。

f:id:miccak:20210514181721p:plain

 

加算ピンをインプットに、「Make Vector」をアウトプットにドラッグします。
すると自動でピンが作成されます。

f:id:miccak:20210514181946g:plain

 

インプットピンの名前は詳細パネルから変更が可能です。

f:id:miccak:20210514181941p:plain

 

(不要なノードは削除して)これをイベントグラフ上に配置してみましょう。

f:id:miccak:20210514182509g:plain

f:id:miccak:20210514182504p:plain

グラフが少し見やすくなったのではないでしょうか?

ちなみに、「見て理解できるのであれば不要では?」と思えたら、無理にやらなくても大丈夫です。基本的にノードを折りたたんでいるだけなので、必ず使うべきというわけではありません。「ごちゃついてきたな」「見やすくしたいな」と思ったときに適宜使っていきましょう。

 

今回は以上です!

使用するレベルに配置して設定しましょう。
お疲れさまでした!

 

 

(補足)相対座標で動かす

今回は「Set Actor Location」ノードを使い、ワールド座標(絶対座標)を指定して動かしていましたが、相対座標で動かす方法も見ておきましょう。現在の実装から変更する必要はありませんが、場合によっては相対座標で考える方が使いやすいことも多いので、覚えておくと役に立つかも知れません。

相対座標の移動とは、基準の座標があって、その座標からどれくらい動くか?という考え方です。この場合、コンポーネント単位(コンポーネントをターゲットにして)動かします。

このアクタでは「Defaulte Scene Root」(ルート)から見た、各Static Meshの相対位置を変更します。

f:id:miccak:20210514183017p:plain

 

作ってみましょう。

準備として、移動処理で複数のコンポーネントを指定するのは面倒なので「Scene」コンポーネントを追加してまとめておきます。

f:id:miccak:20210514183502p:plain

詳細パネルから座標を「Root」と同じ「X:0,Y:0,Z:0」にしておきます。

f:id:miccak:20210514183846p:plain

  

ブループリントグラフに、Scene コンポーネントをゲットしてそこからワイヤーを伸ばして「Set Relative Location」を配置しましょう。

f:id:miccak:20210514183539p:plain

 

Root(Defaulte Scene Root)からどれくらい動くか? を指定するのが「Set Relative Location」ノードです。たとえば、(X:0Y:0Z:100)に指定した場合は、RootからZ軸方向に100だけ移動することになります。

 

いままでの処理であれば、以下のような設定で可能です。
いくぶんかスッキリして見えますね。

f:id:miccak:20210514184423p:plain

この場合「Default Location」変数の保存は不要になりますね。

 

 

(補足) 登場演出をつける

タイムラインには、だいぶ慣れてきたのではないでしょうか。

おまけとして、開始時に下降する処理も加えてみます。
余裕があれば追加してみてください。
思いついた演出があれば、どんどん加えていきましょう。

f:id:miccak:20210514191648p:plain

f:id:miccak:20210514191626p:plain


 

プロジェクトのダウンロード

drive.google.com