Unreal Editor for Fortnite で UI をアニメートする | Fortnite ドキュメンテーション

現時点では、通常のビューバインディングが作成されていない場合に、[View Bindings] で UI の [Animation Condition] フィールドが表示されないというバグがあります。そのため、条件バインディングのフィールドを表示するには、最初に通常のビューバインディングを作成する必要があります。このバグは 33.00 で修正されています。

UMG でシーケンサーを使用してウィジェットをアニメートします。ウィジェットは、マテリアルパラメータに入力された値に基づいてアニメートされます。

現時点では、UI のアニメートが機能するのは、float 型および int 型の変数を使用している場合のみです。その他の機能も UI のアニメートに今後追加される予定です。

このウィジェットでは、「UMG でマテリアルパラメータを設定する」の例で使用したトラッカーウィジェットを使用しています。

使用できるトラッカーウィジェットがない場合は作成します。その後に以下のことを行います。

既存のトラッカーウィジェットの上に「+1」を表示する Text Block を追加します。これは、撃破されたゾンビの数に基づいて撃破トラッカーがインクリメントしていることを表します。
[Rendering (レンダリング)] > [Render Opacity (レンダリングオパシティ)] 内で、この Text Block の [Render Opacity] を 0.0 に設定します。
このウィジェットをアニメートする準備が整いました。

アニメーションを設定する

UI にアニメーションを追加するには、アイコンと「+1」をアニメートするイベントグラフ内のシーケンサーを開きます。そして、シーケンサー内でアニメーションを設定します。

この例では、プレイヤーのトラッカーが進行したときに、次の GIF のようにアイコンが飛び出して「+1」テキストが表示されます。

この例では、プレイヤーのトラッカーが進行したときに、アイコンが飛び出して「+1」テキストが表示されます。

シーケンサーの使用方法については、「シーケンサーおよびコントロールリグ」を参照してください。

[Window (ウィンドウ)] > [Animations (アニメーション)] を選択すると、[Animation] ウィンドウが開きます。
[+Animation (+アニメーション)] をクリックし、アニメーションを「OnIncrement」という名前にします。

UI をアニメートするには、アニメートするウィジェットを特定し、[Animation] ウィンドウのシーケンサー内でそのウィジェットと関連付けられているマテリアルやテクスチャをアニメートします。 IncrementText (+1) を選択することで、アニメーションを開始します。

OnIncrement を選択し、「+1」テキストを選択してから、[+Add (+追加)] > [IncrementText] を選択します。
IncrementText トラックにある [+] アイコンを選択し、[Render Opacity] を選択します。これで、アニメーションタイムラインのオパシティを追跡できるようになります。
アニメーションの開始時のキーを設定します。これによって、テキストがどこでフェードインおよびフェードアウトし始めるかが決まります。
[Render Opacity] を次のように設定します。
1. 0.25 秒で 1.0
2. 0.50 秒で 0.0
これで、プレイヤーが撃破するたびに、テキストをフェードインおよびフェードアウトするアニメーションの準備が整いました。

テキストが見える状態で上に動きながら消えるまで、テキストウィジェットの位置にアニメーションを追加します。

IncrementText にある [+] アイコンをクリックし、Transform を選択します。
Transform > Translation の順に展開し、Y を、「+1」テキストが見えているときに上に動く量に設定します。この例では、テキストが Y 方向に平行移動するキーフレームを次のように設定します。
1. 0.0 秒で 0.0
2. 0.25 秒で -20.0
3. 0.50 秒で -20.0
テキストが動くごとにキーフレームを忘れずに設定します。

これで、テキストが表示されたときに上に動くようになりました。

ウィジェットのスケール設定をアニメートすることによって、撃破に注目されるように、アニメートされた「+1」テキストの動きに合わせてそのサイズを大きくします。このアニメーションによって、画面上でテキストが「飛び出している」と錯覚させます。

IncrementText > Transform > Scale の順に展開します。 Scale 内に X と Y の値が現れます。
Scale の X と Y を、OnIncrement のタイムライン上のキーフレームとして設定します。この例では、スケールのキーフレームは次のように設定されています。
1. 0.0 秒で 0.0
2. 0.10 秒で 2.0
3. 0.50 秒で 0.0

これで、アニメーションを再生するときに、印象的なエフェクトで「+1」テキストが飛び出すようになりました。

Scale の X と Y を、OnIncrement のタイムライン上のキーフレームとして設定します。

画像ブラシのマテリアルパラメータをアニメートする

トラッカーの進行に合わせてマテリアル内のアイコンを拡大するには、シーケンサーを介してマテリアルにアクセスします。

TrackerMaterial Image を選択し、OnIncrement アニメーション内にある [+Add (+追加)] > TrackerMaterial をクリックします。
TrackerMaterial トラックにある [+] アイコンをクリックし、Brush.Brush Material を選択します。これによって、マテリアルトラックが Brush.Brush Material プロパティに追加されます。
新しい Brush.Brush.Material トラックにある [+] アイコンをクリックし、IconScaleX と IconScaleY を選択します。
IconScaleX と IconScaleY を展開します。 OnIncrement アニメーションの再生時に、シーケンサー内でこれらのパラメータを簡単に操作できます。これらの設定項目を使用して、アイコンのスケールアップとスケールダウンをアニメートできます。
IconScaleX と IconScaleY を次のように設定します。
1. 0.00 秒で 0.7
2. 0.25 秒で 1.0
3. 0.00 秒で 0.7

これで、アニメーションが TrackerMaterial からのマテリアルパラメータを使用して、次の GIF のようにアイコンをアニメートするようになりました。

これで、アニメーションが TrackerMaterial のマテリアルパラメータを使用するようになりました。

アニメーション条件を追加する

ここまでで、アニメーションの準備が完了したので、ゲームプレイ値が変化したときにアニメーションが再生できるように、アニメーションをゲームプレイ値と結び付けます。

[Window] > [View Bindings (ビューバインディング)] を選択して、[View Bindings] を開きます。
[View Bindings] ウィンドウで [+Add Condition (+条件を追加)] を選択します。
左側のボックスはゲームプレイ値のためのもので、右側のアニメーションがその変化に応じて再生されます。現時点では、[+Add Condition] で受け入れられるのは Float または int の値だけです。
左側のボックスを選択し、MVVM_UEFN_Tracker > [Value (値)] を選択します。これは、トラッカーの値が増えるたびにアニメーションを再生することによって、トラッカーの進行を追跡します。
中央のドロップダウンをクリックして [More Than (>) (より大きい(>))] を選択します。
中央にある 2 つのボックスは、アニメーションを再生するために満たす条件です。この値が変化するたびに、その条件の範囲内であるかどうかをチェックし、そうであればアニメーションを再生します。
これを More Than (>) 0.0 に設定することで、この値が変化するたびに UI がアニメーションを再生します。
右側のボックスを選択し、WBP_{YourWidgetName} > [Queue Play Animation (アニメーションの再生をキューに入れる)] を選択します。右側のボックスは、この値が条件を満たす場合に行うアクションです。この例では、上記で作成した OnIncrement アニメーションを再生します。
$右側のボックスを選択し、WBP_{YourWidgetName} > [Queue Play Animation] を選択します。$
再生するアニメーションに関するオプションのリストが [View Bindings] 内に表示されます。
- In Animation (In アニメーション) = Play (再生)
- Start at Time (時間で開始) = 時間を選択する
- Num Loops to Play (再生するループの回数) = アニメーションのループ回数
- Play Mode (再生モード) = Forward (順方向)、Reverse (逆方向)、Ping Pong (往復) のいずれか
- Playback Speed (再生速度) = アニメーションの再生を速くするか遅くするか
- Restore State (状態を復元) = アニメーションをデフォルトの状態に戻す
[In Animation (In アニメーション)] の横にあるリンクアイコンをクリックし、WBP_{YourWidgetName} > OnIncrement > [Select (選択)] の順に選択します。
$[In Animation] の横にあるリンクアイコンをクリックし、WBP_{YourWidgetName} > OnIncrement > [Select] の順に選択します。$