Welcome back.
So we now need one of these text value rows, but we need one with a button.
So I'd like to derive a child widget blueprint from our text value row so we can reuse some of our work.
So I'm going to create a new user interface based on widget blueprint, but we're going to choose our
WP text value row.
There it is right there.
So we can select that and our new one can be WP text value button row.
And if we open this up, notice that we have a named slot.
All the other widgets are hidden because we don't get to just see those here.
We're inheriting them, but we can't change them, right?
So of course we're going to need a way to change the text value and the numerical value.
Those are going to need to be functions exposed to the child version, of course.
But we do have the ability to add more widgets to the named slot here.
So that's what we're going to do in this video.
And the first thing I'd like to add here is an overlay so we can have things on top of each other.
So I'm going to choose overlay.
I'm going to drag that onto the named slot here.
And the first thing with my overlay selected here is I'm going to put an image for my button and this
will be for basically a border behind the button.
So I'm going to get an image here.
Put it onto the overlay.
And for this image, I'm going to rename to Image Underscore border and open the brush.
And for the image I'm going to search for button.
And we have a button border here.
Here's what it looks like.
And I can choose to draw this at a specific size.
It's 32 by 32, but I can increase that.
If I set it to 40 by 40, it's bigger.
And if I take my image border and I set it to align center, then there it is right in the middle.
And we can obviously change this to whatever size we want and it's going to get bigger provided that
we don't go too big.
Right?
If I go too big, it's going to hit the bounds of the encompassing size box.
So we don't want to go too big.
50 by 50 or maybe 40 by 40 is okay.
It just really depends on what you want.
But this is our border and you could draw this as a border, but I'm going to draw it as an image.
And we're also going to want a button.
So I'm going to search for the button widget type and bring that in just below the image border.
And I'm going to take my button and set it to center horizontal and vertical.
And I don't like drawing it as this rounded button.
That's kind of default behavior.
But for the style, if we expand normal, we see that we can draw as a rounded box, but we could also
draw as an image too, and that will get rid of those rounded corners.
And we can see that it's a little smaller than the border because we're drawing the border at 40 by
40.
But if we take our button, we can choose the image size here.
I'd like it to be 40 by 40 as well.
And we need to choose a style for normal, hovered, pressed disabled.
And the assets in this project just happen to have some.
All we need to do is search for button and we can choose button.
That's this one.
And by the way, this doesn't include the border.
So if I take my border and close the eye icon, we can see that this button is just the red button.
So I'm going to unhide that and for hovered, I'm going to search for button.
And we have button highlighted and it's a little bit brighter.
By the way, you could browse to these and see what they look like.
Highlighted is a little brighter.
And I'm going to change this to draw as image as well as that's automatically rounded box as well for
pressed, I'm going to search for button and we have a button pressed.
It's a little bit darker.
I'm going to draw this as an image as well not a rounded box.
And for disabled I'm going to search for button and we have a grayed out.
This one is drawn as image by default.
The others are rounded box by default.
And so now we have all of those set.
We have some default values for them.
And yeah, we have a button.
It looks good.
And what we can do here is put a little bit of text, a single character.
I'd like a plus sign here so we know that this is for adding to our attributes value.
So I'm going to add text on top of the button.
So I'm going to put a text right here on the button and I'm going to change the text to just the plus.
I'm going to make it centered, horizontal and vertical.
I'm going to make it justified to the center.
And we can change the font.
We can change the outline.
I'm going to put outline size to one so it has a cross.
And if you want, you can go ahead and change the font to something like Amaranth.
Looks cool or Pirata looks pretty cool.
I'm actually thinking I might want to keep Roboto for the plus.
I think I might actually prefer that.
Surprisingly so.
Let's see if I can find it.
Control Z should bring it back.
There we go.
Roboto by default.
And now we have this.
This looks great.
Now we're going to probably end up making some adjustments when we put these all together in the attribute
menu.
But the good news is we have a good starting point here.
We have all the main things that we need.
We just need to put them together and see what types of adjustments we need to make.
Now, of course, we need functions to set the text and the numerical value and the button is going
to be functional.
So of course that needs to be taken care of as well.
We'll get to those things.
For now, we have widgets and we're going to put them together into a menu and we'll do that next.
So great job and I'll see you soon.