Language:
Page Info
Skill Level:
Engine Version:

Animation

Choose your OS:

AnimationBanner.png

Located along the bottom of the Widget Blueprint Editor are two windows which allow you to implement and control animations for your UI Widgets. The first, the Animations window, allows you to create essentially animation tracks which are used to drive the animation of your Widgets. The second, the Timeline window, is how an animation is applied to a Widget over time which is done by placing Keyframes at specified times then defining how the attached Widget should appear at that Keyframe (this could be size, shape, location, or even coloring options).

Adding Animations

In order to get started with animations in UMG, you will need to first add an animation track. This can be done by clicking the +Animation button in the Animations window. Once you add an animation (yellow box below), you will be prompted to enter a name for the animation track.

Animation2.png

After adding an animation track, the Timeline will become active and you can begin adding Animation Keys that are associated with values that shift over time for your Widgets. It should also be noted that you can have multiple animation tracks for each Widget, for example, having a button move across the screen and flash at the same time.

Adding Animation Keys

There are two methods in which you can add Keys to an animation track. The first is by using the Auto Key checkbox located inside the Timeline window (yellow arrow below). This will automatically add Keys to the Timeline when you make adjustments to a value that supports Keyframing.

Animation3.png

The currently selected animation track is highlighted at the top of the Timeline (indicated by the yellow box above).

The general workflow for adding Keys via the Auto Key option is to specify a time in which you want to reach your desired value for your Widget, then moving the Timeline Bar to that time and setting the value via the Details panel or by using the Grid (mostly used for location, rotation, or scale). Once you have set your end result, scrub to the beginning of your sequence and set the default state for your Widget. When scrubbing the Timeline bar between the two time periods, you should see your change occur gradually over the time period.

The second method in which you can add Keys is by clicking the Add Key button next to a setting that supports Keyframing.

AnimationKeyframing.png

In the image above, the icon next to each of the settings can be clicked on and doing so will result in a Key for the value being added to the Timeline at its current position. In the image below, Keyframes for Background Color have been added at 0.00 and 2.00 where the Background Color of a Button Widget is changed from White to Yellow over 2 seconds.

AnimationKeyframing2.png

Changing Key Values

You can change the value for multiple Keys at a particular time on the Timeline by holding Ctrl and clicking on the Keys.

Animation5.png

Above, we have selected each of the Keys associated with the position of a Vertical Box containing Buttons so that we may set them manually via the Details panel. Manually entering values allows for more precise control (for example) over moving Widgets as we only want to move the object along one axis.

Calling Animations

When you create an animation, a variable for it is also created. If you look on the Graph tab under the Animation dropdown menu in the MyBlueprint window, you will see all your animation tracks you have created. By holding Control and dragging the animation into the graph, you will be able to issue commands to it such as Play or Stop.

Animation6.png

Here we are telling our Start Animation to Play when the Widget Blueprint is constructed.

Animation7.png

And here we are telling our Blinking Button animation to Stop playing when our start_Button is clicked on.

AnimationStop.png

Example: Animated Main Menu

Below are two example animations used to mimic a simple Main Menu screen where Buttons fly in from the bottom of the screen and a Start Button blinks. After following the steps, you should end up with something similar to the example below.

This example is for demonstrating how to set up animation in UMG only as the Buttons do not do anything when clicked on.

  1. Set up your Main Menu however you see fit and include a Vertical Box containing Buttons on your screen.

    Click image for full view.

  2. Click the New button in the Animations window and give the Animation a name such as StartAnimation.

    Animation2.png

  3. Click the Auto Key button in the Timeline Window.

    Animation3.png

  4. Move the Timeline Bar to 0.00 on the Timeline, then click on the Vertical Box containing your Button.

  5. Holding Control, click in the center of the Medallion Widget (yellow arrow) and drag the Vertical Box off screen (1).

    Animation4.png

    This will add Keyframes for the current location on the Timeline (2).

  6. In the Details panel for the Vertical Box, click Anchors and select the Bottom Center option.

    Animation3b.png

  7. Move the Timeline Bar to 1.00 then holding Ctrl, click and move the Vertical Box up so it is fully visible.

  8. In the Details panel for the Vertical Box, click Anchors and select the Center option.

    Animation4b.png

  9. In the Animations window, click the New button to add another animation called BlinkingButton.

    Animation9.png

    Make sure that Auto Key is not checked.

  10. Move the Timeline Bar to 1.00 and click on your Start Button so it is selected.

  11. Under the Appearance section in the Details panel, click the Add Key button next to Background Color.

    Animation10.png

  12. Move the Timeline Bar to 2.00 then change the color for Background Color and add another Keyframe.

    Animation11.png

  13. The Timeline should now look like below for the BlinkingButton animation.

    Animation12.png

  14. Click the Graph tab, then drag in both animation variables and create the graph below.

    Animation13.png

    Here we are saying when the Widget Blueprint is constructed, play the Start Animation (our Buttons flying in from the bottom of the screen). We are then using the Set Timer node to call a Custom Event called StartBlinking every 2 seconds (the Set Timer node is set to Looping). Our StartBlinking Custom Event then plays the Blinking Button animation every 2 seconds (which is our color shift over time from white to green for our Start Button).

  15. Finally, create the Widget Blueprint from either the Level Blueprint or your playable Character Blueprint.

    AnimationCreateWidget.png

    In our MyCharacter Blueprint, we are creating the Widget containing the animations and UI layout of our Main Menu and adding it to the viewport by using the Add to Viewport node.