Welcome back everyone in this video we are going to continue and actually finish off our skill acquired notify layouts. So let's jump right to it. If you forgot where we are, we are within our content Metroidvania widgets folder. Open up w BP underscore skill acquired, that is the guy that we are working within. We're going to take a little bit of a shortcut here to lessen the amount of work in the last video, we created this description overlay right here and it has an image and some text on it. I am going to copy this I'm going to right click on it.

And I'm going to say copy. Then I'm going to come over my canvas panel and I'm going to right click and I am going to paste it. Okay, now it's not in the position I want yet I want to move it over here but firstly, I'm going to name This attributes underscore overlay Okay, so this is gonna go on the left hand side of the screen is going to let us know like how much mana is this gonna take for us to use. Now our double jump is not going to require any man but there are some skills that will require man. So that's going to be a populating the left side of the screen here. So with that one in place, I just need to set some more details, I need to set the position x is going to be negative 955.

Like so, the position y is going to be negative 110 the size x and the size y is already fine. So you can see that this is in the part of the screen that we want it. Okay, next I'm going to come under the other image that was attached to this copied overnight. And I'm going to rename this right away. This is going to be called attributes underscore image. And it's already the image that we want it this scroll.

So the only the only thing I need to do there is just rename it just for clarity sake. Now this text block. Let's see, we do want some text. But before I add this text block, I'm actually going to delete this one out of here because I want to add a horizontal box with which to contain some text. So I'm going to do a search up here in my palette panel for a box, actually, let me look for horizontal that will narrow down our choices right away. I'm going to left click and drag this on top of our attributes overlay right here.

And we're going to drag this down a little bit to give us some more space. We can see what we're doing You're over in our hierarchy, select that Horizontal Box hit f2. We will call this attributes underscore box. Okay, let me see if there's anything special we need to set about this, there is some stuff that I want to make sure that we have set. Um, come under the padding section for your attributes box. The left padding we're going to set to be 50.

Top padding is going to be 70. Right padding will be 50 and the bottom padding will be 50 horizontal alignment here we're going to have right in the middle. You can see this green box right here. That's our Horizontal Box that we're modifying here and our vertical line, we're going to set this to fill. Okay, now we need to put some things inside of our Horizontal Box. So the first thing I'm going to add inside of here is a text widget.

Again, not a text box, not rich text, just text Drag and drop it on top of your attributes box like so. And I am going to hit f2 on this and name it manna costs like so. And just flipping over my page notes, okay, meta cost. And coming over to my Details panel, I am going to set the text to actually read manna cost, like so obviously it's in white text right now. So how about we fixed that up next, let's change our color here to be black. Again, that is an RGB value of zero across the board.

Let's change our font family. Let's change this to the Gothic numbers font. I'm going to set the size of this font to be 35 Big little bit bigger than it was before. And that's gonna be pretty good. Okay, next I'm going to add a another text widget inside of our attributes box. So drag and drop one of these on top of the attributes box.

I'm going to hit f2 on this guy to rename it, and I'm going to call this Manoj underscore value. Okay, with that selected come under the details, horizontal alignment here is going to be this center alignment. The vertical alignment can stay full. The text right here we can put a value of 99 this is just a placeholder value. A variable is going to be bound to this eventually but 99 is going to be fine for now. And you know what I did I add I did didn't I I edited a horizontal box when actually I wanted a Vertical Box bag.

Me. So what can I do to change this? Well, I can come under attributes box. And I didn't want it to be horizontal, I wanted it to be vertical, I can right click, and I can do a replace with Vertical Box. That's kind of a handy feature. So it's kind of good that I made this mistake so I can show you how you can fix this.

So let's change this to a vertical box. That's all well and good. It collapsed. The things attached to it. Let me just rename this to what did I rename this I call this attributes box attributes underscore box. My bad sorry about that guys.

Man a value. Let's click back on that because we were fixing up some things with that. So you can see now this man values underneath the title of man a cost like I wanted. With this guy selected I want to set the horizontal alignment to be middle Again, this text is 99, it's going to be changed out eventually being bound to a variable. Let's change the color and opacity here to be straight black. Once again.

I'm going to change the font family to the num Gothic numbers, the size is going to be let's go 30 something like that. And that's looking pretty swell. Okay, next we're almost finished up here guys. It's a little bit more to go. I want to add a back button over here. So we can essentially click on something so we can exit out of the screen after we gathered this skill and add it to our players repertoire.

So let's find in overlay in the palette panel, I'm going to drag and drop this on top of our canvas panel like so. gonna select it hit f2 and I'm gonna call this back underscore overlay. Okay, with that selected, I'm gonna choose my anchor points, the anchor point is going to be this lower right box, it's going to move this little flower icon, the anchor point to the lower right portion of the screen. And with that, I need to set our position x and y and all that good stuff. position x is going to be 150. Position y is going to be negative 75.

And you can see it's going to start off the edge of the screen here. size x is going to be 250. In size y is or size y is going to be 80. Like that. And our alignment here for the x and y are going to be point five and point five. So the idea here is this back button is going to eventually slide in from this side of the screen.

Okay with that, I need to attach an image to this overlay. So underneath the pallet panel, let's find an image, drag and drop it on top of our back overlay, make sure that this yellow outline is around it. Otherwise, you're going to insert it between these two items. So you want to attach it to your overlay like that. Hit up to this will be called back underscore image. And with that selected, flipping over my page, oh notes.

Gonna come underneath the Details panel, the left padding, I want to set to be 25. The right padding I'm going to set to be 10. Or sorry, left padding 25 top padding of 10 right padding of 165 bottom padding of 10 horizontal alignment I want to be to the left and the vertical alignment is going to be this middle option right here. And the reason I have these particular settings is because I'm going to have a back button right here. So underneath appearance, brush image, left, click, release, left click, and I'm going to be looking for my button, underscore be that guy right there. Okay.

Next thing I want to do here is doo doo doo doo doo doo ad. Aha. Okay, I want to add another button. And by this I mean the actual button widget, not this type of image of a button. So find in the pallet panel a button widget. We're going to drag and drop this on top of our back overlay, like so.

I'm going to select it hit f2 and I'm going to call it This back underscore button. And our padding for this is going to be zeros across the board but our horizontal alignment is going to be fill and our vertical alignment is going to be filled as well. flipping over my page and notes underneath the appearance section, don't worry about everything we just covered up our button. Don't worry about that for now under the appearance style section. Now we've got to set our normal style first. So come under this normal click this little drop down triangle.

I'm going to left click release left click underneath the search area and I'm going to do a search for menu underscore button. Not men button menu underscore button. we imported this texture earlier. Now you can see there's our button appearing again. Never fear right Okay, and we want to draw this as not a box. Let's draw this as an image.

And that's just going to shape it up a little bit nicer. This is kind of hard to see. So I'm zooming in on up on this. It's kind of like a fancy, black flowery sort of pattern Gothic pattern around the perimeter here, which is what I want. Okay, so that's for our normal style. Now I need to do this for the Hubbard style as well.

So click this little drop down triangle under Hubbard. And the image here, we're going to left click release, and I'm going to do a search for menu underscore button. Got a slot that in there as well. Here too, we want to draw this as an image. So that's normal hovered. We also want to do that for pressed so come underneath the pressed option, click this little drop down triangle for the image.

We want to do the same and search for menu underscore button and here to under pressed draw as set this to be image so it doesn't matter if the button just appears normally or we are hovering our mouse over it or we are actually pressing or clicking on the button it's still gonna have that same look about it. Okay with that I also want to come under the press sound and slot in the press sound right here. Let's click this little drop down triangle and underneath the search bar let's do a search for it click on button, there's a click on button cue that I thought sounded pretty good. And then for the hovered sound, click this little drop down triangle. And for this I thought there was one called floating you I open to that one right there floating you I open to now these are all included.

By default this one is in Some of the engine files, the CLICK ON button is also in the engine files as you can see the path where this exists in the Content Browser by just hovering over it like that. Okay, we are not quite finished yet, because I need to attach something to this particular button. So I'm going to come under the palette, we're going to select some the text widget. And I'm going to drag and drop this on top of the Back button. So we can add some text to this button. Okay, almost finished up here.

Let's select this text and just hit f2 on this so that we can rename it and I'm going to call this back underscore text like so. And with that selected over in the Details panel, let's come under our padding section right here. I'm going to click this little drop down triangle, the left padding I'm going to set to be 10. And for the top padding the right path In the bottom padding, I'm going to set that to be zero. So 10 000 is going to be my padding values. I am going to set the text here to simply read, okay in capital letters like so.

And I do want to customize the appearance a little bit the color and opacity. I'm going to set this to be actually let's go our value of one g value of one p value of zero, so it's going to be straight yellow font family. I'm going to leave this as the Roboto font family I don't want this to be hard to read anything fancy sighs I'm going to set this to be 30. Then I'm going to scroll down a little bit more outline settings. I do want to set some outline settings for this outline size of four. And you can see we've got a black stroke around that now.

Okay, that is looking pretty good again, I know this button is technically off the screen right now but don't worry We will make that animate onto the screen at the appropriate time. With that. Let's Compile and Save and we have finished our skill acquire notify layout job well done, keep the momentum rolling. We will see you in the next video.