Welcome back.
Now, our job here is to make this attributes button functional.
We want to show something on the screen.
When we click it right, we want to show the attributes menu.
So let's go about making that happen.
First of all, with the attribute menu button selected, we should check is variable that should be
checked.
So in the graph we can access it.
Now I'm going to take event construct.
This is a lot like beginplay for widgets and I'd like to assign to the onClick event for this button
so I can drag attribute menu button out and it's button widget as this is a wide button which inherits
from button.
It's button widget is called button right here.
So here in the overlay, if we have our attribute menu button, we can drag off and type button and
we can get button.
This is the button contained within the attribute menu button widget.
Now these have events inherited from the button widget class for when things happen like the button
gets clicked.
If we drag off and type a sign, we have a sign on clicked, hovered, pressed, released on hovered.
I'm just interested in clicked.
So in event construct here for the overlay we're going to assign to on clicked.
Now I really don't want to put all my logic right here and just make a big string of logic.
So I'd like to make a custom event.
I'm going to say custom event, and this is going to be attribute menu button clicked.
And we're just going to call that event Attribute menu button clicked.
I'm just going to have an event for this and we can just keep it right up here next to our event construct.
That's fine.
And what happens when the attribute menu button is clicked?
We want to open the attribute menu and I'd also like to disable the attribute button.
That way.
We can't just spam it.
We can't even click it if the attribute menu is open.
So I'll do that.
First, I'll take attribute menu button.
We know how to disable it.
We get the button.
And with the button we use set is enabled.
And we pass in false.
So now if we click the button, then we'll disable the button.
I'm going to save all and just test that real quick.
Clicking the button disables the button.
Perfect.
Okay, so back to our overlay.
What else do we do when it's clicked?
Well, I'd like to create the attribute menu widget, so I'm going to use create widget.
And choose the attribute menu.
I'm going to search for attribute menu.
Choose WP Attribute Menu.
Now we need a player controller.
And for now, just to get this working, I'm going to call get player controller passing in an index
of zero.
This is a gameplay statics function.
We're just going to get the player controller for the locally controlled player.
That's fine for now.
And I'm going to add this to the viewport.
So when we click the button, we're going to create the widget and add it to the viewport.
Let's see what happens when we do that.
Let's save all.
Press play and click the button.
And there it is.
We've added it to the viewport.
Now it's filling up the viewport, isn't it?
It's just straight taking over the whole viewport.
But check it out.
Our other buttons are functional.
We can highlight and click them and our scroll box is functional.
We can scroll that and even our close button is functional in the sense that it can be highlighted and
clicked.
It doesn't actually close the menu or anything like that, but it's a step in the right direction right
now.
We don't want it filling the entire viewport.
So we've seen in the past how to fix that.
We have to go to our attribute menu and wrap the whole thing in an overlay.
Now we already have an overlay route.
I'm going to rename this from overlay route to overlay box for lack of a better name, and I'm going
to right click on the size box route and wrap with an overlay.
And this one can be the overlay route.
Compile that.
And now if we press play and open it, now we get the right size.
So the overlay helps us to maintain the correct size.
And now this is looking pretty nice, right?
We still have just a bunch of placeholder text and placeholder buttons and we can't close the menu,
but we can add this to the viewport and we can set the desired size in the viewport.
The viewport position starts at zero zero at the top.
Right.
So say we want some padding of oh 50 pixels or so.
We can do that if we want to.
We can go into our UI, into overlay sub widget and we can find our message.
How did we handle this for our message?
Well, here's our message event.
After we created the widget we called Set position in viewport.
Let's go back up here and we can get our widget and call set position in viewport.
I think I might have said set size, I meant position and we can set the position.
We can hard code 50 and 50, for example, compile that press play and it's in by 50 and down by 50.
And I'm noticing a little black line up here, which means our background could use a little bit more
padding.
So before we wrap up, let's go ahead and just fix that.
Let's take our image background.
Our padding is set to one.
Let's set it to oh, say three.
Maybe even five.
I think that's good.
And we can show that menu and that looks better.
Okay, so we're showing the attribute menu, but we can't close it.
I'm going to actually set that padding to 2525.
That looks pretty good.
And I'd kind of like to see that attributes button when the menu is open just so we can see that it's
grayed out.
Not a big deal, but I'm going to lower it down to about there.
Now we can see it grayed out and that looks better.
Okay, great.
Now we're opening the menu.
We just need to be able to close the menu, and we'll do that next.
I'll see you soon.