Animating UI

Use Sequencer in UMG to animate widgets. Widgets animate based on values entered into a material parameter.

Setting Up the Widget

The widget is using the Tracker widget from the example in Setting Material Parameters in UMG.

Create a Tracker widget if you don’t have one ready to use. Then do the following:

1. Add a Text Block that shows a +1 on top of the existing Tracker widget. This indicates that the elimination tracker is incrementing based on the number of eliminated zombies.

   

2. Under Rendering > Render Opacity, set the Render Opacity to 0.0 for this Text Block.

   

3. The widget is ready to be animated.

Setting Up the Animation

To add animation to your UI, you’ll open Sequencer under the Event Graph to animate the icon and "+1". Then you’ll set up the animation in Sequencer.

For this example, the icon pops and the "+1" text appears when the player’s Tracker progresses like in the gif below.

1. Open the Animation window in Window > Animations.

   

2. Click +Animation, and name the animation OnIncrement.

   

Animating a Widget’s Visibility

To animate the UI, you’ll identify the widget to animate, then animate the material or texture associated with that widget in Sequencer in the Animation Window. Start the animation by selecting the IncrementText (+1).

1. Select OnIncrement, then select the +1 Text, then select +Add > Increment Text.

   

2. Select the +plus icon in the IncrementText track and select Render Opacity. This allows you to track the Opacity on the animation timeline.

   

3. Set a key for the beginning of the animation. This determines where the Text begins to fade in and out.

   

4. Set the Render Opacity to:

   1. 1.0 at 0.25 seconds

   2. 0.0 at 0.50 seconds

   

5. Now you have an animation that fades the text in and out everytime the player gets an elimination.

   

Animating a Widget’s Position

Add an animation to the text widget’s position so that the text moves up when it’s visible before it fades away.

1. Click the +plus icon on IncrementText and select Transform.

   

2. Expand Transform > Translation and set the Y to the amount you want the +1 text to move up while it's visible. In this example, the Y Translation keyframes on the text is set to:

   1. 0.0 at 0.0s

   2. -20.0 at 0.25s

   3. -20.0 at 0.50s

   

   Remember to set keyframes for each movement of the text.

Now the text moves upwards when it appears.

Animating a Widget’s Scale

Increase the size of the animated +1 text as it moves to draw attention to the eliminations by animating the widget’s scale settings. This animation gives the illusion of the text "popping" on the screen.

1. Expand IncrementText > Transform > Scale. The X and Y values appear under Scale.

   

2. Set the Scale X and Y as keyframes on your OnIncrement timeline. In this example the Scale keyframes were set to:

   1. 0.0 at 0.0s

   2. 2.0 at 0.10s

   3. 0.0 at 0.50s

Now the +1 text pops in a dramatic effect when the animation plays.

Animating an Image Brush’s Material Parameter

To make the Icon in the material expand with the Tracker progress, access the Material through Sequencer.

1. Select the TrackerMaterial Image, then click +Add > TrackerMaterial in the OnIncrement animation.

   

2. Click the +plus icon in your TrackerMaterial track and select Brush.Brush Material.This adds a material track to the Brush.Brush Material property.

   

3. Click the +plus icon in the new Brush.Brush.Material Track and select IconScaleX and IconScaleY.

   

   Expand IconScaleX and IconScaleY. You can easily manipulate these parameters in Sequencer when the OnIncrement animation plays. By using these settings you can animate the icon scaling up and back down.

4. Set both IconScaleX and IconScaleY to:

   1. 0.7 at 0.00

   2. 1.0 at 0.25

   3. 0.7 at 0.00

   

Now the animation uses the material parameters from TrackerMaterial to animate the icon like in the gif below.

Adding an Animation Condition

Now that your animation is ready to go, tie it to a gameplay value so that it plays an animation when a gameplay value changes.

1. Open the View Bindings window by selecting Window > View Bindings.

   

2. In the View Bindings window, select +Add Condition.

   

   The left box is for the gameplay value that you want tracked for changes so that it will play the animation on the right. Right now, +Add Condition only accepts Float or Int values.

   

3. Select the left box, then select MVVM_UEFN_Tracker > Value. This tracks the Tracker progress by playing an animation whenever the Tracker value increments.

   

4. Click the middle dropdown and select More Than (>).

   The 2 boxes in the middle are the conditions that you want fulfilled to play the animation. Whenever the value changes, it checks if it’s within that condition and if it is, it will play the animation.

   By setting it to More Than (>) 0.0, the UI will play the animation whenever this value changes.

   

5. Select the right box, then select WBP_{YourWidgetName} > Queue Play Animation. The right box is the action to take when this value fulfills the condition. In this case, to play the OnIncrement animation created above.

   

   A list of options pertaining to the animation you want to play appear in View Bindings.

   • In Animation = Play

   • Start at Time = Select a time

   • Num Loops to Play = Number of times the animation loops

   • Play Mode = Forward, Reverse, or Ping Pong

   • Playback Speed = Speed up or slow the animation down

   • Restore State = Restores the animation to its default state

   

6. Click the link icon next to InAnimation, then select WBP_{YourWidgetName} > OnIncrement > Select.

   

Now your animation is set up to play whenever the Tracker progresses.

Final Result

As the players eliminate enemies or NPCs, the UI shows the elimination progress with the icon popping and the +1 appearing, popping, and disappearing.