Okay, so we have the left side of our spell tree and it's all inside of this one big wrap box called
tree side.
And we have one called description side and we need some things in it, namely boxes for descriptions.
So when we click on an ability to select it, our description box will populate with a description about
that ability.
So in this wrap box, I'd like a few different things.
I'm going to start with a spacer, so we'll stick a spacer right on in there.
And beneath this spacer I'd like text that says description.
So I'm going to drag text in right onto the wrap box.
So it goes beneath that spacer.
And then I'd like another spacer underneath that text so that we can have space between the text and
the next thing that goes in.
Now the next thing that I'd like is a size box so we can determine the size of that description.
So I'm going to drag a size box in and below that size box.
We'll go yet another spacer, so we'll drag that in and then another size box for a second description.
And that's going to be for the description of the ability next level once you level up that ability.
So we're going to add a second size box.
And finally, another spacer.
And whatever else we like beneath it.
Such as a close button, for example.
In fact, we can go ahead and put that close button on in by dragging in a button onto that wrap box.
And I believe that's going to be everything.
And actually, that's not the button I wanted.
I want my button.
That one looks better.
So there's our button.
So we have a whole bunch of things in our chat box all just right here bunched up together.
So we're going to need to space them out, right?
And the first thing I'm going to do is take all my spacers and make sure that they all have an appropriate
size in the X.
I'll just give them something like 50, maybe even 100.
They don't have to be that wide.
They just have to be wide enough to push the next thing over.
Maybe 120 will do it.
There we go.
Now that we have that, we can increase their size in the Y.
If I increase it to ten, we have spacing of ten.
We can increase that even to 20, but then we can tweak things as we see fit.
Now the text block needs to say description, so we'll change it to say description and we'll also change
its font.
I'd like Pirate of one and we'll also change its size.
We'll make it 20.
I'll give it a letter spacing of 150 and a outline size of one.
And there's our description.
Now the rat box can be a little finicky when you're messing around and zooming in.
You'll see that it changes sometimes hitting compile changes it yet again.
But we can get this behaving as long as we make sure that things wrap as they're supposed to wrap.
Now, scrolling on up, we can click on our first spacer.
In fact, we can click on actually everything in this rat box and click on Force New line that's going
to make sure everything forces the next thing into a new line.
That's exactly what we want.
Now, the rat box itself that all of these widgets are in is actually not taking up much space.
But that's okay because our size boxes can begin to take up space if we override their width and height.
If I click on width override and drag that up, I can make it as wide as I like.
And I'd like it to be about 220.
In my case, because that almost fills up the empty space and I can drag on the height override too
and make that a little bit larger there.
So I have a width of 220, a height of two.
Let's make it 250 and I can set that for the second size box.
We have a width override of 220 and a height of 250.
So that's going to space those out a little better.
Now our spacers themselves could be a little bit larger, so I'm going to take their Y in their size
and let's just increase it to 40.
I think we can afford that much space and now things are looking a little bit better.
Descriptions should be centered in this whole column, so I'm going to take description and click fill
Empty space and set horizontal alignment to fill and make sure it's justification is centered.
And now our description looks a bit better.
And I think that actually descriptions spacer could be a little bit smaller in the Y so that that word
is closer to its actual description.
Let's set that back down to 20.
That looks pretty good.
Okay.
Now our close button down here.
I think this should be aligned to the right so we can actually take its spacer, the one just above
it and push it on down.
And we can also put another spacer to the left of it.
So we'll drag in another spacer here just before it.
And this spacer, I'm going to click Force New Line and select my button and uncheck force new line.
And that way this spacer can push the button to the right.
So a couple of spacers here.
One pushing it down.
And the other pushing it to the right.
Now, if we zoom out, everything just blew up, right?
So we're going to want to make sure that that doesn't happen.
So if I uncheck fill empty space for the description that fixes the problem, but it goes back to the
left.
If I click it again, it goes back to the center.
So the UMG can be a little bit finicky.
Sometimes if we compile, then it goes back.
So we're going to have to get around that problem.
I'm going to uncheck fill empty space.
We'll have to just push this description to the right just a little bit with a spacer.
So I'm going to put in another spacer here.
I'm going to click Force New line on it, uncheck force, new line on the text.
That way it's to the right of the spacer and then we can push that spacer a little bit to the right,
like so a little bit of a hack, but it'll work.
Okay, so we have this all set up.
We have two size boxes.
The last thing is to make these size boxes, have scroll boxes inside of them, as well as perhaps their
own backgrounds and borders.
So that means they need overlays.
So I'm going to put an overlay into each one.
I'm just going to drag it on to the size box.
Here in the overlay.
We'll put our additional widgets.
We'll put the overlay in both size boxes.
Now, this first one is going to get an image.
So I'll drag that into the overlay.
I'll select the image and set horizontal and vertical alignment to fill.
And I'll search for border.
So selecting border large, we have that large border and it looks kind of skinny.
It looks pretty cool, actually.
Now, if you want, you can draw this as a border.
By selecting the image and changing this to draw as border.
If you do that, though, you need to change the margin.
Changing it to 0.5 is going to make it look pretty good.
But you can of course change that margin so that it's even larger.
0.25 makes it a little bit thicker, if you like that.
Now, in addition to the border, I'd like a background.
So I'm going to drag in another image onto the overlay.
And for this one, we're going to fill horizontal and vertical, but we're going to bring it behind
that other image.
So the background is behind the border and this image needs to have some padding.
I'm going to try a value of two.
I think that'll work.
And this can be some flowing clouds.
So I'm going to search for flowing.
And here's an me flowing red that looks a little bit different.
That looks kind of cool.
We can also just browse to it and duplicate it and create a new one.
Called me Flowing scroll for the scroll box and we can change it.
For instance, we may not want it to be red.
We might want it to be maybe a darker blue, for example.
So now that we have my flowing scroll, our spell menu could use that.
I'm just going to browse to it, go to the spell menu and replace it.
So that's what the dark blue looks like.
Kind of cool.
We can also make it even darker by changing its tint here.
So we have a couple of images here.
I'm going to copy both of them, select the other overlay and paste them in there so we have them there
to.
Okay, so that looks pretty cool.
But we also need a scroll box.
A scroll box is going to allow us to have some text, so I'm going to search for scroll box and I'm
going to drag one into the overlay.
It's going to go beneath both images.
In other words, in front of it on the widget.
And I'm going to set horizontal and vertical alignment to fill.
Now, I put that one in the bottom overlay.
I'm going to drag one onto the top overlay here and set it to fill as well.
Now our scroll box can have a number of things inside of it.
We're going to put some text in there and we'll get to that.
For now, I think that's enough.
We've added quite a few things.
We can take a look at our overlay and see what this menu looks like.
We can even press play and see what it looks like here in the viewport and it's starting to look pretty
good.
I really don't like how much empty space is on the bottom and left, so that's something I'd like to
change.
And it's not that there is less padding on that side, it's just that these widgets fill up less space
on that side.
So a quick fix for that is to take our overall wrap box and just set its left padding to probably zero
and its bottom as well.
So we can see what that looks like.
That looks better.
The left padding could be maybe ten.
Okay.
I'm all right with that.
Now I feel the right padding could be a little bit smaller as well.
But, you know, we're falling down the tweaking rabbit hole.
I'm going to bring that left padding up to about 20, maybe 25.
And I think I'll leave it at that.
Okay, so opening both we see what our menus look like pretty good.
And now we need to make our spell menu functional.
So we're going to end up removing it from the overlay and instead have a button on the overlay to create
the widget and then we'll destroy it with the X button.
So that's one of the next things that we'll be doing.
So great job.
We now have the widget in the videos to come.
We'll be making our spell menu functional.
I'll see you soon.