Welcome back.
So we're ready to start working on our attribute menu.
So in blueprints under UI, we have several folders here.
For one, we have overlay and the attribute menu is kind of related to the overlay.
We could put it in here, but I'd like it to be in its own folder.
So I'm going to make a new folder called Attribute Menu.
We'll put our attribute menu widgets in here.
Now, first we need our framed value, so I'm going to make a new widget blueprint.
So user interface widget Blueprint.
These are all going to be based on Ora user widget.
We'll select that and this will be WP underscore framed value and we can open that up.
And here we have an empty widget.
Now I'd like this to have a size box so we can control its size easily.
So first we'll have the size box and for the size box I'm going to drag this over and change this from
fill screen up here to desired.
And that way we can set the desired size for this and for the desired size.
I'm going to override width and height and let's set width to something like 80.
We'll adjust these of course, and for height something like 45 that gives us a rectangle like this.
We're definitely going to be tweaking almost everything here.
Now I'm going to rename this size box to size box, underscore root, and we'll go ahead and make width
and height variables that we can adjust here.
So let's go to graph and this will be for event pre construct.
We're going to set the size override values.
So we're going to have a couple of variables.
The first will be box width.
And this will be a float.
And then the second will be box height, also a float.
Now we do need to make sure our size box is set to is variable before we come back to the graph and
access it and our box width and height, we can put these in their own category.
So let's make a new category and we'll call this frame properties.
And I'll put both box width and box height into our frame properties and we can take our size box root
and drag it out and we can call set width override passing in box width and we can call set height override
as well.
So let's duplicate size box root use set height override and get our box height in there and we'll go
ahead and hook these up.
Now these are defaulted to zero.
So if I compile, we're back to zero here.
But we want those values we had for box width and height, namely box width can be 80.
Box height can be 45 and we'll change these as we need because now we have these properties and we're
going to collapse these both to a function, collapse to function, and we'll call this update frame
size.
Like so.
Okay, so we have our size box.
I'm going to want to put things on top of each other.
We're going to want a background image or color, a border and some text.
This will be pretty simple since those will be on top of each other.
We're going to need an overlay.
So let's get an overlay onto our size box.
Our overlay can be set horizontal and vertical alignment both to fill and for the overlay.
We're first going to want I'm going to want a background image, so I'm going to use an image.
Just drag it onto the overlay and set vertical and horizontal alignment to fill.
And for this we can either have a black background if we want to.
We can select the tint and go down to black.
That's one option.
Another is we can set an image and make it a parameter.
If you search for flowing, you'll see that we have some UI background materials design aid for UI such
as am I flowing UI BG.
This is some clouds that we have here and as you can see, the clouds are flowing and it looks pretty
good.
Although if we browse to this material instance, we'll see that we have some parameters we can change
if we want to change the speed x and Y, and that's the speed for some panning clouds that we're using
and we have cloud darkness as well.
If we want to change that to look cloudier.
And then of course, there's this color for the clouds themselves.
You can desaturate it all the way and if you desaturate it all the way and save, then you'll see here
in the UI the tint can be changed to whatever color you want.
So if you want it to be kind of blue, you can make it that way.
So there's a little bit of leeway there.
I'm going to put it back roughly to how it was.
I don't want too much cloud darkness, and if I really want, I can create some new materials with different
parameters.
But for this, I'm fine with how this looks here.
If you want red or some other color, you can do that.
Or you could just make this black.
You could put the tint all the way down to black.
It's really up to you.
I'd like it pretty dark, but it's still flowing and shifting, which is kind of cool.
And I'm going to rename some of these The overlay.
This can be overlay, underscore, root.
That's the root overlay.
And this will be image underscore background, which we should be able to set if we want to override
that background.
So I can check is variable.
We can get image background and we can call, set brush and promote this in brush to a variable things
we've been doing with our other widgets already.
We can call this background brush.
I'm going to go ahead and put these all in the same category of frame properties and background brush
can get a default value if we compile and we search for my flowing and choose that my flowing UI BG
But now it's not going to have that blue tint to it.
If I connect this and compile, we'll see that it's back to its default.
So something to be aware of.
If you want to hardcode the values you can or you can make this a variable.
But we could take this background brush and set its tint default value if we want to make it dark blue,
compile that and now we see it's back to the blue.
So there's different ways to do it.
But this is going to be a parameter that can be set on child blueprints of this if we want to do that.
So let's collapse this to a function and we'll call this update background brush.
Okay, We want a border.
So I'm going to have another image.
So let's get an image on here.
I'm going to put it onto the overlay, but just in front of the background, I'm going to fill horizontally
and vertically.
And for the image, I'm going to search for border and use border one.
And this one's actually a lower res.
I'm going to use border one PNG, that one's higher res.
And I'd like to draw this as a border.
So I'm going to select, draw as and change from image to border.
And for margin, I'm going to set these margins to a certain value.
I'm going to go up to about 0.5 for all of them.
So pasting in 0.5 for all of these and that gives me a border.
And a border is kind of nice because if we take our size box and we change these values, we see that
the border will sort of stretch to how we want it to look.
Now if you don't stretch it too much, we shouldn't see a whole lot of actual stretching.
But for the rough ballpark size of 80 for X and 45 for Y, a margin of 0.5 is going to work.
So we have this image.
I'm going to rename this to image Underscore border.
And this can also be set as a parameter.
But really, I'm not going to parameterize this for now.
I think that's something I'll come back to in the future.
I don't want to make this have too many features if I'm not going to use them.
So we know how to make variables and parameters using event pre construct.
We'll come back to that if we need to.
But I'm going to move on because we need some text for the number.
So I'm going to get a text in here and drag that in.
And for this text, I'm going to set the default text to a number, let's say 99, so we can see what
it looks like with a two digit number.
Now horizontal and vertical alignment can be both set to center.
The justification can be set to center and we can change the font of this.
And I'm going to choose Amarant and I'll lower the size down to about 17.
And I like to use outlines, so I'm going to put an outline size of one.
So it's hard to see, but there's a black outline around the numbers and now we see what it looks like
with some text on there and we have our numbers.
Now.
This text here should be a variable and that way we can come in here and if we wanted to, we could
make a function to set the text for this setting.
The text is definitely something we'll want to do, but we'll cross that bridge when we get there.
For now, I'm going to call this text block underscore value as this is that actual value of our framed
value.
And now we have this widget we can use in any number of settings.
And because we made the background a parameter, we can change that.
I really don't see us needing to change the frame if we don't want a frame on there.
Well we could I suppose, make that a parameter and change that.
But for now I think this is good.
We now have a framed value.
We're now ready to move on to the next element in our attribute menu, the text value row.
So great job and I'll see you in the next video.