Welcome.
So we have our offensive and passive spell trees.
Now we need this part down here, our equipped spell row.
This will be a series of icons that will show our spells that we've equipped.
So let's make that now.
Now I'm going to take my passive spell tree and browse to it and simply duplicate it.
And this one can be equipped.
Spell row.
Now, first thing I'm going to do though, is just delete the box root.
We'll create this from scratch.
Now, this is going to look similar to what's in our Health Mana Spells widget.
We can take a look at that in UI Overlay Sub Widget Health Mana Spells Widget Blueprint.
So I'd like six globes here for the offensive abilities and two for the passive.
But we can do this a little bit differently.
I think we can use wrap boxes to make our lives easier.
So here in equip spells row, I'm first going to see what it looks like for a wrap box.
So we do want a wrap box.
I'll call it wrap box root.
And I'm thinking I'm going to want my spell globes and their labels just above them like we have here.
So a vertical box might make sense.
I'm going to search for one and bring one in.
And straight on to the vertical box.
I'm going to get a text.
Bring a text widget onto that and just under the text.
We're going to get a glow button.
So getting a spell glow button onto the vertical box and that will be beneath it.
Now for the text, I'm going to set the text to LMB, and if I go back to health manage spells, I can
see what the properties are here.
We have Amaranth regular.
I'm going to set that as the font.
Going back the size is 14.
Outline size is one.
We can give this a size of 14 and an outline size of one.
And if I set the justification to center, it'll be centered here.
So that looks pretty good.
Now, before going and adjusting the size, I'd like to see what this looks like in relation to our
other widgets.
So if I go to my overlay, I can bring one of these in.
Now I'm going to go ahead and move these up and make some room and bring in my equip spell row.
Here it is.
I'm going to bring it in here and it looks a lot like my passive spell row because I haven't compiled
my changes to my equip spell row.
So if I compile and save, I can come back into my overlay and see what this looks like.
Now, I'd like these icons to be pretty close to our passive icons as we need six of them across, plus
two smaller ones for the passive equipped spells.
So my passive icons, if I go into my passive spell tree, I can take a look at their size searching
for properties.
There's 60 so I can set the size.
And my equip spell glow button to something a little bit bigger, but around that size, perhaps 70.
And of course, that means we need to adjust the padding, don't we?
So instead of seven, I'm going to try six, maybe five.
5.5 seems pretty good.
So that looks pretty decent.
So keeping these two in a vertical box is pretty convenient.
I'm going to call this first box.
Box underscore lab, and then we can copy this box six times.
I'm going to control C and click on the box root and control V, and that will put my next one right
here.
And I'm going to call this one box R&B.
I'm going to take this text and change its text.
To R&B.
So I'm going to repeat the process four more times for the rest of the spells, and I can time lapse
that.
Okay, so we have the spells.
They look pretty nice.
We're going to want some space between them.
Not much, but a little bit.
And in addition to that, we need our passive spells, right?
So I'm going to drag a spacer in.
Right in between the first two boxes.
I'm going to select that spacer, make it a little bit wider.
I'll put it at about five and I'll drag in another spacer in between the next two boxes and I'll keep
doing this.
And then I'll set all of their sizes to the same size.
So I can select all of them at once.
And I can set all of their X values to the same value.
And it looks like I tried to control V with something I didn't want to paste.
I'm going to paste in five.
Okay, that's looking pretty good.
If I compile it, I can look at my overlay and see what it looks like here.
Now I'm going to put its position X at this value.
And bring its position y up.
Just to see what it looks like here.
So I think I might actually like these to be a little bit smaller as I don't want them filling up all
of this space.
I'm going to want them smaller so we can see some labels and give them some more padding.
So what I'm going to do is I'm going to select each of these boxes holding shift and selecting them.
I have them all selected and I'm going to search for properties and change their sizes to maybe even
50 and 50 for height and width.
And for the padding.
This needs to be smaller.
For seems like a good value.
And in fact, I think these labels can be smaller as well.
So I'm going to change their font size.
I'm going to select them all and change the size from 14 to about ten.
I think that looks pretty good.
And that way we'll have some space for some labels.
Okay, so this is looking good.
My box root has a bunch of boxes inside of it.
Now all of these are going to be kind of separate from what comes next, which is my passive abilities.
So all of these could be wrapped in a box themselves.
So I can select all these widgets, right click and wrap width.
And if I choose a wrap box now they're all in their own box.
And then I can add another box next to it.
So if I do that, I'll put it on box root.
This one can be called rap box underscore offensive.
And this one can be wrapped box passive
and wrap box Passive can have a couple of globe icons of its own.
These are actually globe buttons.
They're all going to be buttons here.
So I'm going to search for button actually spell globe button.
We'll get one in there and we'll change its size right away.
So I'm going to see what 35 and 35 look like.
I may actually want it to be smaller than that.
So maybe 25, 25.
And of course my padding is going to be much smaller.
Two looks almost perfect.
Three is too much.
2.5 is too much, so two is good.
So there's one of our passive spells we can compile and look at our overlay as we're working with this.
So yeah, that looks a little bit too small.
So rather than 25, 25, I'm going to try 3535.
That looks better.
And three padding looks good.
So I'm kind of liking that and I'm going to go ahead and copy this globe.
Click on my rat box passive and paste it and change my rat box passive.
I think I'm going to need my orientation to be vertical like so.
Okay, so things are looking pretty good here.
We have a rat box offensive and a rat box passive.
I would like a label above this that says offensive and passive here.
And in addition, I think I'd like a bit of a spacer between these two rat boxes.
Let's do that first.
So we'll get a spacer here.
We'll go ahead and increase its width.
And now we need to think about how we're going to handle having a label above each of these.
Right.
Now, one way to handle this is to take our wrap box offensive and simply wrap it in a vertical box.
So we can do wrap width, vertical box.
And in this vertical box, we can drag in some text.
So we'll put it right there in this vertical box.
Now.
It went below our rap box.
I'm going to want it above the rap box.
And I can call this vertical box underscore offensive.
And I can change the text block to say offensive and we can change its font for the font.
I'm going to try Pirata one regular with a font size of about 14, an outline size of one.
I'm going to set its justification to center.
And that's looking pretty nice.
Scrolling up, I can set its vertical alignment to center and its horizontal alignment to center, and
it's going to stay right there in the middle.
And as I increase or decrease the size, it'll take up more or less room.
Now I'm going to do the same thing for my passive ramp box.
I'm going to right click wrap with vertical box.
And this can be called vertical box underscore passive.
And in the vertical box I'm going to drag in some text and it's going to go above not in the wrap box.
I accidentally put it in the wrap box.
I'm going to put it above the rat box and change its text to say passive and I'm going to take my offensive
font.
Copy its font family and paste it over.
And copy its font size.
And paste that over as well.
And set its outline size to one.
Set its justification to center.
And come up to the top.
Set its horizontal and vertical alignment to center.
Now its offset and I believe my outline size wasn't set, that could be one.
Now it appears that these two icons are off to the left.
So what I can do is take my wrap box passive, and if I click horizontal alignment center, vertical
alignment, fill vertically and horizontal alignment here to center.
Now its centered nicely.
Okay, so that's looking nice.
Now the whole thing is off to the side, right?
Let's compile and see what it looks like in the overlay.
So yes, it's off to the side.
It would be nice if it filled this space.
So back to our widget.
Let's take our wrap box route right here and we can change its horizontal alignment to center align
horizontally.
I'm just going to set vertical to center align as well.
And that's going to fix it.
Now zooming in on it, I see that it changed to wrap around.
If I click on compile, that's going to fix it.
So zooming in is going to give it some strange behavior.
But if we look in our overlay, we'll see what it really will look like.
Zooming in changes it there as well, but compiling fixes it and pressing play.
We see what it really looks like.
Now here's what it looks like in the viewport.
So we definitely want to make sure that we don't get that wrap behavior here.
Now, a way that we can avoid that wrap is by setting the wrap box route to have horizontal alignment
fill.
And that's going to make it off to the left again.
But then our horizontal alignment in inner slot padding in content layout can be set to centered.
And then no matter how much we zoom in, it stays where it is supposed to be.
We can see that in the overlay as well.
And if we play test, we'll see that in the viewport as well.
All right.
Things are looking better now.
It's a little bit small, right?
A little bit too small.
And so that can be easily adjusted.
So at this point, we're just making some last minute adjustments.
For one, this spacer might actually be unnecessary now that these two icons are centered with the passive
text.
So I'm going to just remove that spacer there.
I'm also going to put a spacer between these two icons.
So let's bring one of those in and increase its vertical size.
There we go.
So it was behaving a little strangely.
So I selected Rat Box Passive, changed its orientation to horizontal and then back to vertical and
then it behaved itself.
Okay, so we have some spacing there.
Now these icons are quite small in the viewport, so we may indeed want them to be a bit bigger.
So I think we'll go ahead and just make them bigger.
If I select our larger ones, there are 50 and these are 35.
Perhaps these ones can be larger too.
Let's make them about 60.
And we'll make these ones 50 or maybe 45.
There we go.
Now I'm going to hit compile and that's going to put them all back where they belong.
And our overall route box route is filling up our size box route and our height override could be a
little bit larger.
I'm going to actually put it over the size that we need just by a little bit.
We'll put it at 140 and I'm going to make sure that my height override and spell tree properties box
height is set to 140 as well.
So that's a little bigger.
Let's see how that looks both in the overlay.
And I'm actually going to delete it and bring in a new one at the right size.
And let's just see what it looks like in the viewport.
I think that's looking better.
Still small, but better, and I think we can live with that.
So I think that's going to do it.
Again, we could tweak these all day long, but we really shouldn't be tweaking too much until we get
this into our main spell menu widget.
Until then, we're really just kind of being nitpicky.
But one thing I will change is I'm going to make sure in my properties that my box width and my padding
are compatible, so I'm going to make sure of that.
So with the box width of 60 and a glass padding of four, I'm just going to make sure that I'm zeroing
in on the correct value.
That looks good.
I think five is good for a box width and height of 60 and then here for 45.
I think four is actually pretty good.
All right.
So that's looking good.
We now have our equipped spell row and we're ready to throw all these together into our overall spell
menu.
And we'll do that next.
Great job.
I'll see you soon.