Unreal Editor for Fortnite でアニメートされたタイマーを作成する | Fortnite ドキュメンテーション

時間的制約のあるゲームに向けて、アニメートされたカスタム仕様のタイマーを作成します。 UI アニメーションを使用して、タイマーを脈動させて消えるようにしたり、時計を囲むカスタムカウントダウンの素材を追加したりすることもできます。

このチュートリアルでは以下の方法を解説します。

マテリアルを設定する。
時計の文字盤をアニメートする。
時計の色を変更する。

UI ポップアップチュートリアルの手順に従うことで、コンテンツブラウザでユーザーウィジェットを作成します。

ステップ 1：ウィジェットをセットアップする

ユーザーウィジェットを作成したら、ユーザーウィジェットのサムネイルをダブルクリックしてウィジェットエディタを開きます。

Overlay ウィジェットをウィジェットグラフにドラッグして、右下隅をドラッグしてサイズを 1920 x 1080 に変更します。このウィジェットは、UI が表示される画面として機能します。
[Hierarchy (階層)] パネルで Overlay ウィジェットを右クリックして、ウィジェットの名前を「Root」に変更します。この名前は、このウィジェットが画面のモデルとして機能することも示します。
2 つ目の Overlay ウィジェットを Root ウィジェットにドラッグします。このウィジェットには、アニメートされたタイマーの設計と機能を構成するすべてのウィジェットが含まれます。
[Hierarchy (階層)] パネルで Overlay ウィジェットの名前を「ParentContainer」に変更します。
[Details (詳細)] パネルで、以下のプロパティを設定します。
1. [Padding (パディング)] = 25.0
2. [Horizontal Alignment (水平アライメント)] = [Center Alignment Horizontally (水平方向中央揃え)]
Size Box ウィジェットを ParentContainer ウィジェットにドラッグします。これにより子ウィジェットのサイズが決定および適用されます。 Size Box の子ウィジェットが時計の文字盤となります。
[Hierarchy (階層)] パネルで Size Box ウィジェットの名前を「BGSizeBox」に変更します。
[Details (詳細)] パネルで、[Horizontal Alignment (水平アライメント)] と [Vertical Alignment (垂直アライメント)] を [Center Alignment (中央揃え)] に設定します。
[Minimum Desired Width (望ましい最小幅)] と [Maximum Desired Height (望ましい最大高さ)] のオプションにチェックを入れて有効にし、プロパティを 130.0 に設定します。
以下に示すように、コンテナが Root ウィジェットに配置されます。
Image ウィジェットを BGSizeBox ウィジェットにドラッグします。
[Hierarchy (階層)] パネルで、Image ウィジェットの名前を「Timer」に変更します。
[Details (詳細)] パネルで、[Horizontal Alignment (水平アライメント)] と [Vertical Alignment (垂直アライメント)] を [Center Alignment (中央揃え)] に設定します。
[Brush (ブラシ)] > [Image (画像)] プロパティにマテリアルインスタンスを追加します。これは、時間をカウントダウンするマテリアルにすることもできます。
このマテリアルは親コンテナウィジェットのスペースを埋めます。
Text Box ウィジェットを Parent Container ウィジェットにドラッグします。
[Hierarchy (階層)] パネルで Text Box ウィジェットの名前を「TimerText」に変更します。
[Details (詳細)] パネルで、[Text (テキスト)] プロパティを 00:00 に設定します。
Timer Text ウィジェットはユーザーウィジェットの中央に直接配置されます。

次に、緊急状態になったときによりダイナミックに時間を表示するように、Timer Text ウィジェットをアニメートします。

ステップ 2：タイマーテキストをアニメートする

タイマーの残り時間がわずかになった緊急状態で差し迫った危険を感じさせるために、時計の時間表示をアニメートします。

以下の作成済みのアニメーションでは、タイマーテキストが拡大され、赤色に変わった後に消えます。このアニメーションは、タイマーの仕掛けで設定された緊急モードの間中、繰り返されます。

[Widget Editor (ウィジェットエディタ)] 画面の下部で [Animations (アニメーション)] をクリックします。シーケンサーパネルが開き、アニメーションを作成したりアニメーションシーケンスにウィジェットを追加したりできます。
[+Animation (+アニメーション)] をクリックして、ユーザーウィジェット内にアニメーションファイルを作成します。
アニメーションに「Urgency」と名前を付けます。このアニメーションは、ユーザーウィジェットにバインディングを追加したときに設定されます。
青色の SELECTED の四角がウィジェットグラフを囲みます。
[+Add (+追加)] をクリックして、ユーザーウィジェットのアニメーションに追加可能なオブジェクトのリストを開きます。
[Hierarchy (階層)] パネルで TimerText ウィジェットを選択します。
リストから TimerText を選択し、TimerText をシーケンサーパネルに追加します。
TimerText の横で [+] アイコンを選択し、アニメート可能なプロパティのリストを開きます。
リストから [Transform (トランスフォーム)] を選択します。これにより、テキストをトランスフォームするあらゆる方法 (平行移動、回転、スケール、せん断) が追加されます。
[Scale (スケール)] オプションを開き、[+Keyframe (+キーフレーム)] アイコンを選択してキーフレームをタイムラインに追加します。 X 軸と Y 軸オプションに新しい値を入力すると、テキストのサイズを拡大または縮小できます。
タイムラインの再生ヘッドを 0.25 秒のところに動かし、X 軸と Y 軸の値を 1.5 に変更して、X 軸と Y 軸オプションの横にある [+Keyframe (+キーフレーム)] アイコンを押します。キーフレームがタイムラインに表示され、進行状況がタイマーテキストに示されます。
タイムラインの再生ヘッドを 0.5 秒のところに動かし、X 軸と Y 軸の値を 2.0 に変更して、X 軸と Y 軸オプションの隣にある + キーフレーム アイコンを押します。キーフレームがタイムラインに追加され、進行状況を示すテキストが表示されます。
タイマーテキストの横にある [+] アイコンを選択し、リストから [Color & Opacity (カラーとオパシティ)] を選択します。赤、緑、青、アルファのプロパティがシーケンサーに追加されます。
タイムラインで再生ヘッドをリセットし、[Color & Opacity] の横にある + キーフレームアイコンを選択します。カラーとオパシティの各プロパティの最初のキーフレームがタイムラインに設定されます。
[Color & Opacity] を展開し、赤の値を 1.0 に、緑の値を 0.0 に、青の値を 0.0 に変更します。赤色が作成されます。
再生ヘッドを 0.25 秒のところに動かし、[Color & Opacity] の各プロパティの隣にある + キーフレームアイコンを選択します。タイムラインにキーフレームが追加されます。
再生ヘッドを 0.5 秒のところに動かし、アルファ値を 0.0 に変更して、+ キーフレームアイコンを選択します。アニメーションがタイムラインの最後のキーフレームに到達すると、テキストが消えます。
再生ヘッドをタイムライン内で前後に動かすと、作成したアニメーションがウィジェットグラフで再生されるのを確認できます。

次に、ビューモデルを追加し、ビューバインディングを追加して、タイマーの仕掛けを置き換えてユーザーウィジェットにします。

ステップ 3：ビューバインディングを追加する

デフォルトのタイマーの仕掛けの UI を置き換えるには、テキストボックスウィジェット (タイマーテキスト) をタイマーの仕掛けの設定にバインドします。

Windows メニューから [Viewmodel (ビューモデル)] を選択します。 [Viewmodel] ウィンドウが開きます。
[+Viewmodel] をクリックし、[Device - Timer View Model (仕掛け - タイマービューモデル)] > [Select (選択)] を選択します。これで、すべてのタイマーの仕掛けのビューモデルをユーザーウィジェットにバインドできました。
[Hierarchy (階層)] パネルで TimerText ウィジェットを選択します。
下部のツールバーにある [View Bindings (ビューバインディング)] をクリックすると、[View Bindings] パネルが開きます。
[+TimerText Widget (+タイマーテキストウィジェット)] をクリックして、[View Bindings] パネルにタイマーテキストウィジェットを追加します。
[TimerText (タイマーテキスト)] フィールドを選択し、ウィジェットプロパティのドロップダウンメニューを開きます。
ドロップダウンメニューで [TimerText] > [Text (テキスト)] > [Select] を選択します。タイマーテキストウィジェットのテキストが、バインドされているプロパティとして識別されます。
右の空欄を選択して、バインディングのドロップダウンメニューを開きます。
バインディングのドロップダウンメニューから、[TimerText ViewModel (タイマーテキストビューモデル)] > [Current Time (現在の時間)] > [Select] を選択します。タイマーテキストウィジェットがタイマーの仕掛けの現在の時間にバインドされ、画面に現在の時間が表示されます。

次に、アニメーションをビューモデルに追加し、緊急モード時に画面に再生されるようにします。

ステップ 4：アニメーションを追加する

[View Bindings] パネルでタイマーテキストのバインディングを追加したときと同様の方法で、アニメーションを追加します。

[View Bindings] パネルの上部にある [+Add Condition (+条件を追加)] を選択します。 [View Bindings] パネルに条件の行が追加されます。
ビューモデルのドロップダウンメニューを開き、[User Widget (ユーザーウィジェット)] > [Select] を選択します。条件にユーザーウィジェットが追加されます。
左側のフィールドを選択し、ビューモデルのバインディングのドロップダウンを開きます。
[Creative Timer ViewModel (クリエイティブタイマービューモデル)] > [Is Urgency (緊急状態)] > [Select] を選択します。比較プロパティである IsUrgency によって特定の値と等しいかどうかを確認し、返された値 (true/false) に基づいてアニメーションをトリガーします。
時間フィールドを 1.0 に変更します。緊急状態が 1.0 になれば値が true になり、アニメーションが再生されます。
右側のフィールドを選択してキューのドロップダウンメニューを開き、[User Widget] > [Queue Play Animation (アニメーションの再生をキューに入れる)] > [Select] を選択します。これで、緊急モードが 1.0 になると、作成したアニメーションが再生キューに入ります。
[In Animation (In アニメーション)] の隣にあるバインディングアイコンを選択すると、青色のリンクアイコンに変わります。
[In Animation] フィールドを選択し、[User Widget] > [Animation name (アニメーション名)] > [Select] を選択します。選択したアニメーションがキューに入ると再生されます。
[Start at Time (時間で開始)] の値を 10.0 にカスタマイズします。この値は、アニメーションの再生が開始されるときのフレームレートです。 0.0 に設定すると、フレームレート 0.0 でアニメーションの再生が始まります。
再生速度を 0.5 に設定します。これにより、シーケンサーでは設定速度の半分の速さでアニメーションが再生されます。
[Compile (コンパイル)] をクリックしてユーザーウィジェットを保存します。

ステップ 5：タイマーの仕掛けを追加する

最後のステップでは、ビューポートにタイマーの仕掛けを追加し、その設定をカスタマイズします。

コンテンツブラウザで [Fortnite (フォートナイト)] > [Devices (仕掛け)] フォルダを選択し、すべての仕掛けフォルダを開きます。
アセットビューの検索バーに「Timer」と入力して、タイマーの仕掛けを表示します。
タイマーの仕掛けをビューポートにドラッグします。
[Details] パネルで、[Duration (期間)] を 30.0 秒に設定します。
[Advanced (詳細設定)] オプションを展開して、[Custom Widget Class (カスタムウィジェットクラス)] を表示します。
[Custom Widget Class] ドロップダウンメニューから、使用するユーザーウィジェットを選択します。
2 番目の [Advanced (詳細設定)] オプションセットで、次の設定を行います。
1. Can Interact (インタラクト可能) = No (いいえ)
2. Completion Behavior (タイマー終了時のアクション) = Reset (リセット)
3. Visible During Game (ゲーム中に表示) = Hidden (非表示)
4. Enable Urgency Mode (緊急モードの有効化) = Check (チェック)
5. Urgency Mode Time (緊急モード時間) = 10.0 秒
これで、プレイヤーは仕掛けとインタラクトできなくなり、タイマーは設定された時間実行されるとリセットされます。緊急モードが有効になると、カスタムアニメーションがキューに入り、緊急モード時間で設定された時間分再生されます。
変更を保存し、プロジェクトをプレイテストして、HUD でユーザーウィジェットが動作することを確認します。