Welcome back.
We now need to make our text value row, which essentially is going to be a widget with text and one
of these framed values.
So let's make that.
We'll go ahead and go into the folder that contains this widget, which is UI attribute menu.
Let's make a new widget blueprint here based on Aura user widget, and I'm going to name this WP text
value Row.
So let's open that text value row.
And this is going to have a size box just like framed value does.
I'm a big fan of size boxes and they make things really easy for us to customize.
So we're going to have our size box, we're going to override width and height change from fill screen
to desired, and we're going to make our parameters for width and height for this.
So let's add a variable called box width, changing that to a float and box height, and that's a float
as well.
And this really could be a overall base widget that has a size box that always has one.
You could make a parent and derive all your widgets from that if you want to inherit this property.
But I'm just going to call this size box root and we'll go ahead and check is variable and do this again.
We'll take size box root and we'll call set width override and set height override.
We'll go ahead and hook these up and hook up our box width and our box height.
Now I'm going to compile and give these some default values and we'll probably adjust these, but I'm
going to choose about 450 for the width.
And I can select my height.
And choose about 60 for the height.
Let's see what that looks like.
Something like that.
Okay, so we have our size box.
I'm going to want to put things from left to right.
We're going to want text to the left and then our framed value widget and so on.
So I'm going to want a horizontal box.
That's how we can put things in here from left to right.
And our horizontal box can be just called horizontal box.
I think it's going to be the only horizontal box we have and we can start putting things in like text.
So I'm going to drag a text right into that box and this is going to be the text for our text value
row.
It's going to be the attribute name in the case that we use it for our attribute menu.
But we could use this for anything.
I think text is a fine name for it for now, and I'm going to set this to horizontal align left and
vertical align center so it's not up at the top and I'll give it a default value for the text.
I'm just going to see what it looks like with attribute and change the font to Pirata one.
I like Pirata.
It's a pretty vintage looking font.
I'm going to be using this, but you can look for any font you like and I'm going to set the size to
be a little higher, probably about 32, and I'd like to adjust the letter spacing.
Notice if I click and drag the letter spacing can change.
I like a value of about 176 or so and I can give it an outline size of one.
So we have a black outline around the letters and I think that's looking pretty good.
Now I do want a framed value widget in here right after the text, so if I search for framed value and
just drag it on in, we'll see that it gets stuck right there.
Immediately after the text, which is okay, but I'd kind of like it to be a little bit farther out
now.
I could align it to the right and choose fill.
If I choose, fill and align it to the right, well, that's going to put it all the way to the right,
which is better, I think.
But what if I want it a little bit farther in?
Well, there's a nice handy widget called a spacer that can take care of that.
If I put a spacer just after it right here, then I can change the spacer size.
If I increase that x value, then I can see that spacer size go up.
So right there we can change that.
I can put it at about 50 and that looks pretty good.
Now, the longest attribute name is intelligence.
I want to see what it looks like so like that.
Although the other attributes could have longer names such as critical hit resistance, that's a pretty
long one.
Let's see what that looks like.
That's actually pretty long, isn't it?
So the size box might actually need to be a little bit bigger than this.
I'm going to go ahead and just expand it so that we have a little bit of extra room there.
So if we want to use a spacer, we can.
But keep in mind, we're also going to be creating a row that has a button at the end of it.
So we could really just put something here that if we extend this into a child class, we'd like to
be able to put additional widgets.
So we have something for that.
It's called a named slot.
Now a named slot is something we drag into our widget.
There it is.
And if we inherit from this widget, then we can put more widgets on the named slot.
So what I'll do is I'll go ahead and I think I'll take this spacer and just kind of make it a little
smaller and get our overall size box.
It looks like it went back to 450 because of the default value.
As soon as we change something, we kicked off that event pre construct.
So we're going to want to set the box width.
I'm going to set it up to a higher value of say, 800.
Come back here and compile.
And now we have plenty of room.
Okay, So let's go ahead and adjust this a little bit until we're happy with it.
I think 40 for the spacer is good.
The named slot itself I think is kind of fine how it is.
And if we have a child widget based on this, we can add new widgets in the name slot.
We'll see how that works when we get to that.
But for now, I kind of want to just make some adjustments and make sure that things look good.
I kind of want this framed value to be a little bit differently sized.
I don't want it to just stretch to fit that area there.
So what I'm going to do is have it selected and choose to do horizontal and vertical alignment centered
here, because if we choose fill, it's going to stretch to fill the volume.
If we choose center, then it's going to have its original size properties, it's going to respect that.
And then I can of course adjust my spacer if I want it closer and if I really wanted it all the way
to the right, I could select the frame value and choose align right for horizontal and vertical can
just be centered and that way it'll be the correct size and it'll be a constant space away from the
named slot determined by my spacer.
So we'll do 40.
Like I said, I think that's looking good and this is going to do it I think for our text value Row
So this looks good.
In the next video we'll make the version of this that has a button right there at the end.
So we'll make use of that named slot.
So excellent job and I'll see you soon.