アニメーション

UMG でアニメートされた UI エレメントを作成する方法を説明します。

Windows
MacOS
Linux

AnimationBanner.png

Widget ブループリント エディタ の下側に沿って 2 つのウィンドウがあります。こうしたウィンドウでは、UI ウィジェットのアニメーションを実装し、制御できます。最初に、[Animations (アニメーション)] ウィンドウで、ウィジェットのアニメーションを動かすために使用する基本的なアニメーション トラックを作成できます。次に [Timeline (タイムライン)] ウィンドウは、時間の経過に伴いアニメーションがウィジェットにどのように適用されるかを示します。これは、指定した時間に キーフレーム を配置し、次にアタッチしたウィジェットがキーフレームでどのように表示されるかを定義します (サイズ、形状、位置、場合によってはカラー オプションも定義)。

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

UMG でアニメーション開始するには、最初にアニメーション トラックを追加する必要があります。これは、[アニメーション] ウィンドウで [+Animation] ボタンをクリックして行います。アニメーションを追加したら (下の黄色いボックス)、アニメーション トラックの名前を入力するよう促されます。

Animation2.png

アニメーション トラックを追加すると、タイムライン がアクティブになり、ウィジェットに対して時間の経過に伴い変化する値に関連付けられた アニメーション キー の追加を開始できます。各ウィジェットに対して複数のアニメーション トラックを持つことができることにも注意してください。例えば、ボタンを画面上で動かし、同時に点滅させることができます。

アニメーション キーの追加

アニメーション トラックにキーを追加するには、2 つの方法があります。1 つめの方法は タイムライン ウィンドウ (下の黄色の矢印) の内側にある Auto Key チェックボックスを使用するものです。この方法では、キーフレーム化をサポートする値を調整するときにタイムラインに自動的にキーを追加します。

Animation3.png

現在選択したアニメーション トラックは、タイムライン (上の黄色いボックスで表示) の一番上でハイライトされます。

[Auto Key] オプションを使用してキーを追加する一般的なワークフローは、ウィジェットに対して必要な値に到達する時間を指定するものです。次に タイムラインバー をその時間に移動し、[Details (詳細)] パネルで値を設定するか、グリッド (主に位置、回転、またはスケーリングに使用) を使用します。最終結果を設定したら、シーケンスの始まりまでスクラブして、ウィジェットのデフォルト状態を設定します。2 つの時間の間でタイムライン バーをスクラブすると、時間の経過に伴い次第に変化が起こるのがわかります。

キーを追加する 2 つめの方法は、キーフレーム化をサポートする設定の隣にある [キー追加] ボタンをクリックするものです。

AnimationKeyframing.png

上記の画像では、各設定の隣にあるアイコンはクリック可能であり、そうすることで値のキーは現在位置でタイムラインに追加されます。以下の画像では、バックグラウンド カラー のキーフレームが 0.00 と 2.00 に追加されました。この場合、ボタン ウィジェットのバックグラウンド カラーは2 秒間で白から黄色に変化します。

AnimationKeyframing2.png

キー値を変更する

複数のキーの値をタイムライン上の特定の時間で変更できます。これは、Ctrl キーを押しながら、そのキー上でクリックして行います。

Animation5.png

上では、ボタンを含む Vertical Box の位置に関連付けられた各キーを選択し、[詳細] パネルで手動で設定できるようにしました。オブジェクトを 1 つの軸だけに沿って動かしたいため、値を手動入力することで、(例えば) 動くウィジェットをより正確に制御できます。

アニメーションを呼び出す

アニメーションを作成する場合、その変数も作成されます。[MyBlueprint] ウィンドウの [アニメーション] ドロップダウン メニューの[グラフ] タブを見ると、作成したすべてのアニメーション トラックがあることがわかります。Control キーを押しながら、アニメーションをグラフにドラッグすることで、それに対して Play や Stop などのコマンドを発行できます。

Animation6.png

ウィジェットのブループリントが構築されたときに、Start Animation で Play するように指示します。

Animation7.png

start_Button がクリックされると、Blinking Button アニメーションに対して再生を Stop するように指示します。

AnimationStop.png

例: アニメートされたメインメニュー

以下は、画面下部からボタンが出てきて、Start ボタンを点滅させる簡単な メイン メニュー 画面のようなものを作るために使用するアニメーションの2 つの例です。以下の手順に従うことで、以下の例に類似したものになります。

この例は、UMG でアニメーションをセットアップする方法を実演する目的に限ったものです。クリックしてもボタンは何も機能しません。

  1. 適切に見えるようにメインメニューをセットアップし、画面上に ボタン を持つ Vertical Box を含めるようにします。

    画像をクリックしてフルサイズで表示

  2. [アニメーション] ウィンドウで [新規] ボタンをクリックし、アニメーションに StartAnimation などの名前を付けます。

    Animation2.png

  3. [タイムライン] ウィンドウAuto Key ボタンをクリックします。

    Animation3.png

  4. タイムラインで タイムラインバー0.00 に移動します。次に、ボタンを含む Vertical Box をクリックします。

  5. Control キーを押しながら、メダル形状のウィジェット (黄色の矢印) の中央をクリックして、画面から Vertical Box をドラッグします (1)。

    Animation4.png

    これでタイムラインの現在の位置にキーフレームが追加されます (2)。

  6. Vertical Box[詳細] パネルで、[Anchors] をクリックして、下部中央 オプションを選択します。

    Animation3b.png

  7. タイムラインバー1.00 に移動します。次に、Ctrl キーを押しながら、Vertical Box が完全に見えるように上に移動します。

  8. Vertical Box[Details (詳細)] パネルで、Anchors をクリックして、中央 オプションを選択します。

    Animation4b.png

  9. [アニメーション] ウィンドウで [新規] ボタンをクリックし、BlinkingButton と呼ばれる別のアニメーションを追加します。

    Animation9.png

    [Auto Key] にチェックが入っていないことを確認してください。

  10. タイムラインバー1.00 に移動します。Start ボタンをクリックして選択します。

  11. [詳細] パネルの [Appearance] セクションで、[Background Color] の隣にある [キー追加] ボタンをクリックします。

    Animation10.png

  12. タイムラインバー2.00 に移動します。次に、Background Color の色を変更し、別のキーフレームを追加します。

    Animation11.png

  13. BlinkingButton アニメーションの タイムライン が以下のようになるはずです。

    Animation12.png

  14. [グラフ] タブをクリックして、両方のアニメーション変数をドラッグして以下のグラフを作成します。

    Animation13.png

    Widget ブループリントが構築されたときに、Start Animation (ボタンが画面下部から出てきます) を再生するように指示しています。次に Set Timer ノードを使用して、2 秒毎に StartBlinking と呼ばれる カスタム イベント を呼び出します (Set Timer ノードは Looping するように設定されています)。StartBlinking カスタム イベントは、Blinking Button アニメーションを 2 秒ごとに再生します (これは、時間経過に伴う Start Button の白から緑へのカラーシフトです)。

  15. 最後に Level ブループリント または再生可能な Character ブループリントのいずれかから Widget ブループリントを作成します。

    AnimationCreateWidget.png

    MyCharacter ブループリントでは、アニメーションを含むウィジェットとメインメニューの UI レイアウトを作成し、それを Add to Viewport ノードを使用してビューポートに追加します。

Select Skin
Light
Dark

新しい Unreal Engine 4 ドキュメントサイトへようこそ!

あなたの声を私たちに伝えるフィードバックシステムを含め、様々な新機能について開発をおこなっています。まだ広く使える状態にはなっていないので、準備ができるまでは、ドキュメントフィードバックフォーラムで、このページについて、もしくは遭遇した問題について教えていただけると助かります。

新しいシステムが稼働した際にお知らせします。

フィードバックを送信