Welcome back.
So now that we have our button.
A nice general button, we can use this.
Instead of recreating all of this every time we need a little button.
So our attribute menu now uses it for the close button, but we can also use it in our other widgets
that use buttons as well, like this one that's in our text value button row.
We see that we have an overlay with the border, the button and the plus there.
We can actually replace that with our widget now.
So I'm going to go ahead and just delete the whole overlay and simply bring in a new overlay that just
deletes everything in the overlay.
And then I can search for button and choose my button and bring it on in.
Now I do want to set vertical alignment to center while I'm at it.
I might as well set horizontal alignment to center as well, but we had a plus sign here, not an X,
right?
So I want to be able to set those properties on it.
Now, an easy way is just making those properties editable by going to our button into the graph and
into our button properties and just exposing all of these with the eye icon.
I'm going to go ahead and just click the eye icon for all of them and make them all exposed.
So we can edit them.
So now that our button properties are all exposed, I can compile and go back into my text value button
row and I always save all before starting to tamper with these things.
Sometimes you can get crashes and with button selected I'm going to search for my button properties.
Here they are.
We can set them all from here so I can change button text to plus and I can up my font size if I want
to.
Let's try 22.
22 is good.
We have to be careful here because if I go too high, say 35, you'll see that we're running out of
room and it's no longer centered properly.
So I'm going to keep it at 22.
I think that looks good.
I'm going to compile and save.
And if I look back at my attribute menu, there they are, my nice pretty plus buttons.
They look great.
Okay, awesome.
So now we just need a button that we can use to show the attribute menu, and I'd like that on my overlay
here.
I'd like a button right there, but I'd like it to say attributes, not just plus or x, and that means
I need a wider button.
Now, if we look in our UI, in the assets folder, assets UI, there's a wide button red folder and
this is what it looks like.
And there are grayed outs, highlighted, pressed and an additional option for pressed options.
So we have options for that.
So I'd like a wide button version of my button.
So I'm going to browse to the folder that it's in and make a new button based on button.
And this one will be a wide button.
So I'm going to go to User Interface Widget Blueprint and I'm going to search for button WP button select
that and name this WP underscore wide button.
So I have a wide button now and this one I can change the properties for and I'm going to change quite
a few.
So let's go to the graph and go to button properties and I'm going to set my box height from 40 to about
60 and my box width to about 200.
Looking in the designer.
I see that it's quite different now and I'm going to want to change these images.
For one, I don't want the border.
Why?
Because the wide button textures that I have already have the border on them.
So I can take my border brush.
I can clear it by setting it to clear and I can take the tint and I can drag the alpha down to zero.
Click.
Okay.
And now I see in the designer that the border is gone.
And now I can start changing these brushes for normal brush.
I'm going to search for wide button and copy the text wide button.
I'm going to choose wide button and look in the designer and there's the wide button.
As we can see, it's more appropriate for a wide button.
It doesn't look stretched.
It might be stretched in the X direction slightly, but not really too much.
We can just set that height to a higher value, say 65, 70, something like that.
Okay, so that's the normal brush.
I need to change the highlighted brush to wide button highlighted.
I need to change the pressed brush to wide button pressed.
Actually I like pressed to.
It's a little bit less dark and for disabled I'm going to set it to wide button grayed out and now our
button looks more appropriate.
Now I also like to change the font a little bit and the text.
I'm going to set the button text to something more than X, I'm just going to set it to button.
And for the Font family, I'd like to set this not to Roboto, but I'm going to search for Pirata.
I like Pirata one regular.
I'm going to set that to Pirata one.
Let's see what that looks like.
Not too bad.
And I think the font size can go up.
I'm going to go from 16 to about maybe 22.
That looks good.
And we can give this some letter spacing.
I'm going to select letter spacing.
By the way, if any of these look grayed out, make sure you go back to WP button and compile and then
you can come back and set these default values.
I'm going to give a letter spacing of 200.
I think that looks pretty good.
And this is wide enough to accommodate for a decent amount of characters.
So now that we have a wide button, we can add a wide button to our overlay, and I'd like to do that.
So again, I'm going to save all.
And I'm going to add a wide button to my overlay by searching for wide button and dragging one in.
And there we have one and we can just play test.
I can press play.
We're getting our widget drawn to the screen and if I highlight it, I see that highlighted version.
If I click, I see the pressed version.
It's looking great.
If I disabled it, we'd see the darker version, the disabled version.
Excellent.
Now it's just called Wide Button.
I'd like to rename this to attribute menu button because that's what this will be.
The attribute menu button.
Let's compile that.
And we have the option to change its text here in the details panel because its text is exposed.
So here in button properties, let's find that text.
Did I?
I might not have exposed the text.
Let's go to WP button.
It is.
It's called button text.
Maybe I'm just not seeing it.
There it is.
Button text.
I don't know why I didn't see it.
I'm going to change this to say attributes, not attribute but attributes.
And now we have a button.
So if we go back and press play, we see attributes and we expect to be able to click that and show
the attribute menu.
That is the ultimate goal.
So the last couple videos, we kind of spent a lot of time just making a button widget and making it
nice and versatile so that we could use it and subclass it.
We've seen that it's quite easy now to just change out these brushes.
We can change the width and height and now we have a really nice button widget that we can use.
Now the only thing to do is to show our attribute menu widget when we click the attributes button.
So that means of course we're going to have to take this button.
Check is variable that way.
In the graph we can get that attribute menu button and do things with it.
And if you wanted to just see what it looks like disabled, we could do that.
We can do it in event construct.
For example, we could take attribute menu button.
We can get the button widget.
And we can call set is enabled.
Passing in false like so.
We can save all and press play.
And now we see what it looks like.
Disabled a little bit darker.
Pretty cool.
Okay, so that's in the overlay.
We don't really need to do that now.
I think this is a good place to wrap it up.
So things are looking good.
And the following videos, we're going to make this button functional so we can show the attribute menu
to the screen.
We'll do that next.
Great job and I'll see you soon.