Welcome back.
Now, the next step in our spell menu is our equip button.
Now, as soon as we have something selected that's eligible for the equip button to be enabled.
When we click the equip button, we're now going to be expecting the user to click down here on one
of these slots.
So when one of these slots is clicked, we're going to take that spell globe, look at the ability tag
and assign that ability to the slot we clicked on.
And by slot I mean input tag.
So if we click on right mouse button, then we're going to take that ability and assign it to the right
mouse button.
And that's why an equipped ability should be equippable still, because we could take this ability which
is assigned to the left mouse button, press, equip, and then assign it to the right mouse button,
thereby removing it from the left mouse slot.
So I'm going to be using the term slot to mean basically input tag, but it's the input tag that we
assign abilities to.
So if I say the left mouse button slot, that means that's the slot dedicated to the left mouse button
input, right?
So we need to do several things to make this happen.
This is one of the more complicated aspects of the spell menu, but we'll take it one step at a time
and the first thing we need to do is as soon as we click equip, if we're selecting a valid ability
spell globe, we need to show the user that they need to click down here.
So if we're waiting for the user to click down here, we need to show something like an animation down
here saying, Hey, click down here somewhere, right?
So we need some animations down in our equip spells row widget.
So we're going to open up our equipped row widget.
Let's go to Blueprints UI and in our spell menu we have the Wbhp equipped spell row.
We need some animations here.
Now we have some assets that we can use for this If we go to content assets, UI, if we go to spell
tree, we have some textures here.
I'm interested in offensive selection box and it's just this texture here which is mostly transparent,
but we have this rectangle in it.
We also have passive selection box with this rectangle in it.
Now these rectangles will make a lot more sense when we add them to the equipped spells row.
So we're going to do that.
Now I'd like to have an overlay so I can stick these textures right on top.
So what I can do is take my rat box route, this big one here, and slap an overlay on top and wrap
it in an overlay.
So if I right click wrap width and choose overlay.
Then my overlay now is going to contain it.
Now I can make it horizontally and vertically centered and we shouldn't really see very much of a change
here.
Now because we have an overlay, we can add stuff on top.
And I'm going to add an image.
So we'll drag an image onto the overlay.
We'll select that image and make it fill like this.
And I'm just going to set the texture to this offensive selection box.
So for the image, I'm going to set it there and I'm going to make sure and as soon as I zoom in, it
goes all wonky, but I'm going to make sure that it looks good.
So the image needs some padding.
And what I think I'd like to do actually is make my overlay fill horizontally and vertically.
I'm going to hide my image for a second.
So if I make it fill, then my rap box route can be set to center and then it should be right there
in the middle.
And my image, if I show it now, should be a little bit more in the right location there.
So let's see how that looks in the UI.
It looks okay.
I'm going to want some padding on the left and the right, though.
So left and right.
I'm going to give it about 12 and 12.
Maybe less so it's kind of hard to see what it looks like without taking a look at our actual.
Spell menu.
So here's what it's going to look like in the spell menu.
Here.
You know what I'm going to do to make this easier?
I'm going to take rap box route and I'm going to replace it with a horizontal box.
That way we'll stop getting that weird behavior when we scroll in and I'm going to rename it to just
box route.
So now it's a horizontal box and I should be able to mess with the padding here and get it looking more
like how I want it.
And I'll go ahead and give it some padding.
Let's do 20 on the left.
20 on the right.
It looks too small here, but in the game.
So that looks pretty good in game.
And I'm going to rename this image to image offensive selection outline.
And we'll add another image.
Right next to it here.
And this will be image passive selection outline.
And this one is going to be the passive selection box.
In fact, we could just call it passive selection box, and we'll call this one offensive selection
box.
And let's see how those look together.
All right.
So this one is off to the right.
We'll need to.
Push it over a bit.
So we'll give it some right padding.
20 might do it.
Let's see.
Yeah.
So that's about right Now, that's okay.
If it's cutting into the text a little bit because we're going to animate this, we're going to make
two animations.
So we'll start with the offensive box.
I'm going to hide the passive one.
And for the offensive selection box and the passive actually we're going to be checking is variable
for both.
And we'll select the offensive selection box and add an animation.
And this will be called offensive selection animation.
With that selected, I'm going to add a track for Image Offensive Selection Box, and I'm going to add
a track for the Transform.
And for the Transform, I'm going to set the scale on X and Y to 1.05.
So we'll make it a little bit bigger.
And then at one second I'm going to set it back down to one.
So this is a subtle animation, but if we play it on repeat.
With looping on.
We'll see what it looks like.
And we can even start it on event construct.
So we can just play this animation, offensive selection.
Animation.
We can play it and see what it looks like.
And we can play it on repeat with a loop.
So numb loops to play.
We'll put that at zero.
And that's going to make it loop.
So this is what it looks like.
Now we can scale it up and down more because it's stretched a little bit.
So I'm going to scale it a little bit more in the Y.
Oh, I'm not scaling it at all in the Y.
That's probably why.
So let's see.
That looks pretty good.
It doesn't look like our Y is changing.
And that's because it's not.
We have to put.
The keyframe one at the end of that second.
Now it looks like it should.
Now that looks pretty decent.
I'm going to pat it on the left just a little bit more.
So left can get 25.
And in addition to scaling it in our animation, I also want to fade it out.
So as we're getting smaller, we're also going to fade its opacity out from 1 to 0.
So we'll add a second track.
We're going to click plus track.
It's going to be for render opacity.
We'll go from one all the way down to zero at one second.
And that's going to look like this.
Perfect.
That looks great.
Now we are going to make one for the passive selection box as well.
But I also want to make an animation to hide the offensive selection box, so I'm going to have another
animation.
Called hide offensive box.
We'll add a track for Image Offensive and we're going to do a render opacity again.
And this one will be about 75.75 seconds and it'll go from 1 to 0.
So it's just going to fade out.
Okay, let's make one for the passive box.
I'm going to hide the offensive, show the passive, and it's going to be very, very similar.
So let's make a new animation.
We'll call this passive selection animation.
We'll select it.
We'll add a track, choose Passive selection box, add a transform track, and at zero seconds, our
scale is going to be 1.05
for X and Y.
And at one second it's going to be one.
For X and Y.
And we'll also add a track for render opacity.
So plus track.
Render opacity.
I accidentally got a point right there, but that's okay.
We're going to put render opacity at one here.
I'm going to just add a key and.
We'll go to about 0.75 and put it at zero.
Actually, I need to delete this one and we'll put zero here.
We could go all the way to one.
We just need to see what it looks like on the HUD.
Oh, and we're not playing it, so we'll go ahead and play it.
In the beginning of the game.
By the way, we can kill two birds with one stone.
And play offensive.
The Hyde Offensive.
Box Animation.
And we can also play passive selection animation.
Play animation.
Numb loops to play can be set to zero to get this to loop.
And let's see how this looks.
Okay.
So it's kind of going inward.
And that's because we're scaling the whole image and it's one big one, right?
And didn't really want to loop this one.
We just wanted to play it once.
So, yeah, so we're going to want to fix this a little.
Really want to pad it a little more on the right.
So.
I'll take that passive selection box.
And we'll just add more to the padding on the right.
And let's just tweak this a bit more.
We'll start off with more thickness in the x 1.1.
And for the transform, I'm going to make the translation go over to the right on the X.
This just all has to do with the assets that we're dealing with here.
I'm just really quickly going to set the render opacity to one so I can see where it is and we're just
going to make sure that it's still pretty much centered.
And then I'll put that render opacity back to one.
And playtest.
Okay.
So we overcompensated a bit.
We'll go to about there.
And it's wobbling.
So I'm going to take that X actually go to the graph.
Okay.
It's not wobbling.
Okay.
That looks pretty good.
All right.
I think that is going to look pretty nice.
So we'll do about 45 padding on the right.
And that looks good.
And once we get that opacity fading out again, we can set it to zero at the end and fade it out.
And that should look good.
Excellent.
I think I want the Y to scale down more, though.
We'll scale it down to 0.8.
We'll do point nine.
Okay, so that looks good.
Now I want to deselect an animation that's basically just the same thing, except.
It'll just play once.
So we'll add a new animation Hide passive box.
And just like Hyde offensive box, it's just going to set the render opacity.
We don't even really need to change the transform much, so we'll add a track.
For render opacity.
We'll go from 1 to 0 in a second.
Actually, we're going to go to 0.75.
That's all we're going to do.
So I'm going to play that at the beginning of the game with only one loop.
I'm not going to play the other one.
So we're going to play hide Passive.
Box.
And of course we need to move it over, though, so.
We will give it a transform track.
And we'll just have one key at the beginning.
We're not going to animate its translation at all.
We're just going to move it over a bit, Just make sure that it's in the right spot.
Yeah, perfect.
All right, cool.
So that's going to do it.
We need these for animations, and as soon as we hit that equip button, we need to start playing an
animation on one of these two.
Depending on the type of ability we selected, if we selected one of the offensive abilities, we want
to play that animation over here On the offensive side, if we selected a passive ability, we want
to play the one on the passive side.
And so that is what we'll handle in the next video.
So excellent job.
I'll see you soon.