Welcome back.
Now our main menu is looking pretty good and it takes us to the load menu.
Now here in the load menu we don't have a whole lot going on.
So we are going to want a widget to show we're going to want our load menu.
So why don't we go into our blueprints UI folder.
We already have a main menu.
Now we need a load menu folder.
So this will be called Load Menu.
And we'll have a widget to add to the viewport.
And for this load menu I'd like to have a widget that can switch between three modes.
I want to show something that indicates that we have a vacant slot.
I want to use the concept of slots and we can save multiple games to individual slots.
So we need some kind of widget that shows us we have a vacant slot.
And then if we're coming in and we wish to load one of our previously saved games, we're going to want
to see that as a taken slot.
So we're going to have vacant slots and taken slots, and then we'll need a third type of widget to
show when we're trying to create a new game.
So if it's vacant, we'll need something that says new game or something to that effect.
And if we click it, then we need to show the user the opportunity to enter in their name and play the
game.
So that would be a enter name slot we could call it.
So we'll need three different widgets.
I'm going to start off with the most simple the vacant slot.
I'm going to create a new widget blueprint for this.
And it's just going to be a user widget.
And we'll see why very shortly.
We're not going to use anything in our user widget for this.
I'm going to select that and call this WB p load slot underscore vacant.
So what is this load slot vacant going to have?
It's going to be quite simple.
I'm going to open it up and add a size box first and foremost so I can control its size.
And I'm going to take this size box.
Set this from fill screen to desired.
Select the size box, click Width and Height override and I'm going to override the size.
Now for the width I'm going to try 256.
For the height I'm going to try 300.
And we'll have this sort of.
Rectangular widget that looks like this.
And I'm going to call this size box size box underscore root.
And I don't plan on changing the size of this.
I'm going to leave it this way, and I'm going to take size box root and add an overlay on top, and
the overlay can go on to the size box root.
And we'll call this overlay underscore root.
So we have our root overlay.
And the overlay is going to have several things on it, including a background, a border.
These are things that I'd like them all to have these load slots.
So I'm going to add a couple of images here.
I'm going to take the first image, drop it on and call this image underscore background.
And I'm going to set horizontal and vertical alignment to fill and.
For the image in the brush.
I'm going to search for flowing and get my flowing UI.
BG.
We have several instances of this, so I'm going to pick one now.
We could change this at any point, but I'm going to select one for now.
And I'd like a border as well.
So I'm going to drag on another image and call this image underscore border.
And this can be fill fill for horizontal and vertical.
And I'm going to search for border and use border one.
Not border one but border one large.
And I'm going to choose to draw this as a border using a margin of 0.5.
And that gives me this border.
But notice the background is right behind it, so the background needs a bit of padding.
I'm going to give it a padding of one.
I think that's going to do the trick.
So now we have a background and a border.
Okay, so this is looking good.
I'm going to go to my border and we can play with our margin.
If I set it to 0.25, it'll be a little thicker.
And that might look a little bit better.
It just depends on what you're going for.
Just make sure that background has enough padding to accommodate for it.
I think it can look pretty good with this amount of padding.
Now I'm going to take this load slot vacant and I'd like to duplicate it twice.
So I'm going to have a load slot vacant.
I'm going to duplicate and have a load slot taken.
And I'm going to duplicate that and have a load slot enter name.
So I find that for this basic background and border, it's going to be easier to duplicate than to use
inheritance with name slots, as these are all going to be drastically different in their functionality.
Okay, so it looks like I still have or a main menu and main menu open as well as project settings.
I'm going to close those and just work on load slot vacant for now.
Now all I want in load slot vacant really is some text that says new game and some kind of icon we can
click to have a new game.
So I'm going to put a vertical box.
This is going to make it easy to have two things text and a button, one on top of the other.
So for this vertical box we'll have it set to fill both vertical and horizontal.
And then we'll put some text in here.
Now the text can be set to horizontal alignment, center and vertical alignment top and justification
to the center.
And the text is going to say new game.
And we're going to replace this hideous Roboto font with Pirata one.
We'll give it an outline size of one, and the vertical box itself could use some padding.
So I'm going to pad it.
We'll try let's say 12 or so.
And our text is looking pretty good.
We could probably give it some letter spacing here.
And beneath new game I'm going to have a button.
So I'm going to drag a button on in just a regular button.
And for this button I'm going to set horizontal and vertical alignment to center.
That way we don't stretch to fill or anything like that.
And for the button image, I'm going to take a look in my assets folder.
Content assets UI and open load screen.
Now we have this icon.
It's called plus icon clear BG I'm going to have that selected in the world outliner.
And I'm going to set this for pressed.
So that's what it's going to look like when pressed.
But with this still selected I'm going to set it for hovered.
I'm going to set it for normal.
And I'm also going to set it for disabled.
The only difference is we can change the tint.
So for normal I'm going to have the tint a little darker all the way down to about here.
And I'm going to make sure to draw this as image.
So it's not a rounded box.
And we can make this image size bigger.
I'm going to go up.
We'll try 120 by 120, but we could even go bigger than that if we wanted to.
But that looks pretty good.
So our normal is kind of a dark gray.
But Harvard is going to be white.
I'm going to bring it all the way up to white.
And for hovered, we can draw as an image as well.
And for pressed, I'm going to make this a sort of maybe a golden yellowish color.
So that way we can see something different when it's pressed.
And we're going to draw this as image.
And then disabled can be drawn.
Really dark.
Let's just make it almost black.
Like that.
And I think we could use a spacer right in between these two.
So I'm going to put that right in between.
Take that spacer and we're going to up its size in the Y.
That way we can get this thing down towards the bottom.
Okay and normal can be just a little lighter.
So there's our widget new game.
It's indicating that we can click plus to add a new slot and start playing the game.
So that's looking great.
And I'd like to just take my image background browse to it.
We have an me flowing UI BG that's what it's called.
I'm going to actually go to its parent material.
It's called M flowing UI.
BG I'm going to duplicate this material and call this M underscore load slot BG because I'd like to
change my background just a bit.
So I'm going to take M load slot BG I'm going to open it up and we can change things here.
I'd like the two noises to be different textures.
So I'm going to take this texture sample and search for noise.
And I'm going to use.
Noise blur.
Min.
We can go to that and see what it looks like.
Now it has three channels red, green and blue.
If we unselect red and green, that's what blue looks like.
Here's what the green looks like.
It's blurry.
Here's what the red looks like.
It's cloudy so we can try any of them.
We can try the blue.
The blue is a kind of cool effect here.
If we take the blue channel only and use that instead of RGB for it, then we'll have a different looking
texture and we could even use this same one noise blur min up here.
And use the blue for that.
That'll give us a sort of different look.
Or we could leave this previous one at what it was and have two different types of clouds.
Now the red was more of a cloudy cloud.
We can leave that as it was there, but notice it looks a little tiled.
So I'm going to take the coordinates and change them.
If I set that to 0.1 and 0.1 and this one down here to point one and point one.
Then the clouds look a bit different.
It looks a little funny, so I'm just going to use this noise blur min for both and just use the red
channel.
Okay, so applying that I can make a material instance out of this.
Called me load slot bg.
And I can take my load slot.
BG.
And I can change properties on it.
So for the color, I can make it more blue.
I can increase that cloud darkness if I like.
And I can go to my load slot vacant.
And set it.
And then change my load slot.
And of course we can change the material itself as well.
Point one might be too small.
We can go the other way.
And make it more cloudy.
So it's really up to us.
So once we have what we'd like.
Then we have our widget.
Now I'm going to take this new game.
And give it some padding on the top.
I'm going to try 12, 15, 20.
And I think that looks great.
I'm going to give its outline size more like two.
And I think I'm happy with that.
Okay, so we have our load slot vacant.
We're now ready to make the other two load slot taken and load slot enter name.
So we'll do those next.
So I'm just going to bring that spacer down a little like that.
We'll do 40.
And I'll see you soon.