Okay, so now that we have three different types of widgets for slots, we're going to want one overall
widget to show several of these.
So we're going to start in our load menu folder.
We're going to create a user interface based on Widget Blueprint.
And I'm going to choose User Widget and select it and call this Wbhp load menu and Load menu.
I'd like to have a canvas panel.
That's going to be the first thing.
And then I'd like three of these widgets, but I'm not going to just bring in a load slot, take in
or a load slot, enter name or load slot vacant because I'd like them to be switchable.
I'd like it to switch between those three based on the context.
And there's a widget for that.
It's called a widget switcher.
If I bring in a widget switcher onto the canvas panel, then my widget switcher looks like this.
And the widget switcher can have different widgets that it can switch between.
So we'll get to that.
But first I want to anchor it to the center of the screen.
I'd like to set its alignment to 0.5 for the X, and set its position x to zero and position Y to zero.
Actually want my alignment 0.5 in the Y, so zero will make it centered in the Y as well.
So this is perfectly centered, but I'll go ahead and move this one to the left.
And we'll have three of them.
One in the middle, one to the left, one to the right.
So this can go to -500.
Actually now for the widget switcher we have this concept of an active widget index.
And then we can add widgets to the widget switcher depending on the index.
So how do we get widgets into the widget switcher?
Well, if we search for WP load screen or just load, we can bring one in.
Let's get load slot vacant and bring it on to the widget switcher.
So you can see the widget switcher can contain widgets inside of it.
So we can put in a slot vacant.
We can put in a slot enter name.
Right onto the widget switcher and a load slot taken.
And as you can see, we have three widgets in here.
And if I select one it changes what we see right here.
And the widget switcher is going to show one of those, depending on the active widget index.
If I change it to one, it goes to the second one.
If I change it to two, it goes to the third, and so on.
So there's our first widget switcher and I'm going to rename this to switcher underscore zero.
And we'll have three of them.
So I'm going to take switcher zero control C control V only this second switcher needs to go on the
canvas panel not inside of switcher zero.
This is going to be switcher one.
It's going to be anchored to the center.
We'll have its alignment X and Y both set to 0.5.
We'll have its position X set to zero, and we'll have its position y set to zero as well.
Now its size is all out of whack.
So we're going to copy the size from our first widget switcher, which by the way doesn't really have
round numbers here.
We're going to set this to the size that we made our widget 256 for the X 300 for the Y.
And we'll use that for our second widget switcher size x 256 300 for Y.
So there's our second.
Let's control C the first one.
Select the canvas panel this time.
And control V will make this switcher two and anchor it to the center.
Set its position Y to zero and position X to 500 as that first one is -500.
And there we go.
Now there's three things we need, but we want the ability to play the game.
Once we've selected a slot that's valid and we want to be able to exit or return back to the main menu.
So a quit.
And in addition to quitting, I'd like the opportunity to clear a slot to delete the data that was in
one slot.
So really I'm going to have three wide buttons.
So I'm going to bring in one, two and three.
Now the first one, I'm going to increase its size a bit.
I'm going to change its text to say play.
And I'll go ahead and make its size around number 160 for X and 7075 now 65 for Y.
And I'll anchor it to the bottom center and bring its position y down.
We'll actually align it to 0.5 for the X.
And I'll bring it in a bit now because I just did all those changes.
I'm just going to copy this button.
So I'm going to take this first I'll rename it to button underscore Play control C select the canvas
panel control V twice and I'll take the first one.
And I know it's anchored correctly.
I'm going to set its y though position y -139.
We'll put it there, set its position x to zero, and then use the same position y for the third one.
Select the first one to see its position X is -277.
I'm going to make it -270.
And this one will be positive 270.
Now I just need to change their text.
So this one is going to be delete.
And this one is going to say quit.
So we have play delete and quit.
So I plan on being able to select one of these that has a valid slot.
Once we're able to play that slot, play will be activated.
It won't be disabled, but we'll also be able to delete a taken slot as well.
And quit should always be active.
In fact, we could even program quit right now.
We can go to event construct.
We can take that button, which, by the way, these three all need to be variables.
And we can take button quit, which we never actually renamed.
This one is button delete.
This one is button quit.
And we'll take button quit.
We'll get its button.
Assign onclicked.
And we want to return to the main menu.
We're just going to say open level.
And we can even use an object reference.
We can promote this to a variable, and we can set this level if we compile to a default value of.
Main menu.
So at least we have a working quit button.
Now, I'd like to just add this to the viewport in the level blueprint.
Just because I don't really have a designated actor to handle these things.
And for this load menu, using the level blueprint is just fine.
I'm going to create a widget.
It's going to be wbbp load.
Menu.
I'm going to delete event tech.
We're going to add this to the viewport.
And we'll get the player controller.
We're going to set input mode UI only and focus on this widget.
And then we'll show the mouse cursor with set show mouse cursor and we'll set it to true.
And with that we can press play and there's our widget and we can press quit.
And it takes us back and we press quit.
Here.
We exit the game.
So now we have a way to maneuver through our levels.
And we have these three widgets now.
Hovering is making this go a little bit out of whack.
And that's because we didn't set the sizes for on hovered.
And it's kind of making that button smaller.
If I go up to here it's fine.
So we'll fix that.
And I also want to bring these side widgets in to the middle just a bit.
So a couple of small tweaks.
We'll go to load slot vacant.
And the size is 120 for x and y for the normal.
Let's go to Harvard.
And set the image size there.
We'll go to pressed and do the same thing.
Image size one 2120.
Disabled.
Same thing.
Image size one 2120.
That's going to fix that.
Press looks good.
Harvard looks good.
We can't see disabled.
Okay, now we can bring these side widgets in just a bit.
So I'm going to take this one.
And.
I'm actually going to select switcher zero and we'll bring it in a bit.
Let's try -350, which means we'll put this one switcher two at 350.
So that's what it looks like.
Perfect.
And of course, we can always go back to our material if we want to tweak that as well.
I think it might be maybe better.
A different color, or the game aura seems to revolve around the color purple, purples, and blues.
So a purple might be good.
And with that we have a load menu.
Now we just need to make it functional.
I might actually desaturate this a bit.
Okay.
I think I've tweaked with it enough.
And with that we have a load menu.
Okay, so the last thing is to make this functional and to actually be able to load in saved data.
And if we press play, then we need to know which loaded slot we have selected so we can travel to the
correct map and we can load in the stats once we get to that map.
So we have a few things to do to make this functional, and we'll continue in the next video.
I'll see you soon.