Welcome back.
Now that we've got our three main spell related widgets, we can start creating our actual spell menu
and put these into it.
Now, the spell menu is going to be a larger widget, kind of like our attribute menu.
In fact, it's going to have quite a few similarities, but several differences.
So what we can do is duplicate the attribute menu to save ourselves some work.
I'm going to right click on it, duplicate it and call this WB underscore spell menu.
And I'm going to move it into my spell menu folder.
So move here.
Now, I can close out of that and I'm going to close actually most of these, I think, and just open
my spell menu.
And the first thing I'm going to change is the text at the top.
Instead of saying attributes, I'm going to say abilities.
So I've been saying spells, but spells and abilities are interchangeable here.
The only difference, if any, is when I say spells.
I'm talking about either my offensive abilities such as attacks like our firebolt and the passive abilities
that we have not yet made.
Now, a lot of the stuff here we don't need, and I'm going to start gutting out this widget in the
event graph.
We're going to handle the functionality of this soon enough.
For now, I'm going to just delete most everything here.
In fact, I'm not even going to keep this setter for attribute menu widget controller as this class
isn't going to use the attribute menu widget controller, it's going to use its own widget controller.
So I'm just going to delete everything and we don't need most of the things in here.
We have an event dispatcher called Attribute menu closed.
I'm going to remove that.
I'm going to remove the function set attribute tags.
Set Primary attribute Tags.
Secondary Resistance.
Now set buttons enabled is using a whole bunch of buttons I'm about to delete, so I'm going to delete
that.
We're basically gutting out most of this entire thing.
And everything under abilities I want to delete as well.
So here in my overlay we have the image background.
I want to keep that image border.
I want to keep that.
We have a wrap box with text at the top and a spacer.
But everything else I'd like to highlight and delete.
I can even highlight all the way down to the bottom except perhaps that close button.
I may want to keep that, but you know what?
I'm just going to highlight everything and just start over and hit delete.
And that way we have what we see here.
Okay, so that's what I'd like to start with.
So I have my wrap box, I have a spacer and the rest can go in here.
Now what is the rest going to be?
Well, I'd like my spell menu to be separated into two main parts.
Everything we just made, which we added to our overlay.
Let's go look at that.
All of this stuff we just made will be on the left side and on the right side.
We're going to have a couple of scroll boxes with text for spell descriptions.
But above even all that, we're going to have some additional stuff.
Let's take a look at our layout here in the plan.
So notice right away that this spell menu is split into a left and a right side.
Now, the left side is kind of like the spell tree side.
And the right side is the description side.
So I'd like to break this up into two boxes, one for the left and one for the right.
So let's do that.
So if I'm going to have two sides, I should have a horizontal box and then we can drag in one thing
and another.
So just under the spacer, I'm going to get a horizontal box, bring it in, and this horizontal box
is going to have a couple of things in it.
I'd like those things to be wrap boxes.
So I'm going to bring in a wrap box onto the horizontal and I'll bring in two of them and they'll be
next to each other.
So the horizontal box here is going to be basically a horizontal box root.
And then our rat box here to the left is going to be rat box underscore tree side, and the next one
will be rat box underscore description side.
So we'll have two major sides here.
Now, we could set these to fill just to see what they'll look like.
But I'm going to set rat box tree side to auto and leave their horizontal and vertical alignments to
fill.
And we're just going to start bringing things in for the rat box tree side.
We want first our offensive, then passive, then equipped widgets.
So I'm going to first search for offensive.
And bring that on to my rat box tree side.
I'm then going to search for passive.
And get that widget on.
It'll go right beneath it.
And finally, I'm going to search for equipped and that's going to come in onto the rat box just beneath
it.
So that's looking pretty nice.
I'm seeing, though, that my offensive spell tree has icons that may be a little bit too big and overall
everything is a little bit too large.
If we want some room for descriptions here.
Now, part of that has to do with our padding here.
The padding doesn't have to be all that large.
If we take this rat box here, the overall rat box, our padding is 60, but our left and right padding
doesn't have to be that high.
We can set left and right to both say 20.
Now we have a bit more room.
But in addition to that, these boxes don't have to be so wide either, do they?
So rather than setting the overall rat box left and right to 20, we'll go down to maybe 40 or 30.
Let's try 30 for left and right, and then we'll go into these offensive, passive and equipped widgets
and change their size as well.
So I'm going to go into spell menu first into offensive spell tree.
And what I can do is select the size box and change its width override so that it's not so wide.
And once I get a good number, say, for 20, then I can use that number for its.
Box width.
So we'll change that to for 20.
Compile that and now that is not so wide and we'll do the same thing for the passive.
We'll go into its spell tree properties and change its box width to 420.
Compile that and it's not as wide.
And once again, we'll do this for equipped spell row.
Now it's possible for 20 might be too small for this, but we'll see.
Let's just first put it into width override here and we see that it's a little bit too narrow.
So we probably should have done this one first because I don't really want this one to get too much
smaller.
So I'm going to put it down to just about a size that can handle 445 looks good.
Maybe we'll round it up to 450 and I think that will be a good size.
So I'm going to set all of their box width properties to a default of 450.
That means the passive gets 450 as well.
And our offensive gets 450 as well.
So compiling all those changes.
And looking at our overlay, we see it looks like this and looking at our spell menu looks like we have
a good deal more room and our overall route box doesn't have to have such a small padding.
In fact, it might be able to go back up to 60 and 60.
That may actually work.
I'm actually thinking 50 and 50.
Okay.
So that's looking pretty good.
This is all for our wrap box tree side.
Now our route box tree side is going to need some labels above our trees and equipped spell row.
We're also going to want spell points at the top there, so we'll get to that.
Let's put some labels in.
So first I'm going to select my abilities text.
I'm going to copy it and then select my offensive spell tree.
And with that selected, I'm going to control V to paste and I'm also going to want one above it too.
So I'm going to take my offensive spell tree, select it and paste again, but drag this one above it
and this one will be a label for offensive abilities.
So I'm going to change this text to say offensive.
Now it's quite big.
I'm going to change its size down to 20.
I'm going to increase its letter spacing, though, from 400 to 600 and I'm going to make its color
less orange.
In fact, I can choose this color.
That looks pretty good.
Now down here, it's going to say passive abilities.
So I'll change the text to say passive abilities.
I'll change its color to this beige tan color.
I'll change its size to 20 letter spacing 600 and I think that looks good.
Let's compile and look at the overlay.
Actually, we don't see that in the overlay, so I'm going to go ahead and just remove these widgets
and now put in my spell menu, see what that looks like.
Spell menu that can come in right here.
And we can also compile and press play and see what it looks like here.
Okay.
I think my padding on the spell menu doesn't need to be as much as the padding on the attribute menu.
Now, I keep coming back to the padding, but, you know, it's one of those things that you kind of
tweak over and over again.
I think I'm going to set padding all to 40 left, right, up and down.
Okay.
Now, in addition to the label's offensive and passive abilities, we want a label for the equipped
abilities.
So I'm going to copy the passive abilities.
Select my passive spell tree and control V so I get new text beneath it and this will be equipped abilities.
So we'll change this to say equipped abilities like so.
Okay, now we need something above our offensive abilities and that is our spell points and our spend
points button as well as a value for our spell points.
So I'd like my own rap box right above this inside of rap box tree side.
So we're going to say rap box.
We're going to bring it in just inside rap box, tree side.
And I want to make sure that it's above my text offensive abilities.
Right here.
And this wrap box I'm going to rename to wrap box underscore spell points and we're going to have several
things in here.
First of all, I need some text, so I'm going to bring in some text onto wrap box spell points and
the text is going to say spell points.
I'm going to change its font to Pirata one and its size to 20.
We'll adjust this later in game as we test its letter.
Spacing can be 150, its outline size can be one and next to spell points.
I'm going to have a text value widget.
If I search for value, we have a framed value widget here, so I'm going to drag that onto the wrap
box spell points as well.
And in addition to that, I'd like a wide button.
So I'm going to bring in a wide button onto the wrap box spell points.
Now the button should be smaller.
Now, as we zoom in, we see that the box changes behavior.
Now, this wrap box actually is trying to act up a bit.
And if I set its orientation back to horizontal, it behaves itself until I go and scroll again.
And I really don't need it to be a wrap box.
So I'm going to actually right click and replace it with a horizontal box that's going to make sure
that it doesn't do this wrap business that I don't want.
Now I just need to make sure that this horizontal box has the properties I want for each widget.
Now, it doesn't need to be called wrap box anymore, so I'm going to call it just box spell points
and let's make this look how we want it.
Now the spell points text can be vertical alignment center and the box spell points itself I think can
be set to horizontal and vertical center.
And I can check fill empty space and that way it'll be nice and centered and then I can place spacers
in between these widgets here.
So for box spell points, I'm going to find a couple spacers and stick them in between.
Text and the framed value.
And increase that size a bit.
To about 20.
And I'm going to copy that spacer, select the frame value, paste the spacer like so.
Now for my button.
I'd like my button to be at a bit of a smaller size and I'd like to change the button text.
If I search for properties, I can change the button text here and I'm going to have it say Spend point,
and I'm also going to change its letter spacing.
It doesn't need to be quite so dramatic.
Perhaps 100 is good and the box width can be lowered as well.
I'll try 160.
Actually, that's a little too low, perhaps 180.
Now the box height can be lowered too.
I'm going to try 55.
And that seems okay.
60 might be better.
So we have our spend point button.
Now, it'd be nice to have some space in between this row and offensive abilities.
We can add a spacer.
Right above offensive abilities here.
I don't want it inside of that widget, so I need to make sure that it's not inside of box spell points.
And I can change its size.
I need it to be wide enough to go to the next line.
I'm going to bring it just about to 400 or so.
And then increase its height.
There we go.
So now we can compile and take a look at the overlay, see what it looks like there.
We can also press play and see what it looks like here.
It's looking pretty good.
Again, I think that these spell icons are a little bit large, so I think they could be lowered a bit.
I could use a little bit more space between our labels here, but spell points looks pretty good.
The frame value could be a little smaller.
We might change the size of that.
I'll do that first.
I'm going to select it and choose center for horizontal and Vertical Alignment.
That way it doesn't stretch so much, and I think that fixes it.
Now, this spacer could be a little bit higher, perhaps 20, and I think that's going to do the trick
for me.
And I might actually have one of these above box spell points.
So I'm just going to bring one in just above it and it looks like it went somewhere else.
So I'm going to control Z.
I'm going to collapse the box spell points here and make sure that spacer doesn't go inside of it.
It went below it.
I'm going to bring it up.
Make it go wide.
Not too wide.
This can be a little finicky there.
I'm going to make it wide and then increase its height.
We'll make it 20.
Okay with a compile.
We can check what it looks like.
We can open the attributes menu and see them next to each other.
So far, so good.
Now, before we wrap up this video, I'm going to go ahead and make that offensive spell tree.
Have some smaller sizes for its icons.
I think they're a little too large.
So I'm going to search for properties and change box width and height.
I think we can try 80 and 80.
So I'll just compile that.
Press play.
I think that's a bit better.
And our offensive spell tree doesn't have to have such a high size.
For the size box.
Now we can select each of them offensive spell tree, for example, and click fill empty space.
We can do that for the text as well.
We can take our passive tree and fill empty space.
We can take our equipped spells row and fill empty space.
And now these are all aligned.
Let's see how that looks in the game.
Okay, that looks good.
I think these are all aligned and looking nice.
Really?
We just need a couple of windows for our description text and a close button down here.
And I believe that I changed my spell menu to have less padding.
But everything does seem quite far away from the edge, especially since the offensive icons are smaller
and its size is smaller.
What I think I might do is actually increase the length or I mean the height of each of these images.
I'm going to take the image size.
It's 32, actually, the Y is 15.
I'm going to increase that.
I'm going to try 25.
And hit compile.
We can see what it looks like.
In the game.
We can also just kind of space things out.
So, you know, rather than 25, we can increase it to an even larger number, say 35, and we can increase
these spacers as well to perhaps 65 in the X, maybe 75.
And the lines can be even higher, perhaps even 45.
Hitting compile.
That's looking pretty good.
Let's look at our spell menu.
I think that looks good.
They might be actually a little too high.
We'll tweak them.
I'll put them down to 30.
And I think that's enough tweaking for this video.
We're going to continue.
And again, this is also a little bit premature when it comes to tweaking because we don't have everything
here yet.
So we'll get to that.
So far, though, things are looking good.
We'll continue in the next video.
I'll see you soon.