Welcome back.
So we have a whole lot of boxes and they're just waiting for some globes.
Now, that's how I'd like to show my spells is with spell globes.
Basically, what looks like are health and mana globes will have rings.
But instead of showing health and mana, I'd like to show a spell icon, for example, and then we can
have this really cool, cloudy effect with different colors corresponding to the different spell categories
as I'd like my spells to be in categories with our fireball being in the fire category and so on.
So let's get started making our globe for spell icons.
Now this will be similar to our Progress bars, but our progress bar widget has a progress bar in it,
and I don't really want a progress bar in my spell.
Icon.
You could perhaps you could fill it up as a way of showing how much time is left on the cooldown as
we will be implementing that.
But I'm going to show the cooldown time as a number, so there will be significant differences between
our progress globes and our spell globes.
So we're going to make a completely different widget for that.
So I'm going to make a new folder in UI called spell Globes.
And let's make our base class for our spell globe.
So I'm going to create a widget blueprint based on or a user widget and call this WB P spell globe and
we'll go ahead and open that up.
Now the spell globe is going to get a size box.
I'd like to be able to change the size so we'll call this size box underscore root.
And we're going to go ahead and change from fill screen to desired.
And that way we can set the desired size for our size box.
Now I'm going to start it off at a width and height of 100.
And rather than just putting 100in here and here, what I could do is do similar to what I've done with
our other widgets such as our progress globes.
Let's just look at that.
We created some functions.
If I go to the event graph to update the sizes and we're using pre construct for that.
So I'm going to use update box size, basically the same thing that we did here I'm going to do in the
spell globe.
So I'm going to make sure size box root is variable.
So check that check box and come back to the graph and add two variables.
And just like our Globe Progress Bar, I'm going to put these in globe properties.
We're going to have a box with and a box height.
So here in Spell Globe, I'm going to make a new variable called box width.
It's going to be afloat.
It's going to get its category set.
And we'll just call it Globe Properties and we'll get another float called Box Height.
It's also going into Globe Properties.
I'm going to compile so I can give these both defaults and they'll be 101 hundred.
And now that we have these, we're going to use event pre construct to set them.
We're going to take our size box route and call set width override.
And we're also going to call set height override.
So we'll hook these up.
Like so and we'll bring in box with.
For a set width override and box height for set height override.
And we'll highlight both of these, collapse them to a function and call this update box size.
Okay, so that takes care of the box.
Now we're going to want a few brushes here and we have some brushes If we go to our content assets folder
and go to UI, we have a rings folder and we have globe ring.
These are the big rings that we're using for health and mana and we have skill ring and there are a
few variations of the skill ring here.
We can see skill ring one.
We got a crack on the right and a crack on the top left.
Here's skill ring two.
There's only a crack down there at the bottom left skill ring one A is different and skill ring two
A is also different.
So we have some pretty nice looking skill rings that we can use.
So what I want is an image for the ring and an image for the glass.
Just like our progress bar has image glass and the image background is our ring.
So I'm going to go back to spell globe and we'll add two images and to add two images on top of each
other.
That means we need an overlay.
So first we'll get an overlay.
We'll call this overlay root and on to the overlay.
We're going to get a couple of images.
There's one, there's two.
Now the one in front can be the ring and the one in back can be the glass.
So I'm going to call the first one.
I'm just going to look at my Globe Progress bar and use the same naming conventions so we're consistent.
So first we'll have glass and the other one is going to be Image, and we're calling it image background.
But I actually brought it to the foreground, didn't I?
That's fine.
I'm going to call it Image Background and Globe Progress Bar.
But here I'm going to call it actually image border or even this could just be image ring.
That's okay.
If it's even more specific like that they're both going to be is variable checked both of them and we're
going to set them both to fill horizontally and vertically.
And let's go ahead and give these their brushes now.
I'm going to go straight for the graph and create those functions for setting them as we have those
functions.
Update background brush, update, globe brush, and these have our background brush variable and our
globe brush variable, which we called Progress Bar brush.
We're going to do something similar here.
It's going to be a little more simple though, as we don't have progress bars to worry about.
So I'm going to add a couple of variables which are brushes.
Just like we have here.
And remember, these are slate brush structures.
So back in Spell globe, let's add a couple more variables.
In globe properties add variable.
We're going to call this first one, I'll call it ring brush and put this in the category.
Globe properties.
And ring brush is going to be a slate brush.
We're going to compile that and give it a default brush.
So the image is going to be one of our rings.
And I'm just going to choose skill Ring one and we'll go ahead and set our image ring.
We're going to call set brush on it.
And we're going to use ring brush.
We'll hook that up.
We'll collapse to a function and call this update ring brush.
And back in our designer.
If we compile, we can see the ring.
So that looks nice.
Let's do the same thing for the glass.
Actually, the glass I don't think needs to be a variable.
I think I'm just going to set it directly.
And if I just take a look at my image glass here, it's my empty globe.
I'm going to browse to that, then come over here and set it.
And of course we're going to need some padding here.
Now, the padding itself should be a parameter because as the size of our entire widget changes, then
that padding is going to need to change as well.
So I'm going to go into the event graph and take our image ring.
And we want to set the padding.
Let's go back to Globe Progress Bar and remind ourselves how we did that.
Here we have update globe padding and we took our globe.
We got slot as overlay slot and called set padding on it.
So that's how we're going to do this.
So we're going to use slot as overlay slot.
We're going to call set padding on that.
We're going to make a margin structure and we're going to promote one of these to a variable called
glass padding.
And the glass padding will go ahead and adjust it until it looks right.
And we have our set padding function.
We're going to collapse these nodes.
To a function.
And actually I'm going to undo that because I want glass padding inside the function here.
And this will be update glass padding.
Now, before calling this, I'm going to disconnect it and come back into the designer and play with
the padding until I get something that looks good.
So just hitting numbers four, five, six and so on until I like what I see.
So it's kind of a matter of preference here, but I think ten is too much.
Eight is okay.
Seven.
Six looks pretty good.
Just as long as it looks like glass.
I think seven is actually a pretty good value.
So for that reason, I'm going to come back into glow padding.
Give it a default value of seven.
Oh, whoops.
That is not what I meant to do.
We're in glow progress bar here.
I meant to go to spell globe in the graph and we're going to use seven.
For the glass padding, so giving it a default value.
If I hit compile of seven and we'll go ahead and stick this in glow properties as well.
And if we go ahead and hook that up now, we should see and something doesn't look right.
So let me go back and see.
And it looks like I used my image ring.
I should have used my image glass.
Instead, we're going to set the padding on the glass, not the ring.
So let's go back and compile.
And there we go.
That's better.
Cool.
So this is looking pretty good.
Now, this isn't the only thing I want.
I also want a background color brush and not just a color, but some flowing material, kind of like
our Globe progress bar.
But it's not going to be a progress bar.
It's just going to be an image.
So I'm going to bring in an image here and I'm going to make sure the image is behind everything else,
including the glass, and I'll go ahead and fill it and we can set this and.
Back here in UI globes, we have some other material instances such as fire skill BG.
I'm going to set that for my image.
And here's what fire skill BG looks like.
Now I think this should have its padding set and I'm just going to set it to the same padding as our
glass.
So instead of update glass padding, perhaps we could call this function update glow padding.
And I'm going to take that new image.
I'm going to call it image underscore.
Background check is variable and bring it in here.
Get slot as overlay slot and we're going to call set padding on it.
And we're going to use the same padding that we're using for the glass.
So I'm just going to hook that straight in right there and compile.
And that's going to look better as this material has darkness around the edges here.
And if you feel like this should be a different padding, for example, you might want to change this
a little bit.
You can experiment with it, but I think the same padding is going to be fine.
Okay, so this is looking pretty good.
Now, in addition to a background image, I'm also going to want an icon image for the spell.
So this would go in front of the background, but behind the ring in the glass.
So I'm going to get another image in here.
I'm going to drag it on top, but I'm going to drag it behind the glass in the ring but in front of
the background.
Set this to fill and I'd like to see what icons I have if I go into UI spells.
There are some icons here and one of them is Firebolt and this is what it looks like.
I'm going to use this, so I'm going to go back to my spell globe.
Rename this image to image, underscore spell icon and set that to my firebolt.
Now, this may or may not look better with padding as well, so if you want to play with the padding,
you can make it bigger or smaller.
I'm thinking that seven is looking pretty good.
This may be something that we may wish to have our own padding for, but either case, I'm going to
create a variable for the icon itself.
So we'll have a brush for that.
And for now, I'm going to set the padding to the same as the glass padding.
So I'm going to use image spell icon slot as overlay slot call set padding on it, set padding and pass
in that same padding structure there.
So that way they're consistent.
If we resize this for different spells and find we need a different padding, we'll handle that then.
But for now that's how I'm going to handle it.
And I'm also going to create a brush structure.
So add variable and this will be our spell icon brush and we'll stick this in the category glow properties
as well.
We'll compile and we'll give it a default value.
And I'm just going to select Firebolt that texture there and we'll go ahead and set that image spell
icon.
So we're going to call, set, brush and pass in spell icon brush and we'll go ahead and make this a
function collapse the function called update spell icon brush and we'll call that.
So now we have our spell icon.
So this is really looking nice.
Now, the last thing I'd like to add is cooldown text.
When a spell is in cooldown and we're going to implement that soon, I'd like text here that we can
use to show that cooldown amount so maybe we'll gray it out, make it look nice and dark, and while
it's in cooldown, we'll be showing that time remaining until we can cast that spell again.
For that reason, we're going to drag in text and this is going to go right here on top at the very
bottom.
And I'm going to call this text underscore cooldown.
Check is variable and I'm going to go ahead and just set this to a number nine nine, for instance,
or perhaps, let's see, 3.5.
We'll see how that looks.
And we definitely want to change the font.
I'm okay with white for the font color, the font type though.
I'm going to scroll down and use Pirata one.
I'm okay with that font.
I'm going to use the font size of 24, perhaps a little bit of letter spacing, maybe 70 outline size
of one.
I definitely think a black outline is important here and I'm going to choose horizontal alignment to
center and vertical alignment to center like so there we go.
Now we're going to want to make the background darker while we're in cooldown.
So our image background has a tint, right?
And if we turn that tint all the way down, we see that it looks nice and dark.
So it'd be nice to have a handy function for adjusting or just setting directly that tint value.
So how would we do that?
Well, we would take that image background.
And we can search for set tint and there's a set brush tint color and the tint color.
If we make a slate color, we can choose a color.
I'm going to choose all white, but notice we can make the value go down, say almost black there.
Now what happens if we hook this up?
And compile.
We see that it's darker, right?
So really we could make this color a tint value if we take the specified color and make linear color.
What is the color?
If I just take a look at this, I broke the pin connection there.
If we drag saturation down, well, we see that red, green, blue are all one and as the value goes
down, they all go down at the same time, right?
So as long as we have the same value for all of them where all the way desaturated and we're changing
the value from 1 to 0.
So what we can do is we can make a function that takes in a single float value and makes a slate color
with an alpha of one and a tint as an input.
So I'm going to make a new function.
I'm going to add a function called set background tint.
It's going to take in a single float.
So clicking plus will add a float called tint.
And what it's going to do is what these nodes are doing here.
So I'm going to control C to copy control V to paste and take our tint and plug it into red, green
and blue, not alpha, because then that would set the alpha.
So now we have this function that we can call and pass in a number between 0 and 1.
So set background tint here.
We can just test it out here.
If we use zero, we should see black.
If we use one, we should see.
No darkness at all.
So it's normal.
And if we use a value between 0 and 1, then we see a darker background.
So we can use this function to set the background tint when we're in cooldown mode.
Okay.
So that is I think enough for this video.
We have a nice base class and by default the text cooldown can be empty and now we have something we
can use in our health mana spells.
We're going to tie this all together in the next couple videos.
So great job and I'll see you in the next video.