Hello and welcome back everyone in this video we are going to continue on with our skill acquire notify layout. If you don't remember where we are come to your content browser, we are within the content Metroidvania widgets folder and we are within w BP skill acquired. Okay, so where we left off in the last video was kind of creating this banner of the the widget that's going to tell you what skill you've learned. And this one, we're going to add some widgets for an image here, some space down here showing which button you need to press in order to use that particular skill, and then a description of the skill. So let's hop right to it. And again, I'm going to try to move a little bit faster in this one to make sure that I get this video recorded within the time constraints allowed to me.

Okay, so the first thing I want to do is I want to add a border widget. Right up here it says a border is a container widget that contains one child widget when You want it to be an image going within it. And this is just going to add a border around the image. So I'm going to drag and drop this on top of our canvas panel right here. And I'm going to select it hit f2 on it right away to name it. And I'm going to call this screen shot underscore border.

And with that selected, I'm going to set some details for it right away. So I'm going to be doing some flipping back and forth in my page of notes. The particular anchor point that I want for this is going to be this middle box anchor point. And then with that, I'm going to set the position x is going to be zero, the position y is going to be 170. size x is going to be 1000 size, y is going to be 600. And you may say hey, this is a little bit off the screen boundaries here. Well that's because I need to set the alignment here and gonna set the alignment to be point five in the X and point five in the Y.

So it's gonna frame it up kind of in the middle there. Okay, with that, I'm also going to come down into the appearance section, not the content section, the appearance, and under the 10th section. I'm going to set the tint for this to be kind of this goldish color. This will be driven by a variable later on, but for now, you could just set it to that gold color just to have some sort of artistic look in there. Okay, with that said, next thing we want to do is add an image widget inside or attached to rather our screenshot border. So I'm going to drag and drop this on top of our screenshot border.

Right away. I'm going to select it hit f2. To rename it, this will be called screenshot underscore image. And with that particular widget selected, come over To the Details panel, I'm going to come under the padding section up here and I'm going to set padding for 10. In the left, the top, the right in the bottom, and you can see what that did. If I zoom up a little bit, it added a little padding between our image and our border that this is attached to.

So you kind of get the idea here. Let's slot in an image right away. I will since our our default here says learn double jump, let's find the double jump image. So left click, release, left click and I'm going to do a search for t underscore image underscore double jump. And it's going to slot it right in there like that. Okay, so that's looking kind of snazzy.

All right. Next, we are going to add in overlay widgets. So this is not in the comment section. I'm Going to search for it in overlay, it's in the panel section, we're going to drag and drop this on top of the canvas panel as well. So make sure Canvas panel is surrounded in yellow. Select this, and I'm going to call this right away hitting f2 on it, we're going to call this in put underscore over lay like that.

Okay, with that selected, I'm going to come over to the Details panel and I'm going to set the anchor point for this to be this lower middle box I want to right there. So that little flower icon should now be at the middle bottom of your screen. And I do have some positional settings. So position x is going to be zero position y is going to be negative 75. size x is going to be 150 in size y is going to be 100 and I'm just going to zoom up in on this a little bit, the alignment. I'm also going to say To be halfway in the x, that's point five, and then halfway into the Y point five. So this is gonna be kind of overlapping the bottom of our image here.

Okay, with that all added Next, I'm going to exit out of this search, I'm going to add an image, select your image, drag and drop it on top of our overlay. Now overlays are good because you can stack things on top of each other. So I'm going to stack a couple images on top of each other. This first one that I just added, I'm going to hit f2 on and I'm going to call it input underscore image. Good to have a good naming convention for these. flipping over my page of notes and what I'm going to do is I'm going to slot in a brush right away in image under the neath the appearance brush.

This section and if I left click, then release left click right over to the search bar, I'm going to do t underscore scroll. This is a texture that we imported earlier and it comes into play right now. Okay, that's looking pretty good right where we want it. Okay, next, I am going to add another image, drag and drop this on top of the input overlay. I'm going to select it hit f2. This one is going to be called input underscore button underscore image.

And with that selected, gonna come over to the Details panel. And first thing I want to do is I want to set my horizontal and vertical alignment here you can see where this image is kind of located in this upper left corner. I want to set the horizontal alignment to be fill in the vertical alignment to be filled and I know you're gonna see this big white box overlapping that but don't worry That's gonna get fixed up in just a moment here, as we slot in an image under appearance brush, I'm gonna left click, release, left click, and what I'm looking for is button underscore a, we should be looking for this T underscore button underscore a. Okay, now that size is a little bit large. I want to say we want to probably scale that down. Yeah.

So what we could do here is we could come underneath our image size here and you know, set this, that echo Actually, we can't set it here, my bad, we need to undergo the scale section. So come underneath the render transform scale section to make this button smaller. And I'm going to set the x scale here to be point five, like so. And the Y scale. I'm going to set to be point seven. So we have one image, our button image on top of this scroll.

So that's what overlays are good for. It's kind of a container box that allows you to stack various widgets on top of one another. Okay, a few more to go here before we call this one wrap. We're going to add a another overlay. So I'm going to do a search for in overlay. We're going to drag and drop this on top of the canvas panel once again, gonna select it.

I'm gonna hit f2 on this and I will call this description underscore overlay, like so. And flipping over my page of notes here. Where do I want to anchor this to? Let me just see, I did not actually put where I did. I want to anchor this to my bed. on that one so let's see Oh, there it it is.

Okay, I miss saw my page notes, the anchor point that we want to set for description overlay missed read my page of notes, we're going to attach this to the center middle box, that one right there. The position x, I'm going to set to 505 position y is going to be negative 110. The size x is going to be 450 and the size y is going to be at 490. So it's going to be along the right hand side over here. Again, a lot of tweaking and tuning to get this just like I wanted. okay with this overlay, I'm going to attach an image inside of your next.

So I'm going to exit out my search bar up here. I'm going to drag and drop an image on top of our description overlay. Make sure that that yellow highlight is around it entirely like so. gonna select it hit f2 This is going to be called de scription underscore image. And with that selected, of course, we have some details associated with this. We firstly want to set in our image under appearance brush, going to left click release, left click, and our T underscore scroll is the one we want to put in here.

Fills up that whole right hand side there, kind of nice and big. That's looking pretty good, just like I want it. Next, we're going to add one more widget to this. So I am going to find a text widget not a text box, not a rich text box, just a text widget. And we're going to drag and drop this on top of our description overlay. I'm going to select it hit f2 and this is going to be called D script Shin underscore a text and with that selected I'm going to come under the padding section.

And under the padding left, I'm going to set that to 65. padding top is going to be 7070 padding right is going to be 60 padding bottom is going to be 30. Now my text is a little hard to read here, but we'll get to that in just a moment. It's white on kind of this white background. I'm going to set my horizontal alignment here to be center aligned. And my vertical alignment along the top is just fine like that. Now for the text.

We're going to bind this to some variables later on, but I'm just gonna type in some text so that we can see something allows a player to jump again, in mid dash, air period. Okay, and then down to the appearance section. I'm going to set the color here to be Black, that's RGB of zeros across the board. I am going to set my font family to be I'm going to go the numbers font on this instead of the letters font, I'm going to go numbers font. I'm going to set this size here to be 20. If I scroll down a little bit, some other things that I want to set is my justification.

I want to be in the middle. And next you also see I've got my overlapping text here. So I'm going to scroll down a little bit and there is an option for auto Wrap Text. Let's go ahead and check that and that will fit it right on top of our parchment here. So that's looking pretty good guys. We added an image, we added a little button as well as well as a description.

Let's Compile and Save that we are not quite finished with this yet, but we have some good momentum. And let's keep it rolling in the next one. We will see you in In the next video