In this video you are going to learn
how animations work in Unreal Engine, how they are created as well
as playing them and other cool stuff like using materials as animations. If
that sounds interesting, let's get into it!
Most animations in Unreal take place inside a
widget class, which is what we will cover today. So let's create one and add an element such
as an image to get access to animations.Then in the bottom left create an animation, select
the image, right click in the timeline and add the image. The canvas slot type gives you
access to certain special properties, but that's not important for now. What is important
though is the timeline where the magic happens.
Animations in Unreal work under the
commonly-used principle of keyframes. Keyframes represent a certain state of
an element at a given time. Put simply, a keyframe represents the value of something
before and after. In between these keyframes the element will be animated like repositioning this
image linearly or smoothly, but more on that in a bit! The timeline is basically a container for
these keyframes. Animations can happen over time, such as changing the rotation, or instantaneously
like changing its visibility. There are many more properties that can be changed and animated and
you can recognize those by checking for this icon next to any property in the details tab, which you
can also press to immediately add to the timeline. So let's put this into practice! I am going to
move the image from the left side to the right side and I'm also going to rotate it. So let's go
to the timeline, to our image and click on "track" and from this menu let's get transform. Now
we will be able to transform the translation, rotation, scale and shear. Now make sure that
every time you change something and want to commit to it that you add a new keyframe by pressing on
these buttons. As well, you can also toggle this right here which is going to automatically create
new keyframes every time you change something. Now let's make sure we have keyframes in the
beginning and after 1 second I'm going to go to translation and move the X to a higher value,
let's say 600, then let's go to rotation and I'm going to rotate this 180 degrees. Now if I'm going
to play this you should see the image go from left to right and also rotate. Now, we have a very
basic animation, but this is only the beginning. Alright! Now we know how to create
animations, but currently they're pretty boring, aren't they? How about
we spice things up by adding some interpolation. (ball on screen) This will let us
ease in the animation, or ease out or even both. To do that, select the keyframes you
want to change the interpolation to, right click and select any of the cubic ones for
smooth interpolation. And while sometimes this can be enough, more often than not you will want
to freely control how things speed up or down, start, stop or pause. You can do just that
by opening the sequencer curves. From here, you can edit the curve of the animation however
you want by moving the keyframes' tangents around. What I highly recommend is setting the keyframes
to weighted tangents to get maximum control. Now we can replicate that previous ease in and out
and change it as we see fit. On a related note, if you want to learn more about slowing in and
out, make sure to watch this video by Daniel Floyd from New Frame Plus, I had a blast watching
it and if you're interested in this kind of stuff, definitely give it a try. There is going to be
a link in the description. Back to the video, using the sequencer curves is usually
very useful for more complex animations, so let's take a look at that now!
Taken from the Mario Party's bopping spree recreation, this is one of the animations
I used to give feedback to the player that they scored a point. While this is still not
very complex, it surely is different from the previous square. Let us take a look
at what happens throughout its duration. So the first thing that happens in this
animation is that it is fading in and also moving upwards. This is going to give it a feel of
dynamism. In order to make this more interesting, we're also rotating the characters. This pretty
much completes the initial upwards movement and makes it feel like a jump. Right, you can see how
these basically jump upward. There is no way to automatically rotate the characters in such a
manner so you will have to do these manually. Then, after half a second in which the text is
stationary, so the player has time to read, it is going to start fading out and moving upwards.
But this time we are not going to introduce any rotation. This is still a pretty simple animation,
but it is much better than having the text pop out from nowhere. Now let's take a look at another
animation. The first thing that takes place is that these two progress bars are going to start
filling in. Then they are going to fade out in favor of the notification itself. The glowing
lines aren't actually animated in the widget, but more on that later. Then after a whole
second and a half the notification is going to fade back out. Again, still pretty simple,
but I hope you can see how this is going to scale for even more complex animations.
But how do we play these animations? That is done through code and I will show you two
ways of playing animations. Now let's go back to our original animation. If we're going to head
over to the graph, we will be able to see that our animation is now a variable. And now accessing
this we will be able to play it in various ways. So let's get a custom event and I will call
this "Play animation". And to play it once, frankly you just have to call Play Animation
from the variable. Now, things get a bit more complicated when we want to queue animations. So
I will get another custom event and I will call this "Queue animation". Let's get this variable
again and from here I will check if it is playing. But before checking with a branch if this is true
or not, I am going to negate it. This way when the animation is not going to be playing, this will
return true, otherwise it is going to return false. And if it is true, I am going to call "Play
Anim" and from false what I'm going to do is get a delay with a duration of 0.1 and once this is
completed, I am going to once again check if this is true or false. So this is basically a loop that
is going to happen every 0.1 seconds until this condition is going to be true. Now there is one
thing with this system that you should know. This is only going to work if you queue two animations
at once. If you want to queue more at the same time, it is not going to work properly. For that,
you will have to develop a system that is going to keep count of how many times it was called and
with what information. That should not be too hard to develop, but if you have any problems make sure
to let me know down below! But animations can also be created outside the widget editor and then
added to a widget by creating materials! While materials are mostly used for in-game meshes,
they can also be assigned to image-accepting properties, such as an... image. Let's
recreate this effect and display it on the UI. So inside the material the first thing that you
want to do is to go your main node then go to material domain and choose User Interface. Now for
this material in particular we will also have to choose translucent mode. In order to actually see
this, let's go to final color and choose white. And now we can actually see something on the
left side. So first, I'm going to get a parameter called "Size" and its default value is going to be
0.5. Now I'm going to multiply this with a number and this number should be somewhere around 0.95
and then using this I'm going to set the radius of a radial gradient exponential. So let's get one
and plug this inside the radius. Then in density I would like this to be pretty dense, so let's go
with 10. And this is going to give us this neat radial gradient. Now we're going to add something
to this, but first let's plug this in opacity. Now we're still going to see that white square because
B is 1, so let's see how we're going to set that one up. Let's copy this a couple of times. Then
set the density of the third one to 50. Then I'm going to get the size and multiply it with 0.8. I
will plug Size inside the radius of the second one and this inside the radius of the third one. Then
from the second one I am going to subtract the third one and this is going to give us a hollow
ring. Then this is going to be multiplied with something that is going be the actual movement of
the animation and then added to our initial radial gradient. And then out of nowhere everything
is going to look clean and we will also have a nice texture that looks like this. Now we will
want to move this over time so let's get a panner and plug this in the UVs. Then in Coordinate, get
Texture Coordinates and then in Time, obviously, we are going to get Time and plug this in here.
Now for the speed I only want this to move upwards so I'm going to choose 0.5 on Y. And if I'm going
to preview this now, it should be moving. Now if I'm going to plug this inside the multiply
node we should see something pretty strange. So what we're doing is basically combining
the hollow ring with this moving texture. And then if I'm going to stop previewing this, you
should be able to see the animation that you saw in the beginning. The only thing that is missing
is an actual image or texture. Then what we can do is open a widget, then go to this material,
select it, then select this image, go to brush, image, then click on this arrow. And as you
can see now this is going to be animated. And obviously you can still animate this inside the
widget. So if I'm going to play this animation, you will see it move from left to right.
If you liked this tutorial then make sure to subscribe to stay up to date with other
videos and hit that bell if that's your thing. As well, consider supporting my work
over on Patreon like these kind folks: Aviram Ifm, Bader AlQahtani, ETIOSA ODIA, Giovanni
Pena, Golden Glow Master, Leonardo Pereira, Luc Schurgers, Realitätsverlust and Taman Gerring.
And let me know in the comments: what do you like more? Easing in or easing out? Can't wait to hear
your answers! Now make sure to go and watch this tutorial to learn more about UI! Thank you for
watching and I'll catch you in the next video!
