Welcome.
Now, the first thing we're going to work on for our spell menu are the Globes.
Now, these appear to look the same as the other Globes we've made for our spells in our overlay, but
they're actually not.
These globes actually need to be buttons because we need to select them.
We need to be able to click on them and have some sort of response.
And our other Globes are not interactable in this way.
So we need a different widget for our Globes in the Spell menu.
And we'll go ahead and make a base class that we can extend for our Globes in the Spell menu.
And we'll do that now.
So the first thing we're going to do is make the globe.
Now we do have spell globes and if we open up our spell globe widget blueprint, we'll see that we do
have a number of things that we already want.
However, Spell Globe has a number of things that we don't necessarily want, such as handling Cooldowns.
We don't need to handle Cooldowns in our globes for the spell menu.
But a lot of this work is already done and it would be pretty convenient to reuse it.
But the widget is going to be different enough.
I believe that I don't need to make use of inheritance, so I'm going to just duplicate spell globe.
Our value globe is actually even more stripped out than the spell globe.
So it may actually be a more appropriate globe to take and duplicate.
So I think actually we'll duplicate the value globe and use this.
So I'm going to right click on Value Globe and duplicate it.
And this is going to be the spell globe for our spell tree.
And this is ultimately going to have a button.
So I'm going to call this WB underscore spell globe underscore button.
So we have a button version of the spell globe.
I'm going to close value Globe so we don't confuse the two together.
Now spell globe button is not going to be showing a numerical value, so we don't need text here.
I'm going to remove that.
And in the event graph we don't need to listen to on player level change.
So we're going to delete that as well.
So anything in here that corresponds to that is unnecessary.
Now I am going to let it set its widget controller in response to event widget controller set.
So we'll leave that for now and we can update the box size, the ring brush, the glow padding, the
background can be updated.
I think all of that is fine.
Now, by default, I don't think I want this image background that was great for showing the player
level, but for this I'm going to use my locked BG and my locked BG is designed for a locked skill,
but of course we're going to want to change this dynamically.
Now if we come back into the event graph here, we have our update background and it's setting it to
the background brush.
So really it's the background brush that we need to change.
So if I change that and compile, of course I'm getting a warning.
We have functions that are using some things that we've deleted.
We can go to those and we see that we're trying to use text value here in set cooldown.
State Well, we don't have a cooldown to handle in this, so we can delete set cooldown state and compile
this.
Now we'll continue going through these errors and warnings and delete the things we don't need here.
We have set default state.
This is also used in conjunction with handling Cooldowns so we can delete set default state.
It says it's in use.
We're going to delete it anyway.
We have hide cooldown, text.
We're going to delete that as well.
We're going to compile again.
And now we should be able to see no more compiler errors.
So here's what it looks like with that locked background.
So we can go back and make sure none of these other functions are needed.
We can update the box size, the ring brush, the globe, padding, the background tint.
I don't think I need to set the background tint, but I suppose it's a useful function.
If we need it, we'll keep it around.
Clear globe again.
Just setting the globe to a transparent brush.
No harm done.
Leaving that update background is something that we're using in event pre construct.
We can keep that, but I don't like that space in the name here and update cooldown timer can go.
We're not going to use that.
Okay, so with that, we've stripped out things we don't need.
Now, I'd like to use this in my spell menu for my offensive and passive spells, which means I'm going
to want an icon here.
The icon can simply be an image, so I'm going to drag an image onto my widget and set horizontal and
vertical alignment to fill.
And I need to give this image a default value.
But the image itself is going to be changeable.
So I'm going to make it a variable.
So checking is variable and I'm going to rename this to image underscore icon, and I'm going to set
a default icon.
I'm going to search for lock.
And choose locked.
There's also a locked underscore, which is a little smaller.
So I think I like that one.
And here's what our icons will look like for spells that have not been unlocked yet.
And of course, you know how to change material parameters if you want that background to look differently
or if you want it to be a little bit less turbulent in the clouds.
You know how to change that.
So we have our icon.
It's just going to get a default locked icon.
And once a spell has been unlocked, we don't really need to set it back to locked again.
So I don't think we need a brush variable for the locked icon.
This will just be the default and we'll change it if we need to change it.
Okay, so we have the makings for a basic spell globe, which it's supposed to be a button.
So we need to figure out how we're going to handle that.
Now a button can have a texture, and I don't think we should use our background or our glass for the
texture, for the button.
But if we chose to use the ring, we can change what the ring looks like when the button is hovered
or clicked.
So I think it would be a nice touch if the ring itself were the button component of this.
Now I can take my ring and delete it and instead of using an image for the ring, I can use a button.
That's what I'm going to do.
I'm going to drag a button in.
And set it horizontally and vertically to fill.
And I'm going to rename this to button underscore ring.
So our ring is going to be the button and I'm going to expand style and expand normal.
And first thing I'm going to do is no longer draw this as a rounded box, but instead as an image.
The rounded box tends to soften the edges.
And I don't really like that.
Now for the button ring for its normal image.
If we search for ring, we have lots of rings in this project and I like skill ring one.
Now of course there are skill ring two and skill ring one A These all look a little different, but
I'm going to set it to skill ring one and I'm going to take my tint and bring its value all the way
up to white so it's not tinted at all.
So with draw as image, this looks pretty good.
Now I'm going to set the style for hovered as well.
Now for hovered, I'm going to set that tint up all the way to white and change draw as to image and
for the image.
If I search for skill ring underscore one underscore glow.
Then we have this texture and we can see what it looks like by browsing to it.
It's actually the same ring, but a little bit different in style.
Notice it's a little bit brighter and the little scratches are dark, so it's kind of a cool alternative
style if you really want to see what it looks like here, we could set it right here.
I can search for Glow and set this to skill ring one glow.
This is what it will look like when it's glowing.
So I'll set that back to Skill ring one and now we have normal and hovered.
Now for pressed, we can use the same one skill ring glow so I can browse to it.
And then for pressed I can hit that left arrow.
But if we press it, it should probably look a little different.
Right?
So we could change the tint by default.
It's a little bit darker.
Maybe we can leave it like that.
But we do want to draw it as an image and not a rounded box.
Now for disabled, I want it to just look normal.
So I'm going to take my normal browse to that skill ring.
And set that as my image for disabled, setting the tint all the way up and draw as image.
So that way it doesn't really respond to hovering and clicking.
It just stays as is when it's disabled.
I don't really plan on disabling it, but that's set.
So we have a basic button.
It looks good.
And there's one last thing I'd like to add, and that's an animation for when we select it in our menu.
Yes, it's a button and has hovered and clicked events, but I'd like buttons to have a concept of being
selected.
So for that I'm going to have an animation that will animate a selection circle.
Now that's going to be an image, so I'm going to drag yet another image on.
It can be all the way at the bottom.
I don't want it on my button, so I'm going to take it off the button and call this image underscore
selection.
I'm going to set it to fill horizontally and vertically.
Now, it doesn't fill completely, but that's actually okay because I'm going to animate this image.
Now, if I search for Circle for its image, we have a selection circle and this is what it looks like.
I'm going to make this circle transparent or set its render opacity to zero by default.
But until I do that, I'm going to go ahead and animate this circle.
So I'm going to make a new animation called Select Animation.
And for this animation, I'm going to add a track using image selection, adding a transform track for
the image animation.
And I'm going to start it off with a larger scale.
I'm going to start it out with 1.5 for X and Y.
So it's going to start off larger and it's going to be a very short acting animation.
We're going to go forward by 0.05 seconds and I'm going to make it scale a little smaller, but not
one.
It's going to go down to 1.25.
So I can hold control and zoom in to see what this looks like.
And there's really just two frames to this animation.
It's going to be very fast.
Now the circle isn't appearing to be 100% perfectly round.
So for the X, we could make it a little bit wider, 1.26 maybe, maybe 1.3.
I think that's fine.
And if we go back to the first frame instead of 1.5, we could make it 1.6, perhaps 1.55.
So now we have this selection circle, and if we play the animation, it's very, very quick.
We can press play and see what it looks like and I'm going to stop looping it.
So this is what it looks like.
It's going to just shrink in on it and stay there.
But by default, I'd like this to be hidden so we can set render opacity on it to zero for its default
value.
But we'll change that as we're selecting it.
Now pressing compile.
Let's see what our compiler errors are.
It looks like we're trying to get image ring and update ring brush.
That's because we just deleted the ring.
So update ring brush is no longer needed for us.
Our ring is no longer there.
We now have a button, right?
So I'm going to delete this function.
It says it's in use and if I compile, I can see where Right here, we don't need to call it anymore
and compiling.
Once again, we got rid of all our errors.
Okay, I'm going to click off of that animation to get rid of that annoying blue text.
And now we have a nice spell glow button.
We can use this in our spell menu and we're going to do that in the videos to come.
So excellent job.
I'll see you soon.