Welcome back everyone in this video we will be creating the layout for a level complete menu from our level complete menu we want to be able to quit or restart the game. And this is meant to appear when a user completes a level. So unlike our start menu, where we are just going to have one button to click on our level complete menu is going to have two buttons to click on. Now, we've already created this w BP Start Menu and I'm going to use this as a little bit of a shortcut for creating our level complete menu. So let's just do this let's right click on our start menu and choose to duplicate this and I will simply call this w BP level complete menu and then I'll double click on this guy to open him up. Now we are going to want some different widgets for this, but we can kind of recycle some of the ones that are already existing in here.

Let me just frame this up by clicking this zoom to fit button. So we already have this text title here, I do want that, I actually do not want a background image for this. I'm going to select that and delete that out. Hit that delete key, and this level button right here we can repurpose that. So let's keep that one around as well. Okay, one widget I do want to add is going to be called a background blur.

So in your palette panel, we're going to type in the word blur and you're going to find this special effects here for background blur. Let's go ahead and drag that into our hierarchy onto our canvas panel. Actually, I like this one kind of at the top, so I'm going to put it in right there is where I want to insert it. So it's gonna be attached to my canvas panel, but right down There, okay. And again, I'm gonna place all my widgets first and then worry about its details afterward. Okay, so we got a background blur.

We have our text title, we've got a button here, which I'm going to rename this one for this screen. So click on this do f2. I'm going to call this the quit underscore button. And then I'm going to rename the text below it. So hitting f2 on this, I'm going to call this quit underscore text. Okay, so with this button created, I'm going to right click on this, I am going to duplicate it.

And then I'm going to well actually by duplicating it, instead of copying and pasting, you can see it already created that button with text right below it so you can copy and paste it or you can duplicate it. So duplicating it will save you a step. Let me just hit f2 right here to rename this. I'm gonna call it This my restart underscore button and then right below that hit F to restart underscore txt. Then the next widget I want to add now will come under my palette section, I am also going to search for it is going to be called a uniform Grid Panel. I'm going to drag and drop this on top of the canvas panel as well.

So what this is going to enable me to do is it's going to enable me to add a bunch of widgets to it to lay out my level complete menu in such a way where I'm going to be printing off things like your time bonus score your how many points you got for shooting the targets, and then a final score and this uniform Grid Panel allows me to lay out those different text widgets in a nice neat and orderly fashion. So that's why I'm going to be bringing this one in. Okay underneath this uniform Grid Panel I want to play a whole bunch of text widgets. So, left click, drag in a text widget on top of the uniform Grid Panel like so. Rename this. Targets underscore text.

Drag and drop another one on top of the uniform Grid Panel. f two target underscore value. Another one drag and drop f two time underscore text another one, F to time underscore value. Drag and drop another one F to score underscore text and drag and drop one more f2 score underscore value. Alright, that was simple enough. Now let's set some details for each of these widgets and I will start off with our background blur.

Go ahead and select that guy under the anchors section. Let's give this a full screen anchor kind of like what we did with our background image and we will zero out all the offsets so it will fill up the entire screen. And then down below in the appearance section, set this blur strength to be a value of five. So unlike our start menu that had a black background, this one is going to appear while we are in our level and when this level complete menu pops up. You're going to see your level in your background. Yep, it does.

Background blur is going to just make it a little bit blurry So the focus will be on your level complete menu. All right. Next, select your text title We obviously do not want this to read the gallery. So change the text over here to be. Let's go a level, complete exclamation point, something like that. And you remember earlier we set some shadowing and outline around it that we could not seeing our start menu.

That's why we did it in our start menu. So that here when we duplicated that Widget Blueprint, that this step is already done for us kinda nice. Okay, let's see. Next widget we got is our button quit. Let me zoom to fit here. Button quit has the correct anchor.

As for settings, we're going to want to move this on over a little bit because we got two buttons on the screen instead of one. So let's change the position x here to be negative 400. The position was Let's change that to be 400 as well because we're going to need to make some room for a uniform Grid Panel right in the middle of the screen. size x and size y is fine as our alignment settings. One thing I do want to change is the text on this. But before I do that, let's make sure all the other settings here are looking good.

And they should be okay. So next, select your quit text widget. And obviously we do not want this to say level one. Let's just simply have it say quit. Simple change there. Okay, next, let's go on to our restart button.

Select that guy. It has the anchor that we want as for our position x, let's go position x of 400 position y of 400 as well. Size is fine. However, we do want to change the text on this, so select your restart text widget. And we will change the text to simply be restart. That'll restart our game.

Okay, next we are going to deal with our uniform grid panel, select that guy, the anchor for this one, since it's going to be in the middle of our screen here, kind of giving us a score breakdown. Let's set that to be this middle, middle box one. For the position x, let's go zero position y, we will set that to be 25. size x is I'm going to set that to be zero and I'm also going to set the size y to be zero. And the reason I'm going to be doing that is because I I'm going to let this be dynamically size according to the contents that fill it. So I'm going to check this size to content. And then I'll make it so it'll give us the size that we want when it fills up with all these other values.

One thing I do want to change though, is my alignment here, I want the x to be point five and the y to be point five as well. So that is centered nicely on our screen. And down below in our child layout, I need to set a couple more things. We've got this minimum desired slot width and this minimum desired slot height. This is something for organizational purposes, that's going to make it so that our text and our is going to be, let's say spaced out appropriately. So I'm going to set this to be 100 and this to be 100.

And you're not gonna see too much yet in the way of what that does, but Trust me, what it will do is it will make it so all four texts is quite nicely spaced. Select your target text widget next. And for this we are going to keep our horizontal alignment at left align but our vertical alignment, we want to choose this align center options make sure you got those set appropriately. I do want this in a row zero column zero because this is a uniform Grid Panel I get to specify what row or column I want it to be in. And the text I will choose here is going to be target points like so. I will change the font size to be 30 font colors as white that is totally fine.

Well Add some outline here. Let's go outline size of six, perhaps, outline color. Black. That is all well and good. Okay, excellent. Let's go with target value.

Now coming under its Details panel, I want to make sure that the horizontal alignment for this is going to be right, the vertical alignment is going to be center. But now watch this, I'm going to set my row to be zero that is the topmost row starting with the number zero and the column I want to set to be one. So you can see how that nudges this over. So uniform Grid Panel again, you kind of see this, this icon here representing a lot of different boxes, you get to specify how many rows or columns you want. And so for this target points, I set this to be in row zero Columns zero. And for the target value, I set this to be in row zero, the topmost row, and column one, which is essentially one column.

Or if I set this to be like column two, you can see how I could widen that out even more. But having just two columns, one for the text and one for the value is going to be just fine. Now, I'm going to set a dummy value for the text here to be 9999999. Eventually, this will be bound to a variable which will determine the true value here. With that, let's see the size of this. I will let that be the default size for now.

Maybe I'll change that a little later. But let's go with that for the time being. Um, no, actually, let's change it to be a size of 30. And let's do a lot what was our outline size for the targets? Six so let's change the outline For this to be six as well. Okay, time text, we're just rolling right along here.

We want to set this to be left or horizontal alignment to be left aligned vertical alignment to be in the middle. We want to set this to be row one which is one road down. I'm going to change the text here to say, time bonus gonna get some bonus points based on how quickly they finished the level. Change the size of the font here to 30. The outline size, let's go was that five or six I was setting it to you was six. I will go six here as well.

Okay, time value, you can kind of see how this is all working out here. I'm gonna set this to be a horizontal alignment of to the right vertical alignment in the middle, we want this to be row one, column one. Here too, I will set the text to be some dummy value of none and then and then a nine, size of 30 outline size of six. Now what I could have done to save myself some time here is I could have just created two of these had all the settings all the details, good to go and then copied and pasted them so I wouldn't have to be setting these for each and every one of these. So that is an efficiency tip to know about. And finally we got some score text.

Let's select this guy. I'm going to set the horizontal alignment for this to be along the left hand side The vertical alignments in the middle row, I'm gonna set this to be row three. Now I could have gone row two, but I kind of want to leave a little space here because this is kind of gonna be like my score summary. So text here, I'm gonna have the final. I won't capitalize a final score like that. I will change the font size here to be bigger.

So I'm going to go 50 with that, the outline size, I'll still keep it six, like that. Everything else is looking good. Then for our score value. I'm simply going to change this to be right justified in the middle row, what is that 123 in column number two Sorry column number one. Number two, what am I thinking? The text here will be some dummy value of a bunch of nines the size I will set this to be 15 as well.

And something like that should do us just fine. So with that we've got a level complete menu. So let's go ahead and Compile and Save and guys that is gonna do it all for this one. We will see you in the next video.