Welcome back.
In this video, we're concerned with making our passive spell tree.
We already made our offensive one.
Now we need the passive one.
So let's do it so we know what our offensive spell tree looks like and its dimensions.
Our passive spell tree should have the same width, or at least approximately.
So we're going to make one right now.
Now here's our offensive spell tree.
And if we browse to it, we can be really lazy and duplicate it.
And we can call this WP passive spell tree.
So I'm going to close my overlay and my spell glow button.
And this is our offensive spell tree.
I'm going to open the passive version and close the offensive one so I don't accidentally change that
one.
And we want a few things.
We want to keep update box size and all that good stuff, but we really don't need all of these wrap
boxes.
I'm actually going to delete all three of them.
We're going to just keep this one wrap box root, but it's going to be wrapped box horizontal and our
size box root doesn't need to be as high.
We can take that height and bring it on down to something like this.
I'm going to set it to 100, but we do need to make sure to change the default value in spell tree properties
for our box height.
I'm going to give it a value of 100 and compile.
And now we have this actual size.
Now our box root is going to need three spell glow buttons.
So again, I'm going to search for globe underscore button that's going to filter everything else out
and I'll bring in one, two and three.
Now, our passive spells are going to be smaller icons than the offensive spells pressing play.
I can see that.
Here's what our offensive spells look like.
Our passive are going to be smaller.
As you can see, they're smaller and our health mana spells in the overlay as well.
So I'd like that smaller size for them.
That means we're going to want to change the size of our spell globe buttons here.
Now my spell glow button.
If I search for properties, we have the box width and the box height.
I'd like them smaller.
I'm going to try 60 and 60.
So we saw that the width went down, but our height did not.
But if I take my spell globe button and change its vertical alignment to center, then it shows up as
the correct size.
I'll go ahead and set its horizontal alignment to center as well, and I'll do the same for both of
these others.
And then I can set their sizes also.
So I'm going to change their box width and height to 60 as well.
So with properties or part of properties in the search bar, I can select the next button, change its
box width and height and do the same for the third.
Now, of course, this makes a problem.
Our padding needs to change.
Well, no problem.
Actually, we have glass padding here, so I'm going to take this first globe.
We could have done this all before copying this globe, but that's fine.
I'm going to change its glass padding.
I'm going to first try six.
Not low enough.
I'm going to try five.
Five seems to do the trick.
4.5 might actually be better, so I'm going to use that for all three of the icons.
Now I hate to do minor tweaks and derail the conversation, but I kind of would like this locked background
material to have a little bit of some darkness on the edges.
So really quick, I'm going to go to Assets UI and Globes where we have our locked BG and I'd like to
increase the perimeter shadow a bit.
Now I have to be careful doing this because this is going to change how these look.
That's actually a little too much, but with a glass padding of five, it might look better.
No, I'm going to leave it at 4.5 and not have the perimeter shadow quite so dark.
In fact, I can take this material instance off screen and adjust it while I'm looking at this screen.
So changing that perimeter shadow a bit.
I don't want it too, too dark.
But I do want some shadow there.
Now, I also need to keep my eye on our other spell tree, the offensive spell tree, because this will
affect how that one looks too.
So I want to make sure that it looks good here as well.
And if I had to, I could create two materials and use one for the offensive and one for the passive,
since they're going to be slightly different sizes.
But I'm okay with that shadow.
My perimeter shadow is set to just to show you 1.87.
Now I'll go ahead and make some adjustments here so that you can see what I'm adjusting as I'm adjusting
them my cloud darkness here.
I could adjust that as well.
And it seems like it should really be called cloud brightness, right?
But I'm just going to make a few minor adjustments while I'm here.
I'm going to slow the speed down for X.
I think that'll look better.
0.02 for x and 0.02 for Y.
The negative color can probably change a bit like so.
And cloud darkness.
We'll adjust it a bit.
Okay.
That's looking pretty good.
I'm happy with it.
Let's look at passive.
Passive looks good too.
I'm going to stop before I derail this lecture into just tweaking.
So now we have these three icons, right?
We need some spacers between them.
So I'm going to search for a spacer and put one in between the first two and I'm going to change its
size.
Now, you may have noticed that when you have something in the search box and you clear it with something
selected, all of these categories are collapsed, but you can just click on something else and come
back and click on what you had before.
And that's going to expand those categories.
Now for X on the size, notice what happens if I start to make it wider?
That's going to force things to go on the next line there.
But actually, I think what I want is my wrap box orientation to be vertical.
And that way if I increase my spacer, as long as it's tall enough, then I'll get that spacing that
I want.
So I'm going to set the height of the spacer to 50 and the size X to 100 and I'll go ahead and copy
the spacer and paste one right beneath it.
So we have two and that's basically it.
That's our passive spell tree.
We can add one to the overlay to see what it looks like.
We can just put one right here.
So I'm going to search for passive.
Get that passive spell tree on there.
I can even put it directly beneath our offensive spell tree by taking its position x and copying it
and taking the position X of our passive.
Pasting that position in there and we can see what it looks like.
So we have three little ones.
Looks pretty good.
Now notice something about the buttons, right as we hover, we're kind of getting that hover capability,
but it's a little strange, right?
It should be hovering and staying on the hovered texture while we're hovering it.
So we need to figure out why that is and that's going to bring us back to our button.
And that's going to be in spell globes.
Really, our spell globe button widget should probably be in our spell tree folder, but that's okay.
Let's go into it and notice we have an image selection and our button ring is beneath it.
If we put that button ring on top.
Let's see if that fixes things.
Yeah, that definitely fixes things.
Okay, so that looks good.
And it looks pretty nice when we hover over it and when we click on it and hold, we can see that it's
a little bit darker.
In fact, darker than the surrounding buttons.
I think I'd like the press to be even darker than that so I can bring it down a little bit more.
And just see what it looks like when we click.
Yeah.
Nice and dark.
Okay, so that's looking nice.
We now have our passive spell tree.
Doesn't look like much of a tree because there's only three, but I'm just calling it that for naming
conventions.
Same with this.
Doesn't really look like an actual tree.
I'm just calling it a spell tree.
Right.
You get the point.
So now that we have these, we can continue with the rest of our spell menu.
So we'll do that next.
Great job.
I'll see you soon.