Welcome back.
We have three widgets that we're going to use in our attribute menu.
Now, we need to actually create that widget that we'll use for the menu, and we'll put that right
here in the attribute menu folder.
And this one will be a user interface user widget blueprint based on or a user widget.
We'll select that.
We'll call it WP Attribute Menu.
So let's open that.
And for this we're basically going to use those three widgets we just created.
We just need to make sure to set this up properly.
And like all of our other widgets, we're going to start with a size box.
So we'll call this the size box root.
And I'm just going to hardcode some size values in this.
We'll set this from fill screen to desired, and the size that I choose will be 805 by 960.
And I'll just go ahead and come back in here and change it if I need to.
But I'm thinking this will be just fine.
And we definitely want an overlay that's going to be the next thing.
So I'm going to drag an overlay in.
This will be the overlay underscore route as well.
And from here we can start stacking things.
Now, first I want a border.
So that's going to be an image that I use for the border.
I'm going to drag that onto the overlay.
I'm going to rename this to image underscore background.
So we'll have an image background that will be set to fill horizontally and vertically.
And I'm going to set the image.
If I search there's a border underscore large.
That's what this image is and it looks pretty good.
Now we can draw this as a border.
And if we set draw as to border now we don't see anything.
We have to bring our margins up in order to see it.
Right.
So if we start bringing these margins up, then we'll start seeing what the border looks like.
And I'm going to hardcode these to 0.5 for all the margins.
And with 0.5, that's going to make them look appropriate.
But borders are cool because they adjust as their container adjusts.
They're like water.
Okay.
So we have the background.
So far, so good.
I'd like to have a title at the top that says attributes, and I'd like to have my other widgets, such
as My value Rose and my value rose with the buttons.
I'd like those lined from top to bottom.
And a really nice way to achieve this kind of thing is with a wrap box.
So let's search for a wrap box.
A rat box is nice because if we put something that's really wide and then we drag in another thing that's
really wide, if those two things are too wide to be kept on the same row, then they're pushed on to
new rows.
We'll see how this works.
Let's drag the rat box right here onto the overlay.
It can go just under the image background and the rat box itself.
We're going to drag things onto it.
For example, I want some text here at the top, right?
So I'm going to type text.
Drag it on to the rat box and there it is.
And now I can make the text larger.
So I'm going to take my text.
I'm going to put some text on it.
I'm going to say all caps attributes.
I'm going to change my font all the way down to Pirata one and I'm going to change the font size to
36.
I'd like it bigger.
I'm going to change my letter spacing.
Let's put it to about 400.
I'll go ahead and give it an outline size of one.
Okay, so we have some text.
We really want this in the middle and probably a little bit farther down.
So let's go about making that happen.
For one, I'm going to make that wrap box, fill the entire area so vertical and horizontal can both
be set to fill.
I'm going to take my text attributes and set it to fill empty space that's going to make sure that it
fills the whole row as much as it can.
And then if I set a horizontal alignment to center, then it's going to be centered and my wrap box
itself could have some padding so that nothing inside of it is too close to the borders and I can go
ahead and set a value of 25 for the padding that's going to set it for all four left, right, top and
bottom.
That's going to look pretty good there.
And now, thanks to the wrap box, I can have my rows start to stack like this.
For example, I can drag a new text just under my text here.
Now, of course, it's on the same line, right.
But I'd like it on the next line.
So there's a couple things we can do.
For one, we see this fill span when less than now, this is going to make this text block behave as
if it's wider, if it's wider than this width here, which is about 805.
If I select the size box route, the width is 805.
We can take this text block, We can increase this value to more than 805, and all of a sudden it's
now taking up its own line.
So that's a nice trick we can do.
I'm going to set it to 1000 just so it's a nice value and I can set horizontal alignment to center and
it'll be right there in the middle.
Looks great.
I'm going to give it the same font Pirata won and I'd like its font size to be a little smaller.
About 20.
I'll give it an outline size of one and a letter spacing of a lot more like 800.
That way it's nice and separated and this is going to be just a subtitle that says Primary attributes.
We're going to have our primary attributes right here first thing.
Now we know about spacers, right?
If I want more space between these two, I can just place a spacer between them.
Really nice.
Looks like I have caps on there.
I'm going to place a spacer between them and the spacer just needs to be wide enough so that it's taking
up its own line.
Here on the wrap box.
The wrap box will put it on its own new line as long as it's wide enough.
So if I take the size X notice, I'm dragging it up As soon as it gets too big, boom, it's right there
on the next line.
So I'm going to put it up to about 800.
Looks like that's taking up more than it needs and it doesn't really matter, but I'm going to put it
just below so it looks good right there.
750 is fine.
And then my size y allows me to increase the y size.
And look at that.
We have more spacing, we have some spacing between and I can choose a nice round number, say 20.
Okay, that's looking good.
I'd like another spacer with the same size just beneath primary attributes.
So I'm going to copy this one with Control C select Primary attributes control V and I now have a spacer
beneath it.
Perfect.
And now I can have one of those text value button rows.
So text value button row is going to be for primary attributes because remember the primary ones, I
want to be able to adjust, I want to be able to increase.
So we'll put some of those rows.
But first I'm going to have one that has attribute points.
It's going to be one of the text value rows without a button that will show us how many attribute points
we have.
So for that, I'm going to put first a text value row and then a series of text value button rows.
So I'm going to search the palette for text value and here's text value row.
We'll put one of those first and we see that it's a little bit large and that's something that we can
adjust.
Remember, the text value row has parameters, box width and box height, and those can be adjusted.
Now box width is set to 800 here in our attribute menu, it looks a little bit too large, so if I want
I can make box width and box height visible here.
I can compile that and here an attribute menu.
With this widget selected, we have our properties, we put them in.
We did not put them in their own category.
So I'm going to put them in a category of row properties.
We'll do that for box width and box height.
Row properties compile.
Back here in the attribute menu, we can search for that row properties category.
Here it is way down at the bottom and I can go ahead and just make this a bit smaller until I get a
good value.
It looks like 750 is good.
Okay, so it says critical hit resistance, but we're going to want to be able to change that value.
Of course, we're going to want this to say attribute points so we can see how many attribute points
we have.
And then I'm going to want a spacer underneath it.
So what I did was selected a spacer Ctrl C selected this widget, Ctrl V, and it put the spacer just
beneath it.
Really nice.
Now really, this is not going to be one of our primary attributes.
So realistically it might be better to be above this where it says primary attributes.
We could move it up so we can make this go just above primary attributes right here.
We can drag it up so it's right there.
We can put another spacer on beneath it so we can copy this spacer Ctrl C, select this widget, Ctrl
V, there's a spacer there.
Now we have primary attributes spacer, and then right here we can put another row, but this time with
the buttons.
So we're going to drag that between these two spacers right there and it looks like 750 is the perfect
size that I'm probably going to want our default value to be.
So I'm going to go to text value row, take that box width and set its default value to 750.
That way, as we drag new ones in, they'll come in at 750 there.
Perfect.
And we're going to want four of these, one for each of the primary attributes.
So I'm going to copy and paste.
I'm going to take this one, click on the spacer Ctrl V, and I'm going to take the spacer Ctrl C,
click on this widget, Ctrl V, I'm going to take both of them and then click on the spacer Ctrl V,
and that'll copy and paste both of them.
Now it looks like I got two spacers, so I'm going to delete one and we need one more pair.
With spacer and a widget.
There we go.
And we have four.
Okay, so that's great.
Now, if we wanted these to be more padded a little bit farther in, we could wrap these all in their
own box and give that box some padding.
We could also give them individually each their own padding.
That's an approach I don't like as much, but it's possible to do it that way.
Either way, those are things we could do.
And then of course, if the overall wrap box itself should be smaller, we can set the padding overall
to say 40 like so.
Keep in mind though, we're using size boxes and size boxes mean we want to set the actual size to accommodate
for this.
For example, we can go to our box width here and drag it down a bit.
Looks like 720 is now a good value with this padding.
So we can go back to text value row and set the default width to 720.
Compile and it looks better.
So tweaking is the name of the game here.
Okay, so we have our primary attributes and the secondary ones will go beneath it.
But I'd like the secondary attributes to all be within their own scroll box.
A scroll box has a scroll bar and the ability to scroll through things.
So how do we do that?
It's going to be in the chat box just beneath all these other things.
But we want to control the size of the scroll box.
Otherwise it'll just kind of try to run off the screen.
So first I'm going to have a size box.
I'm going to bring that in right here.
And the size box itself.
I'm going to set the size for as soon as I make it bigger than nil, it'll start to take up its own
line and the size box I'm going to rename to size box underscore scroll.
So we know that this is the size box for our scroll box.
I'm going to check width and height override and as soon as I give it a bigger width, it's going to
take its own line.
I'm going to give it some height here and we can even give this a smaller width and make it center center
and fill empty space is going to make it centered like that.
And if we really want, we can put a spacer between what's above it and it so we can put a spacer right
here in between that gives us a little more room and we can adjust the size here.
Now this is going to be a scroll box, so we'll go ahead and drag one in.
So we'll search for scroll box and drag in a scroll box right on to size box scroll.
Now we have a scroll box here, which means we can start dragging widgets onto the scroll box and we'll
get them in a row.
And as they exceed the size of this box because it's in a size box that has a set size, we'll get a
scroll bar to the right.
So let's search for text value and get our text value row and drag it on to the scroll box.
And we'll see.
We get one there and we'll go ahead and drag in another one and another one and we're going to want
one for all of our secondary attributes.
I'm just going to quickly count how many I have by going to my attributes set.
I guess I can count them right here in get lifetime replicated props I have.
Looks like I have ten, so I'm going to go ahead and add ten to the scroll box.
So there's three.
There's four.
Five.
Six.
Seven.
Eight.
Nine.
And ten and notice there's a scroll bar now and it kept getting smaller.
The more of these that we placed here.
Now it looks like the font could be a little smaller.
The number is getting squished and the name slot is taking up too much space.
So there are a number of parameters I think that we should set for this widget.
So the text value rows that exist in the scroll box, these are going to need to have some properties
set on them.
So I think it would be a good idea to have a function to set the font and a function to set some of
these properties here, such as maybe the spacer dimensions, maybe the name slot here seems to be probably
taking up a little too much space, but perhaps just setting the size of the text here could do it.
So we'll make some adjustments in the videos to come.
For now, this is a good start.
And before we wrap up, I think I would like at least a background image behind everything here.
So right here at the very top, just inside the overlay, I'd like one more image for the background.
I'd like it to go just above the background.
And this is actually the border.
So I'm going to rename this from Image background to Image Border.
And behind it here, this one will be the image underscore background.
This one will fill the entire thing, although I'm going to want to have some padding on it because
if we scroll in the border cuts in a little bit.
So I'm going to want a little bit of padding.
Five's too much.
Let's try.
I think one is good.
So we'll have a little bit of padding there and we can give this its own color.
I'm actually going to choose that flowing material.
Well, I like that.
So flowing UI, BG and I can set its tint a little bit if I want that.
I think I'll set it a little darker like that.
And now we have a nice flowing background that looks really cool.
Okay, so good progress in this video.
Still some work to do, but we have the basic attribute menu sort of fleshed out and if critical hit
resistance is bugging you, you could go back to text value row and changing that just to say attribute
like so compile that.
And now we can see that without such crowding with our text, then things look a little more normal
and we wouldn't see named slot in the game.
We're going to see what this looks like in game very shortly.
Don't worry about that.
But things are looking really good.
Excellent job and we'll continue with this in the next video.
I'll see you soon.