Welcome back.
We're just about ready to start adding this to the viewport to try to see what it looks like.
But there's a couple of changes I'd like to make.
We're not done with this by any means, but I'd like to adjust a couple of things.
For one, our scroll bar has secondary attributes, so I'd like this to say secondary attributes just
beneath our primary attributes.
And this text primary attributes has just about the perfect font size and characteristics.
So I'm going to copy it and come down to just beneath our scroll box and paste it.
So I've collapsed the scroll box.
I'm going to select the scroll box, Ctrl V, and there's my primary attributes and actually looks like
it went into the scroll box and that's not what I want, so I need to drag this out of the scroll box
if I can.
Let's see.
I just dragged it right there above the scroll box that put it outside of it, which is what I wanted.
Now clicking on Fill Empty space lets me put it in the middle and I'm going to copy one of the spacers
and just paste it just beneath that text and then drag it above the text and I'll click on the text
and control V again to get that spacer there.
Now it looks like I'm running out of room, so I think my spacers need to be squeezed a little bit.
So I'm going to get this top one and bring its size down.
I think we can put it down to about five and I'm going to right click and copy its size and just select
each of these subsequent spacers and paste in that size.
That way the size will be a height of five for all of them and hopefully this will give us more room.
So we'll get that one.
We'll get this one here.
And this one here.
And then there's one under.
We'll go ahead and paste it there as well.
And now we have a little bit more room.
Now, this text should say secondary attributes, so I'm going to change its text.
That looks good.
And I just realized this should be above the scroll box, shouldn't it?
So I'm going to take the secondary attributes and drag it to just above the scroll box and drag one
of my spacers up there.
There we go.
So we have secondary attributes there.
And of course we could take this spacer between the primary and secondary and make it a little bigger.
I'll make it ten, maybe 15 and just below the secondary attributes.
This one can be 15 as well.
Now, in my plan I had progress bars for health and mana down there.
We can add that later.
But what's more important right now is to have a widget for closing the menu.
We need essentially an X button, right?
So we're going to add another widget to this.
I'd like to collapse the wrap box and put something here in the overlay so it's not in the wrap box.
I'd like it right down here at the bottom, right.
So for this I'm going to use another size box.
So dragging a size box on to the overlay route.
We'll get our size box way down there.
I'm going to collapse the wrap box so I can see my new size box and it's way up there at the top, right.
I'm going to set horizontal alignment to right and vertical alignment to bottom.
So it's down here at the bottom and I'd like to check width and height override so that I can create
a larger widget, something like this.
So I'm thinking maybe 40 by 40, 50 by 50 something along those lines.
And then I'll up the padding for the right and the bottom.
So I'm going to try a padding of 50 for the right, 50 for the bottom.
That's a little too much.
So I'm going to cut it down to 25 and 25, and that looks pretty good.
And now my size box can get its own overlay and then I can have things in it.
So let's get an overlay on to that size box.
Selecting this overlay, I can now put things inside of it, such as an image for a button border.
So I'm going to drag one in.
I'm going to call this image underscore close button border and I'm going to set it to fill for horizontal
and vertical alignment and I'm going to search for border and get my button border.
There it is.
It's going to be draw as image.
It looks good.
And on top of that, we're going to have a button.
So I'm going to search for button.
And drag that button onto the overlay.
It's going to go on top of the border.
We're going to set it to fill.
And for its normal image, I'm going to search for Button.
I'm going to copy the word button.
Choose button there.
And by the way, these are all tinted.
And if you don't want them tinted, you can select the tint and drag that value up to white like so.
And I'm going to choose draw as image.
So it's not drawn as a rounded box and I'm going to collapse normal open hovered search for button and
get my button highlighted.
I'm going to make sure that's not tinted at all.
Draw as image and collapse.
Next for pressed I'm going to search for button pressed.
Drag that value up for the tent, draw as image and collapse.
And finally, for disabled, I'm going to search for button grayed out.
This one already has a full on tint of white and already has draw as image.
Basically the properties I wanted all the others to have.
And now we have a button and I just need an x here so I'm going to drag some text onto it.
So here's text.
I'm going to drag it onto the button and replace the text with an uppercase X like so.
And I'd like to have this justified in the center and we'll bring that font size down and we'll give
it an outline size of one.
And I think I'll leave it at Roboto.
That looks pretty good.
Font size can go down to probably 16 and I think that looks pretty good.
So now we have a button.
Now I'm going to rename this button to button underscore close and now we have a close button and it's
looking like it's at pretty much a good spot.
So now we just need to add this to the viewport.
So how are we going to do that?
Well, we're going to do it from our overlay widget and I'd like our overlay widget to have a button.
So let's go into that.
We'll go to Blueprints UI Overlay, and here's our overlay and I'd like a button here to open the attribute
menu.
Now at this point, we're doing a lot of similar things over and over when it comes to adding a button,
right, where adding an overlay with an image and that image has an optional border, it has the button
itself and it has the text.
So a button with all these qualities could really just be a widget itself.
So I'd kind of like a red button for a widget.
We can make a button for the overlay menu right here and in the assets we have a wide button.
So if we go into our assets folder into UI and two button red, that's the regular button we have,
but there's also a folder called Wide Button Red.
If we double click that, we see that we have a wider button.
So we could just create a parent button widget blueprint and we can set these as parameters that we
can change.
And I think that's something that I'd like to do.
So let's go ahead and create that widget.
I'm going to actually browse to my UI folder and I'm going to make a new folder in UI called Button
and we'll make a button base widget blueprint here.
So I'm going to create a user interface widget blueprint selecting or a user widget and this will be
WP underscore button.
This will be our base button class.
So we know that our attribute menu has this button down here, which is a button with a size, right?
We have a size box set to 40 by 40.
So for our WP button we're going to have a size box and I'd like it to have the same default 40 by 40.
So I'm going to select size box check width and height override change from fill screen to desired and
give these values 40 by 40.
And in fact these will be parameters that we can change.
So I'm going to go ahead and go into the graph tab.
We're going to add two variables, one called box width, which will be a float.
One called box height, which will also be a float, will compile and give these both default values
of 40.
And we'll go back to the designer, take our size box check is variable and back in the graph tab will
control drag it out and set width override.
Looks like it's called size box 31.
So really quick, let's go back and rename this to size box root.
And we'll take size box route and call set height override and we'll go ahead and hook this up.
I'm going to move these two nodes down and we'll plug in box width and box height, respectively.
Hook these up and we'll collapse to a function called update box size.
So there's our box.
Now for the button, we're going to want a border.
We're going to want a button widget and we're going to want text.
So let's go in to the pallet and search for image.
We'll drag an image in.
We'll select that image and rename it Image Border.
Right away I'll check is variable and we'll set a default value.
I'm going to search for button and choose button border like so and we're going to have a function to
set the brush.
So we'll go back to graph.
We'll take image border control, drag it out and call set brush and we'll take our brush.
Promote it to a variable call.
This border brush will compile.
Set the default value for border brush by choosing an image.
I'm going to choose button border.
We'll go ahead and hook this up, select it all, collapse the function and call this update border
brush.
Now we need a button.
Now For the button we're going to search for button and drag one in.
And we can't until we have an overlay, of course.
So something I forgot.
But that's okay.
We can right click on Image Border and choose Wrap width overlay.
Now our image border is wrapped with an overlay and we just have to make sure Image Border is now set
to fill horizontal and vertical alignment and we can rename the overlay to overlay route.
That's fine.
And now we can drag the button onto the overlay.
I'm going to select the button, choose fill horizontal and vertical check is variable and we have a
number of things to set for the button style.
So let's just go into the graph.
We'll take our button.
It's called button to 60, so let's rename it to just button.
And we'll take our button and we're going to call set style.
So let's use the function set style and for end style, let's drag it off and make button style.
So now we have brushes for normal, hovered, pressed disabled, and then of course, the padding and
even sounds for all of this.
And what I'd like to do is set the normal hovered, pressed and disabled brushes.
So I'm going to drag off of normal promote this to a variable and call this button normal brush and
we'll set its default values here.
So before doing that, let's go ahead and get these all into their own button properties category.
So I'm going to create a category here called Button Properties, and we'll select these and one by
one put them into button properties as well.
Box, height, box width.
Those all go into button properties.
Our border brush as well.
That'll go in there.
So now they're all in the same category.
So we have button normal brush I'm going to go ahead and drag off of hovered, promote a variable and
call this button hovered brush and I'll do the same for pressed and disabled.
So here's pressed promote to variable button pressed brush and disabled.
We'll drag this off.
Promote a variable and we'll call this button disabled brush and we can give these default values we
have to compile and we'll start with normal.
So button normal brush will go down to the brush and we'll choose the button texture.
We'll give it that for the default notice.
It's automatically set to draw as image with a white tint so we don't have to worry about that.
Next we have button hovered.
I'm going to set its category to button properties.
We're going to expand the brush and we just need to set the image.
I'm going to search for button and this is hovered, so we're going to choose button highlighted next
for button pressed.
We'll stick it in button properties for the category, we'll expand the brush, we'll search for button.
And this is pressed.
So we're going to choose button pressed like so next is disabled.
We'll stick this in button properties, expand the brush, search for button and choose button grayed
out, compile, save.
And now we're setting the brush style.
Now we haven't hooked anything up so it looks gray.
But now as soon as we hook it up and compile, look at the designer.
There it is.
It looks great.
And this can all be collapsed into a function as well.
So we'll right click Collapse two function and we're going to call this update button brush, or we
can call it brushes as there are multiple.
Okay.
So we have our button widget.
We do want some kind of text here.
Even if we want this set to nothing, we want to be able to set the text.
So I'm going to search for text and drag text onto it.
We'll give it a default value of, say, an uppercase X and we'll make sure it's centered.
We'll make sure its justification is center.
We'll all give it a decent looking font size like 16, an outline size of one, but these are all properties
of the appearance.
We have the font here so we can make this all parameter based.
So I'd like that to be the case.
I'd like the text to be a parameter and I'd like the font also to be a parameter so we can change it.
So we'll go into graph actually first we'll take our text and check is variable and now in the graph
we can see text block zero.
That's basically what it got renamed to, but we can name it text.
And here in graph we can control, drag out text and we can call the function set text, set, text.
We want to use the function call and we want to promote the text to a variable.
So promote that to a variable and we'll call this button text.
We'll give it the category of button properties.
We'll compile so we can give it a default value of uppercase X like so.
So now our text for the button is data driven, Now it's an X already, but we can take button text
and give it, say the plus sign.
And back here, if we take a look, we see it's a plus.
So it is working.
But I will set that back to an X uppercase X by default.
So that's the text.
But what if we want to change the font?
So let's duplicate the text.
I'm going to type in font and we see that we can set font if we choose the function, we see that it
takes a font info.
That's a structure we can drag off and make one make slate font info and if we want, we can have the
font family be a parameter, the font material, outline settings, typeface size, all of this stuff.
So we'll make a number of parameters here.
We can make the font family a parameter.
We can promote this to a variable.
By the way, it's a font family object reference.
We promote that to a variable.
We can call that font family and we'll just put these all in the same category button properties.
So we have font family.
If we compile, we can set this.
Now if we want this to be Roboto by default, we're going to have to click on the gear and show engine
content in order to see that Roboto font.
So we're going to go ahead and set it to that and then we can expand the dropdown and uncheck show engine
content.
So we got that set to Roboto for font material.
If we want this to have a material, we can make a parameter, but we don't have to.
It'll just be white.
So I'm going to omit that for outline settings though.
This is one I do like to make.
If I use make font outline settings, I usually just set the outline size to one, but I'm going to
promote that to a variable called outline size.
I'm going to compile and set that to a value of one, but we can override that and this will go into
button properties.
The size should definitely be a variable, so we'll promote that.
We'll call this font size.
Compile and I believe I set it to about 16, so I'll do that.
We'll go ahead and do letter spacing as well.
Promote to variable.
And I'm going to move these both to the category button properties.
And I'm not going to set the letter spacing, but it's a variable if we want it.
And I don't care about skew amount either, so I'm going to go ahead and collapse that.
And we now have a set font function.
Everything's looking pretty good and I think we can collapse these into functions.
I'll just lump them all into one function, right click, collapse two function, and we'll call this
update text.
So there we go.
We now have a button and we can subclass it and use it if we want to change out some of these properties.
That's going to be very useful.
In fact, we can replace the button we just used in our attribute menu right here in our size box.
We can delete this overlay that's going to delete all the children.
And for the size box, we can search for our button.
And we can drag that into the size box here.
And as we see now, WB button gives us exactly that type of button that we created.
So yeah, we now have a close button.
So now that we have a nice button, we can use this for any number of things.
We've added a button to the attribute menu.
And of course now this is our WB button class.
We're going to have to go about figuring out how to bind to its on clicked and on hovered events and
things like that.
But we also have this widget with parameters we can change if we want to add say a wide button that
says something like attributes that we can add to our overlay.
So we're going to extend our button class in the next video and do just that.
We're going to add a button to the overlay so we can open our overlay menu.
So excellent job and I'll see you in the next video.