Welcome back everyone in this video we are going to continue right on where we left off in the last video. And that was creating some animations here inside of our w BP skill acquired Widget Blueprint. If you don't remember how to find your way back here, we are within the content Metroidvania widgets folder, W BP skill acquired double click on that guy to open them up. And we were working inside of this intro animation that we had just created in the last video. So we left off by creating an animation for input overlay. I'm going to collapse this, I'm going to take our timeline slider all the way back to the zero second mark.

And the next thing that I want to animate over time here is our description overlay. So we're kind of working our way down our hierarchy. So select your description Overlay and the thing that we're going to be modifying about this over time going to be our scale as well. So there is our scale settings. Let's go ahead and set our x to be one by default like it currently is, but our y value can be set to zero, so that's going to shrink that up in the y axis. So it's going to disappear temporarily.

X one y zero. Let's add these keys down to our timeline. There they are description overlay transform scale. So at the zero second mark, we want x to be one y to be zero. At the one second mark, we're going to add some more scale keys. The x is going to be one and the Y is still going to be zero.

Then I am going to hold down my right mouse button and move my timeline slider over to the right a little bit. Going to move her over to one point two, five seconds, add some more scale keys. Okay, and here I want the x value to be one and the y value to be one as well. So the idea here is that it is going to essentially flare out like that in last quarter second, like so see that? Okay, so I want to do that for both the description overlay in the attributes overlay. I think for these and again, you don't really have to, but I'm going to left click and drag around all these keys, and I'm going to set these keys to be linear is well.

Okay, I'm going to move my timeline slider all the way back to the zero second mark. And I'm just going to not collapse this description overlay for the time being here because I want to see all my times here for my next set. Have attributes here by attributes overlay right there, that widget so select attributes overlay. Under these scale section, we want x to be one, why to now be zero. Let's add some keys for this down to our track under the scale section. There's our attributes overlay just appeared transform scale.

And here I'm just going to copy exactly what I did with our description overlays. So moving this down to the one second mark, it's going to be some more scale keys of 101 and a half seconds, some more scale keys, one and one. And let's left click and drag and set these to be right click key interpolation linear. So I'm going to back up my animation here to the front and zoom out a little bit, hit that play button. That's not too shabby so far. All right, I'm gonna collapse this up, collapse this up.

That is gonna do it for our intro animation here. But I do want to continue on and create a brand new animation. This next animation Oh sorry, we are not quite finished with that I forgotten one more before we create our next animation. So with your intro animation still selected, I forgot our back overlay down here. This guy right hanging off the edge of our screen. So let's select our back overlay.

Make sure your timeline is back to the zero second mark. Let's come up in the Details panel and we're going to come under where it says position x. Okay, so I we have the position x at 150 which is perfectly fine, but I want to modify this over time. So let's click right here for position x You'll see that down in our timeline. Now let's expand this out. Okay, and so we're going to, we've already got a key there, there's zero second mark.

So I'm going to move our timeline slider all the way down to the one second mark, add a new key for our left position here. That is left of 150. That's equal to position x right here. So with our timeline slider at that one second mark, I'm going to change that left position, actually, I'm going to keep it at 150. Keep that at 150. Although when I move this timeline slider to the 125 1.25 second mark on our timeline, I'm going to add a nother key for our left and here I'm going to set the left property to be negative 230.

So you're going to see how over the course of the final quarter of a second. It's gonna Slide our back button onto the screen like so. Okay, so that is going to do it all for our intro animation. Let's collapse that up, move our timeline slider all the way back to the zero second mark, I want to create a brand new animation. So let's click this green plus animation button. This one we are going to call input pulse.

So here's the idea. I want to make it so that when our screen comes on like this, this little button here, I want that to kind of pulse to indicate what the player needs to do in order to use that skill. Okay, so, going to move my timeline slider back to the zero second mark, make sure I've got input pulse selected as our animation over on the left hand side. Okay, so the thing that we want to animate over time here is going to be our input button image. So select that over in your hierarchy. Find your scale settings for this scrolling down render transform scale settings.

So let's go ahead and click right here to add this to our timeline, transform scale. So at the zero second mark, I do want the scale to be point five and point seven respectively. gonna move our timeline slider over to the quarter second mark. Let's add some more scale keys. Here the x is going to be I've got some very specific values here, point three, five, and for the why, point four, nine. Why those numbers because that's 70% the size of what it is in the beginning.

So I'm basically going to be shrinking it down 70% of what it was and then at the half second mark, I'm going to add some more scale keys. And here, I'm going to set it back to you point five for the X and point seven in the Y. Okay. So none of this is hooked up yet, by the way, I mean, we still need to script this to happen. So we can't see this just yet, but we will. Okay, so gonna be all done with that animation.

Next, I am going to create a nother animation, click this green plus animation button, this one is going to be called back hover. The idea here is going to be that when this back button slides onto the screen when we are hovering our mouse cursor over it, it can grow in size, just to indicate that we are in fact hovering our cursor over it. So I'm going to select our back cover animation. Our timeline slider here is at the zero second mark. And I am going to find our back overlay in the hierarchy. And what I want to do is modify the scale of this over time.

So, right here, find your scale settings, click this button to add this down to our back cover timeline. expand out our scale settings here. So with the zero second mark, one in one for the x and the y. Then let's zoom away in I'm holding down CTRL and scrolling in, I'm going to go to the 10th of a second mark. That's point one oh seconds and I'm going to add another scale key right here. And I'm going to set our x to be 1.1 and our y to be 1.1 as well.

And believe it or not, that is going to do it. For all of our animations. We still need to do some scripting for all this to make it happen. But that, that's it for creating the actual animations themselves here in our timelines. So guys, that'll do it all for this one. Let's Compile and Save one more time.

We'll see you in the next one.