Welcome back everyone in this video we are going to be creating the layout for our start menu. So from our start menu, we want to be able to select a level and launch a game. So we're just going to be getting the layout for that into place. Before we do there is one little bit I forgot to do in our last video, which was our BP HUD. So I want to make sure we circle back to this before we do our start menu, select your health progress bar, and there were a few things I forgot to set on this. Firstly, let's come under our styles section right down here, click this little drop down menu.

I want to set a background image for this and not really a background image rather a background color. So I want the tint of this to be straight black. Okay, and you can set that to be RGB value of 02 to get straight black. Okay, then if you scroll down a little bit further there is an area called progress changes to be 1.0 for the time being, and you can see right now we've got this blue coloration in there. We want the bar type the bar fill type to be left to right like it currently is. You can see how that will fill up or rather deplete as we lose some health.

I'm going to change my fill color here though, from blue. I'm going to change it to be green. So I'm just going to fill in a hard value here are zero. G is going to be one, B is going to be zero. And that color green is going to represent our health so sorry, I missed that guys. With that make sure you Compile and Save that now you can close out your BP, your W BP HUD and now we are ready to create our start menu.

So First things first here in our content first project UI folder, right click, come under user interface Widget Blueprint. We will call this w BP underscore Start menu, and then double click on him to open him up. And we'll do like we did before where we get all of our widgets into place, and then we will set their details. So first thing I'm going to add down here to our hierarchy is going to be an image, left click and drag this on top of your canvas panel. And I'm simply going to click on it hit f2 and call this background underscore image. Next, I'm going to find a text widget.

And I'm going to drag and drop this onto the canvas panel. Hit f2 on it Call this title underscore text. Next I am going to drag and drop a button down onto our canvas panel and I will call this level underscore one underscore button. We're going to build out our main menu here so our start menu so that you can choose level one to play. After we are finished with this entire project, it should be entirely simple for you to come back and with the knowledge gained at a level two, and level three etc. Only we are just going to start off with one level to click on and play.

And then on this button, I want to add some text so drag and drop this text widget on top of the button like so, and hit up to on this guy and we will call it level underscore zero One underscore text. All right, so with that, I'm going to click this zoom to fit button. And now let's set the details for all these. So let's start off with our background image. And for the anchor here, I'm going to choose this full screen option. And you're gonna see this little flower icon indicating our anchor, kind of split apart.

So there's a corner at each corner. Okay. Next, what I'm going to do is I'm going to set my offset offset right and bottom here to be zero. And zero. What this essentially does is it makes it so that we can have an image that fills up our entire screen. Now, this is where you can get really creative if you were to import some images of your own and they could be JPEG files, they could be PNG files, etc.

You could then place them into this portion of your background image widget to slot in an actual image. Maybe you've got some characters in mind and you've got like a nice scenic image, you want that sort of thing. I'm not going to do that here, but I just wanted to point out where you can do that. Instead, I'm just going to leave a solid color as my background quote unquote image. And I'm going to change this to be a straight color of let's go black. So I'm going to do my tint here.

We'll do straight black, like my soul, and that'll be kind of good. Okay, next, let's choose our text widget here. We will change the text here to read the gallery, because this is gonna be a shooting gallery style game. I didn't know what else to call it. The gallery's just fine. I do want to set the answer anchor for this one to be this top bar, like this.

And now, if I set the offset left here to be zero position y zero offset right to also be zero. And for the size y, I'm just going to change this to be zero as well, this is not going to matter because I'm going to click this size to content box. And what this will do is depending on the size of the content, the size of the contents for this widget, aka the size that I set my font type that is going to determine how big this widget needs to be. So I want this text to be fairly large since this is the title of our screen, so I'm going to set the size to be 175 like that. And what else am I gonna keep? The font family is gonna be fine.

Let's do outline settings. Sure, I am going to change my line settings to be eight here. And the outline color I'm actually going to leave is black. And you may be saying, hey, that's black on black, you can't even see the outline settings. You are correct on that. You cannot see the outline settings, but I'm doing this on purpose because eventually I am going to duplicate this actual Widget Blueprint and I will want that outline setting.

So go ahead and set it here to the outline setting of eight and make it black. And of course, let's make sure that outline color is black. That's all good. Let's actually do a shadow offset here as well. I'm going to set this to be eight in the X and eight in the y shadow color. Make sure that the alpha value is one and again of course you cannot see it with this black background.

But this is to come later. And then for the justification for this, let's set this to be the middle. So that text right there looks all nice and neat. Next, let's select your level Oh, one button and set some parameters for this guy. So the anchor for this, I want to be let's go this middle box. We're going to put this somewhere in the middle of the screen here.

So position x, I want to be zero position y, I want to be 200. The sorry I got that anchor wrong, didn't I? I wanted that to be the very true middle of the screen, not the top middle, the true middle. So let me try that again. position, zero position y 200 somewhere down there. The size x I'm gonna set to be 400 and the size y 150.

Next, I want to set her up this button just a little bit. So with my alignment settings here, point five equals halfway depending on your positional settings, I'm going to set my ex here to be point five, and my wife to be point five as well. Something like that in the middle. Now for the style, I do have some style settings that I do want to set for this. Mainly I got some sounds and stuff I need to slot in. But know that there's a whole bunch of things that you can set for this.

You can set a button style depending on if the button is in a normal phase. Basically, you're just looking at it. You can set a certain color or look to it. You can slot it in an image for it. You can set what your buttons going to look like if you're hovering over it as in your mouse is hovering over it. You can slot in a color or an image.

You can also set what your button looks like if you press your button that is we click on it. So here too You can put in a color of the button or simply put in an image. Now I want to come down here a little bit and I want to slot in a pressed sound and a hovered sound. So this is a real simple place to slot in some sound effects for interacting with this button and I do have a couple in mind for this press sound. I'm going to do a search for click on button Q. And for the hovered sound, I'm going to search for Camera Shutter, that WAV file right there.

Okay, next, and last but not least here I want to select my button here. For the textblock I am going to, let's see our padding settings. I'm all well and good with that. But I do want to change our text here to simply read level one. And under the appearance section, I want to change the color of that text to be a little bit more legible. I'm going to go straight black for that.

You feel free to put what you want. And I do want to change the size of this to be something a lot bigger. Let's try 75. That looks pretty good. And the outline settings I will set that to be seven Sure. No, no, let's not do that.

That's obviously going to look bad. Yeah, let's not do that. We'll just leave it as without any outline setting, I could set an outline, then give it another color. I'm just gonna leave it nice and simple like that. So with that, let's complete pile in save in now we have a start menu layout. Now you could have gotten a lot more fancy with it than I have.

I've only got one button that we're going to click to launch one level. But you can look to add a lot of images back here you can look to eventually add more than one level button to interact with that sort of thing. Anyways, that is gonna do it all for this one guys. We will see you in the next one.