Welcome everyone in this video, our goal is to create a snazzy looking animation. For the right side of our in Game HUD, we want to bring that in a cool fashion. So, without further ado, let's jump right to it. If you don't already have the W BP HUD asset open, you can find your way back on here by coming under the content Metroidvania widgets folder. There's your W BP HUD, double click on it to open it up. And just like we did in the last one, we're going to create a new animation down here in the lower left hand corner, click on this plus animation button that's green.

We're going to call this one HUD REITs intro and we did a lot of this stuff in the last video. So this one's gonna be just kind of a follow along with the steps. The workflow is going to be really really similar to what we did in the previous video. So just follow along and we will get through Do this as quickly as possible. So with your right or your HUD right intro animation selected, what widget over here Do we want to animate First, I'm going to start with our be magic border. So under the hierarchy over here, find your be magic border.

And the thing I want to change about it is going to be this top parameter, which is also known as position y. So with my timeline here set to zero. I'm going to click right here to add a key for it. But actually, before I set a key for it, I do want to change its default value. I've currently got the position y set to negative five, so that I could see it when I click the play button. So this position y I am now going to change to be negative 238 y negative 238 experimentation, I guess Okay, so with that, you're gonna see that is off the the screen here.

I am going to now click this position Y button right here to add a keyframe. And I'm just going to expand this out. And so at the zero second mark, I want that to be a value of negative 238. I'm going to move our timeline slider over to nine tenths of a second, or right there point nine seconds, you can add a nother keyframe for our top parameter here by clicking this plus button. And here I want the value to be negative 238 is well. Next key, I'm going to slide the timeline slider over on 1.2 seconds like so we're going to add another key.

Sorry, I added a wrong key I said it for the right option right here. So I'm just gonna select that key and just hit the delete key meant to set the key for our top parameter here. And here I want the value of that to the negative five. So it's gonna slide it down really quickly between that time increment. And then lastly, I'm going to slide our time on slider over to one and a half seconds, add a another key and that is going to remain at negative five. So you can see if I jump our timeline slider back to the front here, when I click play, it's just gonna drop that down into position a little bounce there.

If you don't want that bounce, we can get rid of it. You could get rid of it by simply selecting all these keys right here left clicking and dragging. And then setting the interpolation here to be linear, that will get rid of that little bounce that you just saw, like so. Okay, next, we're gonna bring a timeline slider all the way back to the zero second mark. I'm going to collapse this magic border. So I've got a little bit more room down here.

So you can see what I'm doing. The next one I'm going to animate over time is our B magic button. Okay with that one selected, the thing I want to alter about it over time is the scale of the button. So coming under our Details panel, scroll, scroll scroll, there is our scale settings, I'm going to click this plus button. But before I do, I want to change the default value here from one in the x to be zero, and zero in the y so we're changing the default of our B magic button to be zero and zero. And now with that now set as the new default, I'm going to click right here to add a keyframe for this property.

That'll add this to our timeline down here can expand this out gonna expand out our scale. There are our keyframes for the x and the y. Next, I'm going to jump on over to 1.3 seconds and I'm going to click right here to add new keys. The value here will still be set to zero seconds, going to move the timeline slider to 1.4 seconds, adding more keys here, the value is going to be 1.5 in the X in 1.5 in the y and then lastly, I'm going to move the time on slider to one and a half seconds. Add some more keyframes for the x and y and the x value is going to be one and the y value is also going to be one. So the idea now is if I click right here to bring the time back to the beginning, if I click play, you're gonna see that button kind of enlarge and view you saw that as I scrub through it kind of did that little bounciness.

Again, to get rid of that, all we need to do is select right here, left click and drag highlight all of our keys. Right click on any be one of them and set our key interpolation to be linear. That one is all set. So let's collapse this series of parameters, move our timeline slider back to zero, and the next one we want to change up is going to be our be magic image to go on and select this widget. Come on over to the Details panel way up at the top. What we want to change about this is the position why I am going to set a new default for the position why before we get started here and that I'm going to change to a value of negative 202.

So that is going to slide that off the top of the screen as well. Okay, and then with this, I'm going to click this plus adds keyframe for this property to the current animation under position y and again, position y is equal to what is labeled top down here in our timeline. So there's our first keyframe. gonna move our timeline slider over to nine tenths of a second point nine seconds, we're gonna add a nother keyframe, the value is also going to stay as negative 202. Moving the timeline slider over to 1.2 seconds, add a keyframe, this value is going to be 31. And moving our timeline slider over to one and a half seconds, adding a keyframe it is going to stay at a value of 31.

So clicking right here to bring our timeline back to the front and then clicking play. You can see what that looks like and again, I want to set these keys left clicking and dragging to be linear so they don't do that little bit of bounce that you just saw. So to the front. There we go. Okay, next one. bringing our timeline slider all the way back to the zero second mark is going to be Be Magic Man accost widget.

Okay, that is number 99 right here. And with that guy selected, we're going to change its scale property. So come under the scale settings way towards the bottom here render transform scale here too. I'm going to set the default value of this is currently one, but I'm going to set that to be zero, and zero. With our timeline slider at the zero second mark, I'm going to add keyframes for scale properties. There's our B magic costs or magic magic cost rather, let me just expand out the appropriate set of parameters here.

There's our scale settings. So at the zero second mark, I do want those to be zero at the 1.3 second mark. I'm going to add keys for the scale and I also want them to be zero. At the 1.4 second mark, I'm going to add some keys Here I'm going to set it to 1.5 and 1.5. And then I'm going to move our timeline slider to one and a half seconds and add some more keys for our scale. And here the value is going to be one and one.

Okay, and I'm going to left click and drag around all these and set the key interpolation to the linear and if I click back here to go back to the front and click play now you can see how that's all popping in sort of at the same time our button and our numerical value there for the man Acosta are jumping up about the same sort of scale the same amount of time. Okay, a little bit more to go here. I'm gonna move my timeline slider back to zero. I'm going to collapse this series of parameters. The last one we want to cover in this particular video is going to be watching No, we got a few more. Let's do a few more, shall we?

Let's do a B magic. Starburst next like that guy that has this tiny little Starburst back here. scrolling up to what do we want to alter in this one, we're going to alter the the opacity setting. So find that color and opacity section of parameters, it's under the appearance of section. Currently, our color and opacity here is got an a value of one, we don't change the default here to be zero. Okay, and now we want to add this to our timeline.

So click right here to add a keyframe. There is our magic Starburst color and opacity. We've got our key set at the zero second mark. Next, let's move the timeline slider to 1.2 seconds and add a nother key also with a value of zero and then we're going to move the timeline slider over to the one and a half second mark and set the value to be one I suppose we really didn't need to do anything with that one. But it was a little weird to see something on the screen until that the rest of that black magic kind of slides down into position. So that's why we're kind of, we're basically waiting until the black magic slides on into position before we even show that Starburst which is hidden behind there, right.

Okay, let's collapse that. Bring our timeline slider all the way back to the zero second mark. The next one we are going to animate here is going to be our manna base, find your manna base widget. And with this we are also going to change the opacity settings. So with that selected, come under the Details panel, we got color and opacity. Let's click right here.

Well actually let's change the default first from one to be a Zero there, we cannot see the base anymore. And now let's add a keyframe for this. It is added down to our timeline. So at the zero second mark, the value is going to be zero, we're going to slide on down to the one second mark, add another key value is still gonna be zero and then we're gonna slide the timeline slider over to one and a half seconds, add another key and the value here is going to be one so that's going to sort of fade into existence here as well like so. Okay, let's collapse this. move our timeline slider back to the zero second mark.

And the next thing we're going to alter is going to be our Manoj overlay. So go ahead and select that guy. We'll make this the last one for this video because we still got more work to do and we can focus on our white magic in the next video. Let's just finish it off with our manner overlay. So with our map overlay selected over in the Details panel, we're going to alter the scale settings for that. So before we do anything, let's change our default value here for the x&y scale to be zero and zero, and then I'm going to click right here to add keyframes for this property.

There it is down in our timeline slider expanding out some triangles here to review those scale settings. So at the zero second mark, we want the value to be zero. With our timeline slider moved on over to the six tenths of a second mark, I'm going to add some more scale keys and we will keep the value here at zero as well. And then lastly, I'm going to move our timeline slider on over to the 1.1 second mark. And I'm going to add some scale keys and the value here is going to be simply one and one. So with Just going to zoom in a little bit so you can sort of see what we got going on.

You know what, I will set these values here, these keys, I'm gonna left click and drag. I'm gonna set these to interpolate linearly as well. Man, a base that was just color and opacity. That's not a big deal. Okay, so with this, we're gonna jump onto the front of our timeline slider here, and I'm just gonna click play to show you what we've got so far. So it's gonna kind of come on down like that.

That's pretty good. Not too bad. See it one more time. All right, so we got this part of our right side of the HUD taken care of in the next video, we will take care of our left side of the right side of our HUD. We'll finish off the right hood animation there. So let's do it all for this one.

We'll see you in the next one.