Welcome back.
Now, I hope you'll forgive me, but I did a little bit of visual tweaking in the meantime between videos.
As you can see, things are a little bit darker.
And if you're interested in the parameters I changed.
I went to my my flowing UI.
BG Here are the settings for it.
Here is the exact color that I chose.
Here's my flowing scroll.
Here are the values and here is the color.
And I went into my flowing UI bg and change the texture, coordinate u and v tiling 2.2 on both texture
coordinate nodes here.
And that gave me this look.
But I'm sure you're going to adjust yours as you see fit.
So I'm going to go ahead and close down those.
And in this video, we're concerned with actually showing our spell menu instead of just putting it
right here into our overlay.
So first we're going to remove it from the overlay.
Let's go to.
Our overlay folder.
Into our overlay widget.
We're going to select this and remove that spell menu because we want a button that can open it for
us.
So just like we have an attributes button, we're going to have a spells button.
So I'm going to get another wide button.
And I'm just going to drag it in and I'm going to put it down here on the right side.
And I'd just like to keep it at the same elevation as my attributes button.
So I'm going to copy the Y position and paste it over here on my button.
And now on the button I'm going to search for properties and change the button text to spells.
So we have an attributes and spells and it should be all caps.
So it's consistent with our attributes button.
Now I can go ahead and make it a little less wide and a little bit moved over in the X.
Not too much about like that.
Okay, so we have a spells button.
I'm going to rename this to spell menu button and we can open it the same way we're opening attributes.
Let's check out how we're doing that.
An event construct we're binding to on clicked on the attribute menu's button widget.
We're going to do the same thing for our spells button widget, which we're going to check is variable
for.
Then we can take that spell menu button, bring it in and get its button widget.
So get button and from that we can bind an event to on clicked.
So I'm going to type on, clicked, assign on clicked and we can rename this event.
Now this one's called on clicked event.
It should really be called on attribute button clicked and this one can be on spell button clicked on
spell menu actually button clicked.
We'll hook these up.
And attribute menu button clicked is an event.
It's right here, just beneath.
Event construct.
We're going to make another custom event for the spell menu.
So we'll make a custom event and we'll call this spell menu button clicked.
And we can call this right here.
Spell menu button clicked.
Now we just need to define what happens.
So we'll put this right below attribute menu button clicked and we can kind of copy our own code here.
I'm going to move everything up a little and when spell menu button is clicked, first of all, we're
going to disable it just like we did here for the attribute menu.
So we're going to get spell menu button call, get button on it.
And set is enabled.
Calling.
The function set is enabled and will disable the button.
Now we're going to copy what we're doing up here.
Get player controller.
We're going to call create widget here and we're simply going to create the spell menu widget.
So spell menu.
Hooking up the player controller to that, we'll be creating that widget.
Now we can add it to the viewport.
And just like we did above, we can set its position in viewport.
I'll go ahead and reroute a node around.
And call set position in viewport.
Now we're running out of room, so I'm going to move these nodes down just a bit and move everything
up.
Now the position is going to be different.
Up here we set our position to 2525, but the position will be different here because it's on the right
side of the screen.
Now our spell menu has a size if we go back to UI.
Spell Menu.
Spell menu.
We have an overall size box and this has its own size.
Now, it's not marked as variable, but if we check is variable and compile, then here in WP overlay
we can get this widget and type size box.
Here's that size box root and from the size box root we can type in width and we can get the width override.
So if we're going to call set position in viewport, we're going to need to do a little bit of math.
Not a lot, just a bit.
Now if we type get viewport size.
Then this gives us a 2D vector which we can break.
And this is the size X and Y for our viewport.
So if we subtract this width override from x, then that would put our widget all the way over to the
right, but we can give it an extra padding of 25.
In fact, this could be a parameter.
But first I'm going to take that X and I'm going to subtract.
The value of width override from it right here.
And in fact, I'm going to take this reroute node and hook it up here so that this can be brought back.
Okay.
So I'm going to take X and subtract that width override.
Now we could add 25 to that width override, but for now, I'm just going to use this for the X.
I'm going to right click on the position and split the struct pin and plug X directly in.
And for the Y, we're going to do the same thing.
We're going to take our size box root.
And get height override.
We're going to take Y here and subtract height override and hook that into position y.
Now, just that we can check to see where that spell menu appears in the viewport.
So I'm going to click Save All, Save Selected press play and click the spells button and it's right
there.
If I click the attributes button, I can see that well, our menu is a bit too high right now.
I'm actually realizing that Y should really just be 25 actually, because it starts at the top.
Something I forgot.
If I press play and hit the spells button now I see that it's at the same height, so that one's easy.
25.
We didn't need to do that subtraction.
Now if I hit F11, we can see what it looks like here and let's see what our math is doing here.
I think I'd just like to print a string for the width override and make sure it's what I think it is.
It's 805.
And here in size box route.
I see that that is indeed 805.
Let's see what the viewport size X is.
A little over 1500.
Okay.
So I believe it's based on full screen.
Okay, so full screen, it's all the way over.
So that is correct.
But I'm going to want to add 25 to my width override that we're subtracting, so I'm going to go ahead
and add.
25 and that could be made a parameter.
But for now, I'm just going to put 25 there.
Compile and if it's full screen alt p to play shows me that it's right there.
And it looks pretty good.
Okay, so that's great.
But our x button doesn't work.
We can't remove it.
So that's one of the next things we'll handle.
I'm also going to make this 25 a parameter instead of hard coding it as we're using 25 up here as well.
So I'm going to take this position y and promote it to a variable and call this menu padding.
And we'll use this menu padding down here as well.
Instead of 25 and up here, I'm going to split this struct pin and use menu padding for both X and Y.
And now this is consistent and we can adjust it by changing a single parameter.
Okay, so we're creating the widget.
But if we look at what we did for our attribute menu, the attribute menu had an event dispatcher called
Attribute menu closed.
And on top of that, it has a close button that works.
Let's look at our attribute menu.
And go into the graph and take a look at what we're doing for close button.
Right here we have close button on clicked event remove from parent.
And in addition to that, in event destruct, we make a broadcast to attribute menu closed.
We're going to want to do that in spell menu.
So for spell menu, let's make sure that this close button is marked is variable.
We're going to call this close button.
And in the graph, we're going to use event construct and get our close button, get its button widget.
Drag off and type onclicked and assign an event for Onclicked.
Now, when the close button is clicked, we want to call remove from parent.
And we also want a new event.
Dispatcher So we're going to click Plus to add a new one.
And this will be spell menu closed.
And in event destruct.
We're going to broadcast that event.
Dispatcher We're going to call it.
So we can compile that and back in our overlay.
After setting the position in viewport, we're going to bind an event to the spell menu button closed.
So we're going to get that return value from Create widget.
We're going to type spell menu button closed and a sign.
And when the spell menu button closes, we're going to enable the button again.
So we'll get our spell menu button call, get button on it.
Set is enabled.
Passing in.
True.
So with that, we should have a working close button.
Let's save all.
I'm going to full screen it alt p to play.
And click my spells button.
Click the close button.
We can open.
We can close.
Excellent.
Okay, so this is looking nice.
The only thing is, with both of these menus open, I can click anywhere and I can still run around
and I think I'd like to disable that.
I don't want to be able to move around because if I'm clicking here in the menu, I'm not expecting
my character to just move around or perhaps even accidentally click on an enemy and, you know, engage
in battle.
When the menus are open, I don't want to be able to move.
So that's something I'd like to enforce.
I'm going to hit F11 to UN full screen.
So how do we make that happen?
Well, we do that by getting our player controller and setting the input mode.
Now, to make this simple, I'm going to have a Boolean for when our spell menu is open and for when
our attribute menu is open.
So two booleans.
That way we just know when they're open and when they're closed and we'll set them when we open and
close these menus.
So I'm going to click Add new variable.
It's going to be a Boolean and I'm going to have attribute menu.
Open.
I'm also going to add a new variable of type bool called spell menu open and compile and make sure these
both have default values of false and an attribute menu button clicked.
We're going to set attribute menu open to true.
And in spell menu button clicked.
We're going to set spell menu open to true.
Now, when we close these menus, we need to set these booleans to false.
We can do that in response to the attribute menu and spell menu closed events right here.
So attribute menu closed event can set attribute menu open to false.
And spell menu closed event can set spell menu open to false.
Okay, so we have booleans that are true or false based on whether or not these are open.
Cool.
So what does that have to do with UI and the input mode?
Well, when attribute menu button clicked is fired off, we want to set our input mode to UI only so
we can call get player controller.
And from the player controller we can call set input mode UI only.
This will prevent us from adding any input.
Now, keep in mind this depends on your game.
If you have some input that triggers input actions and those are linked to your UI, somehow you don't
want to use UI only.
You want to disable movement in some other way, such as at the character level.
But in my case I can use set input mode UI only.
Now I'm going to do this same thing when opening our spell menu as well.
So I'm going to paste these notes here for the spell menu.
Now the question is when do we set our input mode back?
Well, we do it when we close the menus, but only if both menus are closed.
In other words, right here, when attribute menu is closed, we're going to have a branch that checks
if the spell menu is open.
If it is, we don't need to set our input mode back.
But if it's not, well, now we know both menus are closed so we can get our player controller.
And we can set our input mode back.
And that's going to be back to game and UI.
So that goes to the false case here.
I'm not going to check hide cursor during capture because we want our cursor.
Okay.
So that's what we're going to do.
But we're going to do the same thing when the spell menu closes.
The only difference is we're checking.
Attribute menu open.
If it's false, then we do the same thing.
So the same pair of nodes here.
So let's test this out.
When we press play, we can run around with the attribute menu open.
We cannot run around.
When we close it, we can run around.
Now with the spell menu open, we cannot run around with both open.
We can not run around.
When we close one we still can't run around.
When we close two we can run around so we can only run around when both menus are closed.
And that is the behavior that I personally want.
If you want something else, you could code it a different way.
But that's exactly the behavior that I would like to see.
Okay, so that's looking pretty nice.
Now, we have quite a few nodes here that could be cleaned up.
Now, some of this stuff cannot be collapsed to a function and some of it can.
We can take all of these nodes here.
And what we're doing is we're basically creating the attribute menu and adding it to the viewport and
returning a reference to it.
So if we collapse this to a function, we can call it create attribute menu.
Now let's just really quickly make sure that things aren't broken after doing that.
And as we see, it still works.
In fact, let's just make sure that our attribute menu works.
So I'm going to level up.
Gain an attribute point and spend it.
And it still works.
So that's going to clean up that part of our overlay a good deal.
So I'm going to go ahead and move it over.
And when attribute menu is closed, all of these things that we're doing could be collapsed into a function.
Make sure they're all highlighted here.
And we can collapse them.
And this can be called attribute menu closed.
And now this looks a good deal better.
Let's do the same thing for the spell menu.
This one has even more nodes because it's on the right side.
We're going to collapse this to a function.
And we're going to call this Create spell menu.
And once again, I like to just test to make sure things still work.
And they do.
So that looks better on that side here.
And all of this stuff here could be collapsed as well.
We're going to collapse the function and this will be spell menu closed.
And set input mode to UI only.
Could be a function itself so that we have all clean nodes here.
I'm just going to collapse it real quick.
We're going to say input mode UI only.
And I'm going to duplicate that and call it here instead of having those two nodes.
This just looks a lot better.
And if I highlight these four and press Q, it's going to align them nicely.
Same with that and same with these.
They're all ready, straight.
And now we have something that looks a lot more manageable.
And we can even comment these.
This one will say attribute menu button clicked.
And this one will say spell menu button clicked.
And here an event construct.
We can have a comment here.
And I'm just going to say attribute menu.
And this one here will say spell menu.
Just so we can see that we're doing something related to those.
So these should be nice and organized here.
That looks a lot better.
Feel free to color code them as well and even make a sequence note here if you want to.
And then you can organize these vertically.
So this could go up.
To hear.
And then this one.
If you didn't know this, you could hold control and you'll get a hand icon.
You can click and move this wire over to here like so.
That can save you some clicking, especially when there are many wires connected to one node.
Okay, so that allows us to keep things even more organized.
And really, because this says attribute menu, we can get our attribute menu button clicked and put
it right there next to it as they're related.
Same with the spell button there.
That looks good.
Except, you know, things may change as we add more things, but that looks good for now.
Now, before we wrap up, while we're at it, I'd like to just comment the rest of these things while
I'm busy organizing.
So this will say set overlay widget controller.
This will be set widget controllers and this could even be collapsed to a function called set widget
controllers.
I think I'd like that.
So collapsed function set widget controllers.
With an S, It has to have an S.
It cannot be set.
Widget controller, of course.
Here for our message Widget Row delegates.
We have some things that are happening that should be in response to message.
Widget Row Delegate event.
This is going to be its own function as well.
And we'll call this handle message widget.
So that will look a lot better now.
I'm also going to delete these two nodes that we're not using right now.
This can have a little comment.
Set widget controllers with two L's.
This one will be handling message widgets.
Handle message widgets.
It's those messages that pop up when we pick up potions and whatnot.
And here on level changed.
We're doing a few things.
We're creating a level up message widget so this one can be collapsed to a function.
Called handle level up message, and this will get a comment with the same name.
Handle level up message.
There we go.
And we can handle our messages kind of in unison here.
So I can kind of just put these in sequence right there.
Not really in unison, but in sequence.
I think that's going to look a little bit more organized here.
And I can right click on then three and remove the execution pin.
All right.
So now overlay looks a lot more manageable.
So let's get everything up together so that we can see.
So even though it's a little bit more of a hefty blueprint, it doesn't look like more of a hefty blueprint.
Keeping them organized like this is really going to make it easier to maintain as things get even more
complicated.
Okay.
So that's going to wrap up this video.
Things are looking quite nice.
We're able to actually show.
Both attributes and spells menus.
Now we need to make our spells menu functional, and we'll do that next.
Excellent job.
I'll see you soon.