Welcome back.
Now we have a spell glow button.
We need to use this button in a spell tree.
Now, in our spell menu, our offensive spell tree will be these nine glow buttons here.
So we'll have three columns, and they'll each be separated by empty space.
And each globe in one column will be attached with lines.
So we need to make this particular offensive spell tree.
That's what we'll do in this video.
So the offensive spell tree will be a widget on its own.
So I'm going to start organizing things in our Blueprints UI folder.
We have an attribute menu folder.
I'm now going to make a spell menu folder, so we'll call this spell menu.
And in spell menu will make a new user widget.
So this will be based on aura user widget.
And I'm going to call this WP underscore offensive.
Spell tree.
So I'm going to open that up and our offensive spell tree is going to need a few things.
For one, I'm going to give it a size box.
I'd like to be able to set its size and I'm going to rename this right away to size box root.
I'm going to check is variable and I'm going to add width and height overrides and set them in pre construct.
So I'm going to grab size box root call set width override, and I'm also going to call set height override
and I'll promote these values to variables.
One called box width and then the other promote to variable and I'll call this one box height.
Now I'm going to compile and give these default values and I'm going to start with about 500 for the
width, maybe 525 actually.
And for the height, we'll start off at about 350.
Of course these can be adjusted.
That's why we want them to be parameters here.
I'm going to collapse these nodes to a function.
We'll call it update box size.
We'll call that an event pre construct.
And we'll go ahead and put box width and box height into categories.
I'll call it spell tree properties.
So Boxwidth is there and we'll put box height as well.
Spell tree properties.
There we go.
Okay, so we have a size box.
We're now going to want some icons, right?
Some glow buttons, actually.
Now I want three columns of them and I want this to be relatively easy to put together and expand upon.
Now we've seen how a rat box will wrap around based on the width of what's in each row.
But a rat box can work the other way.
It can work horizontally and vertically.
So I'd like to see how that rat box works for our spell tree.
I'm going to bring one in.
I'm going to select it.
I'm going to rename it to Rat Box Root.
And my rap box can have its horizontal and vertical alignment to center.
That way things won't be stuck to one side or another.
Now, orientation by default is horizontal, and that's the behavior we've seen with wrap boxes thus
far.
But if we change this to vertical, we'll get things wrapping in the other dimension the other way.
So to see that we need some stuff here, right?
But I'm going to have three vertical columns and each of these vertical columns I'd like to have a wrap
box for.
So I'm going to drag three wrap boxes.
One, two, three.
Notice I'm dragging them onto the wrap box route.
So they're all children of that.
Now this one will be wrapped box underscore col for column underscore one wrap box column one.
The second one can be wrapped box column two and the third can be wrapped box column three.
And for these, I'm also going to set horizontal and vertical alignment to center.
Now we need to see what happens when we start putting things in our box.
The first thing I'm going to want to add are some spell glow buttons.
So I'm going to search for globe underscore button.
That should filter out everything but spell globe buttons.
I'm going to drag one onto that box column one and here we see our spell globe button.
Now how big is our spell Globe button?
It's kind of hard to tell, right?
We're really going to have to see what this looks like if we add it to the viewport.
Now we can get a quick and dirty estimate by simply adding one of these to our overlay.
It's going to look funny, but at least we'll see how big it is.
Let's go to our blueprints UI overlay and open up overlay and we can put our offensive spell tree in
there.
So I'm going to search my overlay palette for offensive.
And I'll drag one in.
Here it is.
Now we can see sort of what it looks like.
And if I go to my dungeon and press play.
Here's the size of it.
So it looks like our size isn't too bad.
So that gives us an idea.
But of course, if we go back to our offensive spell tree, this doesn't look exactly what it looks
like here in the overlay, does it?
That's because my size box root is overwriting a size, but up at the top right, we have to change
this from filled screen to desired and now we can really see the actual size.
So those width and height override default values for box width and box height are actually this size,
these dimensions here.
Okay, so that's what it looks like.
We'll remove that from overlay soon, but it's actually kind of handy to just be able to press play
and see what it looks like there for now.
But definitely this is destined for deletion.
So we see what it looks like with a spell glow button here on our first root box column one, I'm going
to select this spell glow button, copy it and click on Root Box column one and control V to paste.
Now our next spell glow button is just plopped on to the right of it.
Let's copy one of our buttons.
Click on Root Box column one and control V again.
Okay, so we have three next to each other.
Not exactly what we want.
We want them vertically.
Right?
If we take our root box column one and change it to vertical, now we get something more along the lines
of what we want.
So it's the opposite of what the default root box behavior looks like.
By default, the root box lines things up left to right until they take up too much space and then they
take up the next area, Right?
So if our root box root is set to vertical, then each individual root box will wrap.
That means we really don't even need three wrap boxes.
We could just wrap a whole bunch of things, right?
But I'm going to keep these columns organized in wrap boxes of their own.
Now I'm going to take these three buttons, Ctrl C to copy them and select Wrap Box column two and control
V to paste.
Now wrap box Column two needs to be set to vertical as well.
And there we have three.
I'm going to copy these again and paste them into wrap box column three and change that to vertical.
And now we have three root box columns and we have a bunch of spell glow buttons in them.
Now in between each pair of buttons, I would like a line.
This will be an image.
So I'm going to search for image and drag it between the first and second spell glow buttons here.
And I'm going to take this image and change its texture.
I'm going to search for line and we have a texture called line.
Here's what it looks like.
I'm going to take this image and I think I'd like it to be a little bit shorter.
So I'm going to set its Y value to a shorter value.
Quite a bit shorter, actually.
About 15.
Now I can take this image and copy it.
If I select the glow button beneath it and control V, I'll paste it underneath it.
So I'll go ahead and select this glow button, Ctrl V, select this glow button, Ctrl V and do the
same thing here and here.
Now we have lines underneath each of our icons.
Now another thing is they're a bit close together horizontally, so I'd like some spacers in between
each of our three wrap box columns.
I'm going to go ahead and get me a spacer and drag it in between the two wrap box columns, the left
and right.
And our spacer actually, if we select it, we see it's down here.
That's because our wrap box doesn't consider it vertically tall enough to go on to the next column.
So what we have to do is increase its vertical size to push it off to the next column.
And then if we increase its horizontal size, we see that we're spacing apart these rows.
So I'm going to give it an X of 50.
I think that's about a pretty good size and a Y.
It can just be however long I want it.
But if it's longer than the height of our size box, you'll see that that changes the behavior here
because we have our wrap box route set to center horizontally and vertically.
So I don't want my spacer to get higher than my size box height.
So as long as it's big enough to fill the space, I'm fine with it.
I'm going to set it to maybe 100 and I'm going to bring another spacer in between the other two columns
and give it the same size.
So I'm going to take my first spacer copy that size, take my second spacer and paste that size, and
now we have two spacers and if we don't select it, we don't see it.
But if we click on it, we can see what it looks like there.
Okay, so that wasn't too painful.
We now have an offensive spell tree and it's really just three wrap boxes, and in each wrap box we
have three buttons and two images separating our buttons.
Now we can compile and if we go back to our overlay, we see what it looks like in the overlay.
And that's a pretty decent size.
We can take a look if we press play in the dungeon, what it looks like here.
And that's basically what we were looking for.
So that's going to work for our spell tree, I think.
And of course it's not functional, but we'll get to that part.
For now, the most important thing is just having something thrown together.
Our next step is for our passive spell tree, which is going to be quite a great deal less complicated.
And we'll do that next.
Great job and I'll see you soon.