Welcome back.
Now that we have a spell globe and it's looking pretty good, we can add this to help manage spells.
Our widget that will contain all of these globes.
So I'm going to make sure the spell globe is all compiled and saved first.
And then over here in health manage spells, I'm going to search for my spell globe and bring in a spell
globe for each of my boxes that are so eagerly awaiting spell globes.
So let's get one for all six of our offensive and then we'll put one into the passive.
Now for the passive.
It looks like the size here is going to be an issue.
Right now, if we select fill, then the size looks pretty good.
So if we go ahead and put one into each of these and select fill, the size looks good, except that
due to being smaller, we're going to need to change a couple of the properties here.
Now I think the padding is the only thing we really need to worry about on these, so I'm just going
to search for my Globe properties, making sure that my spell globe is selected here.
And because I didn't expose those variables, I can't see them here.
So I need to go back to spell globe and make sure that those globe properties are all exposed.
So here in the graph, I'm going to take my globe properties, each one of them, and expose them with
the eye icon and compile.
And now back here in health manage spells, I can search for globe properties and see those properties
and I can change my padding.
It's looking like it might need to be lower.
So if I change it to six, that looks better.
Five looks pretty good as well.
5.5 might be a good compromise, so I'm going to set it to 5.5 for both of these and that looks better.
Actually, I might have done that prematurely because I may wish to have these get some padding of their
own so that these rings aren't touching.
So what I think I'll do is add some padding.
I'm going to try a value of 1 or 2.
Two for each.
Looks pretty good.
And now I can go back and check out their globe properties and make sure that this is set to a good
value.
I like to go a little overboard and then dial it back.
That's kind of the approach I like to take.
I think 5.5 is pretty good.
Five actually might be better now.
Five does look pretty good.
Okay, so the passive spells look pretty good.
Let's take a look at the offensive spells.
They seem to be a little large.
If we select fill, then they're actually a little bit squished.
So that's something that we are going to want to fix.
But at the same time, they're touching edge to edge, Their rings are touching.
So that's not necessarily a bad thing that they're squished because we can make them less squished with
some horizontal padding.
Right?
So if I hold shift and just click on all of these, then I can expand their padding and just put a little
bit on the left and the right.
I'm going to start with one and see how that looks.
There's still a little squished, so I'm going to try two and two.
And perhaps 2.5 and 2.5 might be the sweet spot here, just as long as they look pretty much round.
So that's looking pretty good.
Now, the thing is, I don't want them to all look like this, especially if there are no spells assigned
to these slots.
If they're empty, then I want them to look empty.
So what I can do is I can set them to look empty by default.
But really, we're going to want a way to set them to a given icon, basically have a function to set
the icon and an easy to use function to set it to look empty, basically.
So for the spell globe, I'm going to make a function to set it to look empty.
And the reason I need a special function is because we're going to have to set that background image.
If I just reset it, it's going to look white.
So that's not exactly what I want.
I want to set it to a brush that's completely transparent.
So what I can do is I can create a variable here and call this variable transparent brush, and I can
set its default values by compiling and coming down to basically the tint and setting the alpha to zero.
I think that's going to be exactly what I need and I'll make a function to clear our icon and the background
and leave that glass material.
So we just get the ring and the glass.
So let's make a function called, let's call it Clear Globe and Clear Globe is going to set two brushes.
It's going to set the image spell icon.
And it's going to set the image background.
So we're going to take both of these and we're going to call set brush.
And if we just hook them both up as Target, then we can simply call set brush once and we're going
to set it to transparent brush.
There we go.
There's our clear globe function.
And in our event graph, if we call it here, an event construct, we should be able to see it work.
Let's test that.
So clear globe, we'll call it here and check the designer compile and there we have it.
We've cleared the globe, but we also need a way to set the background and the icon as well.
So we'll also want to be able to set the globe.
So I'm going to make another function.
And this can be called set icon and background.
And this can take in two brushes, two inputs of type slate brush.
The first one can be icon brush.
And we'll have another one called Background Brush.
And then we're just going to set those properties.
So let's get those variables in here.
We need the image background.
We'll get that and we need the image spell icon.
We'll get that and we're going to call set brush.
For both of them.
So I'm going to duplicate the set brush and the icon brush will go into set brush for image.
Not that one.
The other one, the image for spell icon and the background brush will get to go into the set brush
for the image background.
There we go.
That's better.
So we'll call both of these for this function which will set these.
I'm going to really quickly rearrange this just so that.
It looks a little bit more clear what's going on here.
Here we go.
There we go.
Little bit over meticulous, but there.
That's better.
Now we can test out this by simply calling it.
So it's called set icon and background.
And really, this is going to require the brush so we can make a slate brush and set this image for
the icon.
I'm going to search for Firebolt.
And for the background, I'm going to make a slate brush and for the image I'm going to search for.
Let's see what we called it.
And our spell globe.
I don't remember.
So I'm going to just browse to my globe progress bar, get the fill image and browse to it.
There it is.
It's called Fire Skill BG.
So I'm going to go ahead and.
Call the function with that.
And if I compile.
There we go.
It works.
So we can just call this function and pass in two brushes when we need to set that, I'm going to compile
and delete that clear globe.
And if we compile again, it's back to what it is.
So by default, I'm going to go ahead and call Clear Globe here at.
The beginning and event construct, and then we can just have what looks like all empty globes.
I think that's going to be just fine.
And as our spells become equipped, we can set those brushes.
Okay, great.
Now, I'd like to use this in our overlay instead of what we have now.
What we have now is just a pair of globes on our overlay.
I'd rather have this new health man of spells.
So for that reason, let's go into our overlay in Blueprints UI overlay, and here's WPP Overlay.
We can remove these.
Now, we do have some code in here for those.
Right here we have event widget controller set, and as soon as we set the widget controller, we set
the widget controller for the health globe and the Mana Globe.
And for that reason, the health globe and the Mana Globe can handle what happens.
They can bind to their delegates and whatnot.
But now I'm going to remove these and replace them with health mana spells.
And for that reason, rather than setting those widget controllers for the Globes, instead we're going
to set the widget controller for our new widget Health Mana spells.
So I'm going to remove these function calls.
We're going to replace it here.
I'm going to hold C and make a comment and say set WC widget controller for health mana spells.
So I don't forget that's going to go here.
So now we can remove health globe and manage globe completely and we can get a health mana spells instead.
So I'm going to bring that in.
And set it right there.
Now we can center it.
I'm going to make it anchored to the bottom center and put its position in the middle.
So if I set alignment for X to 0.5, then I can set its position X to zero.
And it's nice and centered and I'm probably going to want its position Y to go lower almost at the very
bottom of the screen.
So I think that's going to look pretty good.
And now we have a health man spells, and I can go back into the event graph and get that health man
spells, which needs to be a variable.
So I'm going to check is variable.
And then back here I can get my health man of spells and set its widget controller.
So I don't need that comment anymore.
I'm going to call set widget controller.
And set it equal to the same widget controller.
So it's going to share the overlays.
Widget controller.
So I'm going to get widget controller.
Scrolling all the way down to get.
Widget controller.
We'll pass that in and set the widget controller now for health mana spells.
And health man who spells is going to handle setting the widget controller for any of its widgets that
need to use the same widget controller.
So I'm going to compile this and go back to Health Man spells into its event graph and right click and
get my widget controller set event.
And once we get that widget controller, we can set the widget controller for both the health globe
and the man globe.
So these have to be set to is variable as well.
So I'll go ahead and check that for both of them.
Compile and save and come back to the graph and we'll set them here.
So I'm going to go ahead and just make a sequence.
As I know that I'll probably do multiple things here.
And the first thing I'm going to do is set the widget controller for Health Globe and manage globe.
I'm going to call set widget controller for both of them.
And in fact, I can do what I did before and use this trick where we stick both of these health in manage
globe into the same input and then we can use.
Widget controller.
We're going to get that.
And hook it in here.
And now we're setting the widget controller.
For our Globes.
So thanks to that, we now have our Globes getting their widget controller set and then they handle
binding to their delegates and everything else.
So that should be enough to make these work.
I'm going to go ahead and save all and we can test out taking damage by either placing an enemy in the
world or putting in a fire area, something like that.
I'm just going to drag in a BP fire area, stick it there, and I believe that box is always going to
be visible.
So I'd like to just hide that box and BP fire area while I'm here.
So I'm going to uncheck.
Nope.
It is hidden in game.
So I think it is not visible.
Right.
It's not visible.
Perfect.
I'm going to go into the fire area and there we go.
Our health is updating.
That's perfect.
Now, our mana doesn't ever change, but we're going to fix that as well.
Once we implement mana costs for our abilities.
By the way, you may have noticed my nice little embellishment that I put in my wall here.
No big deal.
I really just dragged in a couple assets and made it look a little bit better.
So I didn't even make a fade actor for this.
So really it's just going to be there.
If it obstructs the way it's not going to fade out or anything like that.
But yeah, something that I did off camera and I don't do things off camera if it's significant.
So this is really just dragging assets in.
So don't freak out.
Feel free to embellish yours as well.
Okay, so now our HUD looks a great deal better, doesn't it?
But we're missing one important thing that just about all RPGs have, and that's an XP bar, a bar for
experience.
So that's one of the next things we need to make and we'll do that in the videos to come.
So excellent job and I'll see you in the next video.