All right, welcome back everybody in this video we are going to work on creating some HUD animations. We've got a HUD layout in place, we have bound some variables to our HUD. But if I click the play button up here right now, you will notice that our HUD just kind of magically appears on screen and that's not very cool. A lot of games have these HUD elements, you know, flying in from the the outer edges of the screen, or fading into existence, that sort of thing. So that's the kind of thing we're going to be working on over the next few videos here. Now I'm not going to animate all the different HUD elements in this one video.

In this video, I'm going to be focusing on creating a HUD animation for the upper left hand portion of our HUD that is our player portrait and health information, that kind of thing. So to get us started here, make sure you find your way over to your W b p HUD. That is in the content Metroidvania widgets folder. Let's open this guy up. And to create an animation for your HUD elements, you need to come down into this bottom left area of the editor here where it says animations and we want to click this green plus animation button. And I'm going to name this animation, HUD left intro, this is going to be the animation that we play for the left most portion of our HUD.

Now with this animation is selected, I now then get to decide which various widgets here I want to be included with this animation. This animation is going to be called in some script that we create a little bit later on. So the first thing I want to animate here is going to be our portrait background widget that is going to be this kind of Pink in black ink stroke in the background. And the way you can add these things down to in in your animations timeline is to click some of these little buttons here that's kind of a diamond shape with a plus button on it. And when you do so, it's going to add your portrait background down to your timeline where you can modify some of these properties over time. Now before I add our portrait background down here into our animation timeline, I'm going to modify our position y, the default position.

I set it in these locations, all these widgets in these locations to get a started because I wanted you to see where the final position for all these widgets is going to be when we finish. Now that we're going to start animating some of these things, I'm going to start changing some of these initial positions. Okay, so with our portrait background widget selected, come under the Details panel. And we're going to change the position wise default from negative 50. I'm going to change that to be 100. So it's going to start down there.

I'm also going to change the initial capacity of it. So if I scroll down here, there is going to be color and opacity, this a value, I'm going to change that to be zero as in we are not going to see it at all at the very beginning. Okay, and then if I scroll down further as well, under my scale settings, scale, X and Y under render transform, I'm going to set the default value for this to be 0.5 and 0.5. Okay, again, you can't see it right now. But don't worry, we're going to fix that here in a little bit. Okay, so then jumping back up to We'll go up to our position why here, I'm gonna click this little icon here when I do, notice you got to have HUD intro left selected, and your portrait background selected.

Position why click this little button right here, it's gonna add a keyframe for this property to our current animation. So down here in our timeline, what you now see is we've got our portrait background, listed under our timeline. And if I click this little down arrow to this, this little triangle to show the properties, you can now see that I've got my negative 35 103 50 and 315 values that match our position y or position x position y size x in size y settings. Now one source of confusion here that I wish unreal would fix this up. You will notice that position x of negative 35 is equal to what is now labeled left in the timeline. Likewise, position y of 100 is now labeled top in the timeline, which I find to be highly confusing and many people do.

But just know that that exists so you don't get to confuse. Okay, so what you see down here is this is this little red.net represents a keyframe on your timeline. And so right now our timeline is basically zero seconds long. And the way you can expand this out is you can grab this little right section right here to expand out this timeline like so. Now, we're going to make this a relatively short animation and I don't really want this to be 1.2 seconds but to shrink or expand your timeline right down here, you can hold down the Control key mouse wheel in to kind of expand it out like so. Okay, so at this time of zero, I do want our top property for our portrait back round here to be 100.

And if I was to right click on this keyframe, I could come under properties and see that it is at a time of zero and the value is 100. Okay, what I'm going to do next is I'm going to move our timeline, you can grab your timeline, drag it over like so. And by default, it's snapping it every point 05 seconds, which is fine. I'm going to move it on over 2.4 seconds, that's four tenths of a second. Now, if I click this little plus button right here, I can add another keyframe for this property, this top property which is the equivalent of our let me select portrait background, our position Why? Okay, so we've got top selected, let's click this little plus button with our timeline at 0.4.

That's going to add a keyframe. And now what I can do is with our timeline right here over this keyframe, I can change The value of this and I'm going to change it to be negative 50 right here. So you can see over the course of four tenths of a second, it's gonna slide up like that. Okay, now I'm going to move our timeline over to and I could right click and drag at this point in the timeline. If I right click and drag down here, so you can drag that we left click on our little timeline slider, move this out to one and a half seconds, at one and a half seconds. I'm gonna click this plus button to add another keyframe.

And you can see that extended out the the, the bounds the endpoints of our animation here all the way out to one and a half seconds. That's what this little red line represents here, the end of our animation. So then make sure you move your timeline slider here to one and a half seconds and we are going to leave that value at negative 50 So the idea here is that this particular element, we're gonna slide up like so over the course of one and a half seconds. Okay, that's not all we want to do here. I do want to change the opacity settings for this background as well as portrait background. So I'm going to scroll down in our details and find your color and opacity.

Make sure you've got your timeline slider back to zero seconds. And then I'm going to click this a button. Click the plus button right here. And now you can see I've added color and opacity to my timeline. Okay, so now I do have three keys. I want to say here, this first key is that time zero value of zero.

I'm going to move my timeline slider again like I do to the point four, seven. Get mark, I'm going to click the plus button right here to add a keyframe here at four tenths of a second, I'm going to set this value to be one. And you can see that makes our image show up in the background there. Then I'm going to move the timeline slider all the way to one and a half seconds, and I'm going to change I'm going to add another keyframe right here as well, to maintain that value of one. Okay, to kind of see how that's gonna kind of fade into existence right there. Okay, and you're kind of getting to see my workflow here as well.

So I'm gonna change one more thing about this portrait background. Let's move our timeline slider all the way to the zero second mark. Let me just create a little bit more space here. The next thing I want to modify over time is our scale settings for the portrait background. So find your scale settings, click this plus button right here to add a key for it. Make sure your timeline slider is at zero.

And now we've added this section. To our portrait background timeline, expand out this triangle, and it's already got a keyframe there for our scale. And I'm just going to expand out our scale here and shows the x and y scale simultaneously. Okay, so at zero seconds here, I do want the scale to be 0.5. Now I'm going to move our timeline slider to four tenths of a second, and here I'm going to change our x&y scale to be one and one. And then I'm going to move that slider all the way to the one and a half second mark.

I'm going to click the plus button here to add keyframes for the x and y and I want to keep it at one and one. So now you can see if I scrub through this. What's gonna happen here is it's gonna kind of fade into existence and pop up like that. Now you see how it does that little bounce right there. I don't want it to do that. So a way I can get rid of that is by left clicking right here.

Left click and drag and highlight all of our keys. And then if I right click on any of those highlighted keys, I can set our key interpolation from auto to linear. And that'll make it so that that little bounce doesn't happen. So now you're going to get an effect that looks something like that. Okay, so that's all the animation we want to do for our portrait background. Next, we're going to affect our health background.