🙄

【UE5】数字が増えていくアニメーション

2022/07/18に公開

UE4

UE5

blueprint

tech

加算アニメーション

2種類の方法を紹介します。

Timelineを使う方法

画像１

1. ActorにTimelineを用意

TimeLineをダブルクリックで開き、「＋トラック」の部分より、フロートトラックを追加します。トラック名は 「Alpha」 にしておきます。
右クリックでキーを追加し、キーを選択した状態で、時間と値を設定します。

画像２
キーは2つ打ちます。
1つ目のキーは時間と値を0に設定
2つ目のキーは時間と値を1に設定
こうしてAlphaには1秒かけて0~1の値が入るようになりました。

2. Timelineによって得た値を使ってWidgetのTextを書き換える

「画像１」で示したように、Lerpの値をWidget側で設定したイベントに伝えます。
Lerpの設定ですが、Aには古いスコアを、Bには新しいスコアを設定します。

Widget側のイベントは以下のようになっています。

画像３
これで完了です。
Timelineを使う方法はとても楽でいいですね！

Tickを使った方法

大まかな内容

Actor Componentにカウントアップ処理を記述
Actor Component内の変数を使って、Widgetに出力

1. カウントアップ用のActor Component「AC_Score」を用意

Actor Componentを作成します。名前は「AC_Score」としておきます。
「AC_Score」をPlayer Controllerなど任意のアクタに追加します。

2. 「AC_Score」に以下の変数を用意

OldScore

デフォルト値：0

CurrentScore

デフォルト値：0

ShowScore

デフォルト値：0
Widgetに反映させる用の変数

Time

デフォルト値：0.5

ElapsedTime

デフォルト値：0.0

TimeRate

デフォルト値：0.0

3. 「AC_Score」にスコアアップ開始イベントを用意

説明

こちらのイベントは、加算アニメーションさせたいタイミングで別アクタから呼びます。ここでは加算アニメーションさせるうえでの前準備をしています。
Set Component Tick EnabledでTickをOnにすることにより加算アニメーションが始まります。

4. 「AC_Score」のTickを使って加算処理をさせる

説明

変数：ElapsedTimeで経過時間を記録しています。
変数：Timeが0.5に設定されているので、0.5秒ほど経過すると加算処理が終了します。
加算処理終了のタイミングで変数：ShowScoreに変数：CurrentScoreの値をセットして最終的な値が正しくなるように調整しています。

「AC_Score」の変数：ShowScoreの値をWidget側に反映させる処理を作っておきます。
だいたい以下のような感じです。

バインディング作成

WidgetのTextBlockには特定の変数の値と紐づけるバインディングの機能があります。
「バインディングを作成」後に関数が作られます。

関数内の処理

関数内で変数：ShowScoreの値を毎フレーム参照します。

6. 実行

任意のタイミングで「AC_Score」のUpdateScoreイベントを呼ぶと加算アニメーションが実行されます。