🎃

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

2022/07/18に公開約2,600字

加算アニメーション


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

Timelineを使う方法


画像1

1. ActorにTimelineを用意

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

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

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

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

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

画像3
これで完了です。
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の値をセットして最終的な値が正しくなるように調整しています。

5. Widget側の用意

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

バインディング作成


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

関数内の処理


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

6. 実行

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

BPのコピペ

Discussion

ログインするとコメントできます