ウィジェット ブループリント エディタ の下部には、UI ウィジェットのアニメーションを実装して制御できる 2 つのウィンドウが用意されています。最初の [Animations (アニメーション)] ウィンドウでは、基本的にウィジェットのアニメーションの駆動するためのアニメーション トラックを作成します。2 つ目の [Timeline (タイムライン)] ウィンドウでは、時間の経過に伴って、アニメーションがどのようにウィジェットに適用されるかが示されます。具体的には、特定の時点に キーフレーム を配置し、アタッチされたウィジェットがそれらの時点でどのように表示されるか (サイズや形状、位置や色付けのオプションなど) を定義します。
アニメーションを追加する
UMG でアニメーションを開始するには、最初にアニメーション トラックを追加する必要があります。追加するには、[Animations] ウィンドウの [+ Animation (+ アニメーション)] ボタンをクリックします。下の図で黄色で囲まれているボタンを使ってアニメーションを作成すると、アニメーション トラックの名前を入力するよう促されます。
アニメーション トラックを追加すると タイムライン がアクティブになり、ウィジェットの、時間の経過とともに変化する値に関連付けられた アニメーション キー を追加できるようになります。また、ボタンを画面上で動かすと同時に点滅させるなど、それぞれのウィジェットに複数のアニメーション トラックを含めることができる点にも注意してください。
アニメーション キーを追加する
アニメーション トラックにキーを追加するには、2 つの方法があります。最初の方法では、[Timeline] ウィンドウの [Auto Key (自動キー)] チェックボックスを使用します。この方法ではキーフレーム化をサポートする値を調整する際に、キーがタイムラインに自動的に追加されます。
現在選択しているアニメーション トラックは、[Timeline] ウィンドウの一番上に強調表示されます (上の図では黄色いボックスで表示)。
[Auto Key] オプションを使ってキーを追加する一般的なワークフローでは、まずウィジェットに対して目的の値に到達する時間を指定します。次に タイムライン バー をその時間に移動して、[Details (詳細)] パネルまたはグリッド (主に位置、回転、またはスケールに使用) を使って値を設定します。最終結果を設定したらシーケンスの冒頭までスクラブし、ウィジェットのデフォルト ステートを設定します。2 つの時点間でタイムライン バーをスクラブすると、時間の経過に伴って変化が起こる様子を細かく確認できます。
キーを追加する 2 つ目の方法は、キーフレーム化をサポートする設定の隣にある [Add Key (キー追加)] ボタンを使用するやり方です。
上の画像では、各設定の隣にあるアイコンはクリック可能になっています。アイコンをクリックすることで、その値のキーがタイムライン上の現在の時点に追加されます。下の画像では、背景色 のキーフレームが 0.00 と 2.00 の時点に追加されています。この場合、ボタン ウィジェットの背景色は 2 秒間で白色から黄色に変化します。
キー値を変更する
タイムライン上の特定の時点にある複数のキーの値を変更することもできます。こうするには、Ctrl キーを押したまま、目的のキーをすべてクリックします。
上の画像では、ボタンを含む Vertical Box の位置に関連付けられたキーをそれぞれ選択しているため、これらを [Details] パネルで手動で設定することができます。オブジェクトを 1 つの軸だけに沿って動かしたいため、値を手動入力することで、たとえば動くウィジェットなどをより正確に制御できます。
アニメーションを呼び出す
アニメーションを作成する際はその変数も作成されます。[MyBlueprint (マイ ブループリント)] ウィンドウの [Animation (アニメーション)] ドロップダウン メニューにある [Graph (グラフ)] タブには、作成したすべてのアニメーション トラックが表示されます。Ctrl キーを押しながらアニメーションをグラフにドラッグすることで、それに対して Play や Stop などのコマンドを発行できます。
次の画像では、ウィジェット ブループリントが構築されたときに再生するよう、Start Animation に指示しています。
次の画像では、start_Button がクリックされた際に再生を停止するよう、Blinking Button アニメーションに指示しています。
例：アニメートされたメインメニュー
シンプルな メインメニュー 画面にアニメーションを使用する以下の例に従って、手順を確認してください。最初のアニメーションでは、ボタンが画面下部から中央に移動します。2 つ目のアニメーションでは [Start] ボタンが点滅します。 以下の手順に従って、この例と同じような結果を出してください。
この例では、UMG でアニメーションを設定する方法のみを示しています。それぞれのボタンをクリックしても何も起こりません。
-
メインメニューのレイアウトを設定します。このレイアウトには 2 つの Vertical Box が含まれています。最初の Vertical Box には「GAME TITLE」 (ゲーム タイトル) というテキストが、2 つ目の Vertical Box には「START」および「QUIT」と記載された 2 つのボタンが含まれています。次の画像はこのレイアウトとその構造です。
クリックしてフルサイズで表示
-
ボタン を含む 2 つ目の Vertical Box を選択します。その [Details] パネルのプロパティに移動して、[Anchor (アンカー)] を次の画像のとおりに設定します。
クリックしてフルサイズで表示
-
[Slot (Canvas Panel Slot)] セクションで、選択した Vertical Box ( ボタン を含むもの) のプロパティを設定します。
- [Position X]：-300.0
- [Position Y]：500.0
- [Size X]：600.0
- [Size Y]：200.0
クリックしてフルサイズで表示
-
[Slot (Canvas Panel Slot)] セクションで、選択した Vertical Box ( ボタン を含むもの) の [Position Y (位置 Y)] を「1200.0」に設定します。
クリックしてフルサイズで表示
-
[Animations] ウィンドウの [+ Animation] ボタンをクリックして、アニメーションに「StartAnimation」と名前を付けます。
-
[Animations] ウィンドウの [Position Y] オプションの隣にある [Add Key (キーを追加)] ボタンをクリックして、アニメーションに「StartAnimation」などと名前を付けます。
-
タイムライン バー をタイムライン上の「1.00」の時点に移動します。
-
[Top (上)] を「500.0」に設定し、[Add key to the current time (現在の時間にキーを追加)] をクリックします。
-
[Animations] ウィンドウの [+ Animation] ボタンをクリックして、アニメーションに「BlinkingButton」と名前を付けます。タイムライン バー をタイムライン上の「1.00」の時点に移動します。
-
ウィジェットのレイアウトで [Start] ボタンを選択します。[Details] パネルに移動して、[Appearance (アピアランス)] セクションの [Background Color (背景色)] の隣にある [Add Key] ボタンをクリックします。
クリックしてフルサイズで表示
-
タイムライン バー をタイムライン上の「1.50」の時点に移動します。
-
[Animations] ウィンドウの [Background Color] プロパティを次のように設定します。
- [R] を「0.1」に設定
- [R] を「1.0」に設定
- [R] を「0.1」に設定
-
タイムライン バー をタイムライン上の「2.00」の時点に移動します。[Animations] ウィンドウの [Background Color] プロパティを次のように設定します。
- [R] を「1.0」に設定
- [R] を「1.0」に設定
- [R] を「1.0」に設定
-
[Graph] タブをクリックして、このウィジェットのブループリント スクリプトを作成します。
-
次の画像のとおりにブループリント スクリプトを作成します。
このスクリプトでは、ウィジェット ブループリントが構築された際に Start Animation が再生され、ボタンが画面下部から中央に移動します。 次に、Set Timer ノードを使って StartBlinking という カスタム仕様のイベント を 2 秒ごとに呼び出します (Set Timer ノードはループするように設定されています)。 StartBlinking というカスタム仕様のイベントによって Blinking Button アニメーションが 2 秒ごとに再生されます。これは、時間の経過に伴って [Start] ボタンの色を白色から緑色に変えるものです。
-
最後に、ウィジェット ブループリントを レベル ブループリント またはプレイ可能なキャラクター ブループリントのいずれかから作成します。
MyCharacter ブループリントでは、アニメーションを含むウィジェットとメインメニューの UI レイアウトを作成し、それを Add to Viewport ノードを使用してビューポートに追加します。