Blueprintで線形補間を使ってオブジェクトのループ移動をするやり方

Blueprintで線形補間を使ってオブジェクトのループ移動の処理の実装をします。
動きはドカンが縦方向に移動して、終点まできたら加速度をゆるめるような
ゲームによく見られる動きになります。

まず、基準となるBlueprintクラスですが、Actorクラスを継承した以下のような構成になります。
SpriteとしてPaperSpriteを利用しています。

Blueprintを生成したら、ConstuctionScriptの編集をします。
ここでは、タルのオブジェクトを置く初期位置を決定するBlueprintの編集をします。
全体の図は以下のようになります。

ここでは、SelectVector関数を使っています。
SelectVector関数はbooleanのPickAがtrueの場合はAをfalseの場合はBを返す関数です。
Blueprint内にpublicの変数EndLocationとStartLocationを定義し、
SelectVectorにセットすることで、ueEditor上でタルの位置を視覚的に調整できるような配慮をしています。

次にBlueprintのEventGraph内を編集します。 ここでは、定期実行されるTimeLine Nodeを作成して、移動処理を行います。
今回作成するBluePrintの全体図は以下のようになります。

まず、EventGraph内で右クリックを押してTimeLineと入力します。
すると、TimeLineを作成するというボタンができるので実行してください。

TimeLineが作成されたら、ノードをダブルクリックして、編集画面に入ります。
編集画面に入ったら、左上に表示されるf+ボタンをクリックし、
左上に表示されるtimelineの命名欄にLerp Alphaと入力します。
全体の完成図は以下のようになります。

図中で右クリックを押して、キーを追加ボタンを押すと、上図のような白点が打たれます。
これが転換ポイントなります。
この図では、2秒間のうちに1を出力する線形補間の値を返すようにしていますが、
始点と終点の部分にカーブをつけることで、終点・始点にくると徐々に減速するような処理を作り出しています

まずは、2つ白点を作ってそれぞれ、
時間:0,値:0
時間:2,値:1
に設定しましょう。

下図のように作成した点をクリックすると、時間と値を出力する欄がでるので
項目をを選択すると時間・値を編集することができます。

次にカーブをつけるための補間点を作成します。
先と同じように2つ点を作りそれぞれ以下のように入力してください。
時間:0.4,値:0.1
時間:1.6,値:0.9

続いて、補間点にカーブをつける設定をします。
白点にカーソルを置いて、右クリックを押します。
すると、ウィンドウ出現するので、補間欄のブレーク項目を選択します。

すると、白点の左右に線が現れるので、上図のようにスタートに近い線の場合は左の線を下に調整し、
終点に近い点の場合は右線を上に調整し、曲線になるように調整して、EventGraphに戻ってください。

移動量に線形補間を加える

作成したtimelineのleap alphaをドラッグアンドドロップして、
Leap(vector)を選択し、nodeを作成します。
そこに、objectの始点と終点のベクトルを代入します。
ここでは、Blueprint変数として定義した、始点と終点を表すベクトルを代入しています。

オブジェクトの移動を切り替える処理

右クリックを押して、customEventと入力し、カスタムイベントノードを2つ作成します。
それぞれ、名前をLiftForward・LiftBackwordとしました。
それぞれをPlay from start・Reverse from endに結びつけます。

TimeLineEventが終了したら移動方向を切り替えるために、
ETimeLineSwitchノードを使用します。
TimeLineのDirectionをdrag and dropしてETimelineDirectionでスイッチを選択し、
ForwardにLiftBackword・BackwordにLiftForwardを結びつけてください。

移動の終点まできたら、少し待ってから移動を再開する

Delayノードを使うことによって、イベントが終了した時に、waitする処理を行うことができます。
ここでは、StopDelayというBlueprint変数を作りその値を参照するようにしています。

これで、線形補間を使用したオブジェクトのループ移動が完成しました。

このエントリーをはてなブックマークに追加