Welcome back everyone. In the last video I showed you what our skill acquired Widget Blueprint is ultimately going to look like. In this video, we're going to start laying out that Widget Blueprint. And this is going to entail a good bit of work so it's going to be spread across a series of videos. Without further ado, let's get started. come under your content Metroidvania widgets folder, double click on your W BP skill acquired that we just created in the last video.

I'm going to try to move a little bit faster in these videos to ensure that we get everything in in time. I'm limited to 20 minutes in each of these videos. So hopefully with the benefit of pause, you can keep up Okay, so the first widget I want to add to our canvas panel here is known as a blur widget background blur. So I'm going to do a search for that up in the palette panel blur. I'm going to drag and drop it on top of my tank This panel and I will try to set details for these right away as soon as I add them and I'm going to be referencing my notes a lot. So hopefully, I don't make any errors along the way.

The anchor point for this one I'm going to set to be the full screen that guy right down there, so anchors full screen. And let's see the blur strength is the other property I want to change with this is a blur strength of five a little bit of blur there. One thing I did forget after I set my anchor to full screen as I need to make sure that my offsets are 000 across the board, the left the top the right in the bottom, so you see this green outline all the way around. Okay, the next widget I want to add here is in overlays. So I'm going to do a search for overlay up in my palette panel. There is an overlay I'm going to drag and drop this on top of the canvas panel as well.

And I'm going to actually give this one a name. So let's call it skill underscore overlay, like so. And the anchor I want to set for this one is going to be this top bar. That's what I call it anyway, as a top bar one. The position why I'm going to set to be 30. The offset right is going to be zero.

The size y I'm going to set to be 350. So this is going to be kind of that giant banner across the top. behavior. I want to set the visibility here to be visible. And just double checking my notes here that looks like all we've gotten set for that one. Okay, now with our overlay here, I want to add a whole bunch of things on top of this.

As you can see, when I hover over this overlay in the pallet panel, it says allows widgets to be stacked on top of each other, which is what we want to be doing here, we want to be stacking a few things. So next thing I want to add over here in our skill overlay is going to be an image. So I'm just going to x out here, drag and drop an image right on top of our skill overlay. And I'm going to select it, and I'm going to rename it right away. And this one's going to be called skill underscore, b g underscore image. And flipping over my page notes, got to do some flipping back and forth here.

The horizontal alignment and vertical alignment I'm gonna set these to be full and you can see what that does. It just kind of fills up this entire space. Let's see the brush, I'm going to set this it's going to be set to nothing rather the tint I'm going to set the tint to be R of point one five g of point one, five, B of zero and the A is going to be one, so it's gonna be this gold color by default, but actually we're going to be driving this color through some variables later on. So this is just going to be our default color. Okay, next one I want to add is going to be a another image. I'm going to drag and drop this on top of our skill overlay as well.

And I'm going to select it and I'm going to rename it over in the Details panel right away. This one will be called skill underscore f g for foreground underscore image and the details I have set for This are as follows. padding I do want to set some padding settings for these. But before I do that, I'm going to set my horizontal and vertical lines to be full like this. So with my horizontal and vertical alignment set to full, I'm then going to set the top padding to be 15. And watch what happens when I do this.

Set it to 15 and just kind of nudge it down a little bit here. So I'm going to have this gold sort of in the background. And then this foreground one is going to be kind of offset from the top 15 and from the bottom 15 like so. Now for the appearance, the brush image what I want to slot in here is I'm gonna search for it, it's gonna be m underscore skill acquired title. You remember that material that we created in the last video Well here is where we slot it. In.

Now the image size, you can see it looks a little bit stretched here, I'm going to set the image size to be 500 in the X and 500 in the Y. It's gonna make it look a little bit nicer once we get get it in the game. And also, to make this look a little bit nicer, I need to set the tiling here not to be no tile, but I want to set this to both. And I can see it just kind of makes it look a little bit more detailed. So that's what that did the combination of the image size with our tiling set to both. Okay, so that's looking pretty good.

Next widget I want to add is going to be what is known as a horizontal box. So I'm going to search for that in the pallet panel. I'm just going to search for box and I should have searched for horizontal but there is a Horizontal Box. I'm going to drag and drop this on top of our skill overlay as well and it's very important that you Get these various widgets attached to the appropriate thing. So make sure that you're seeing all these indentations as such. So you saw me drag and drop that on top of the skill overlay.

So this Horizontal Box, I'm going to populate some things within it. But firstly, I'm going to select my Horizontal Box and worry about its details panels. So the first thing I'm going to do is I'm going to rename this skill underscore learned underscore box. I'm going to set the horizontal alignment and the vertical alignment to be both the middle and right now it's just that green dot out there. That's all we see. And I'm going to set the top padding here to be 20.

And again, this isn't going to look like much just yet. We got to add some things inside of it to really make this shine. So let's do that. Next. The next thing I'm going to be looking for is an image widget. And I'm going to drag and drop this one inside of our Horizontal Box, make sure you see that yellow outline over the Horizontal Box.

And it's indented like so. I'm going to select it and I'm going to rename this one. Hitting f2. I will actually I'm not going to rename it right here, I will rename it over in the Details panel. I will call this skill underscore icon underscore left. Okay.

I'm going to set the horizontal alignment vertical alignment actually I'll leave them just as they are right here. I will slot in an image and this is going to be our icon, double jump icon underscore double jump that guy right there. Okay, and I do want to set the image size here to be 200 by 200, not 220 200 by 200, like so. So it's about that size. And I am going to come under the padding, click this little drop down triangle and I'm going to set the bottom padding to be 50. A lot of trial and error went into getting all these settings.

So that's why I am referencing my notes heavily here, this is not something that you can just come up with off the top of your head. So this icon is eventually going to be determined by a variable as well this is just going to be our default icon but that's going to be bound to a variable eventually, as well. Okay, next widget I want to add inside of our Horizontal Box is going to be a text widget now not a text box but a text widget so drag and drop that on top of our skill learn box like this. Notice all of you indentations and go ahead and select it. And this one we are going to rename, skill underscore learned underscore text. And this text is eventually going to be driven by a variable as well, but I am just going to put in some default text here.

I'll just put in learn double jumps and that's going to be the first one we're going to learn learn double jump, exclamation points. I'm going to set the horizontal alignment to full but the vertical alignment is going to be set to the middle here. The left padding is going to be at the right padding is going to be 40. And I do have some appearance settings. So I'm going to set the default our value here under color and opacity to be point one five, the G value will be point one five, the B value will be zero, and the a value will be one, this two will be bound to a variable in time. The font family here I'm going to change this to be Gothic letters.

I'm going to set the font size here to be a 92. Something nice and big. And of course it doesn't stand out quite enough. So I'm going to come under the outline settings, outline size, I'm going to set that to be six. And I do like my outline color is black. But I also want to add some shadow settings as well.

So shadow offset, I'm going to set to be five and five. And I need to make my shadow color here having a value of one. The alpha value is gotta be one in order to actually see that shadow So again, the text here is going to be bound to a variable and the text color here is going to be bound to a variable in time as well. Again, this is just going to be our defaults. Okay, next thing I need to add inside of our Horizontal Box is going to be another image. So I'm going to drag and drop an image.

You know what actually, instead of doing that, let me take a little shortcut here. I'm going to right click on our skill icon right here, skill icon left. let's duplicate that. Okay, and you can see it already pop pops it down here and it's almost in the position and everything set like we want it to. So with that selected, I'm going to call this skill, underscore icon, underscore right. And let's double check all the details here.

The bottom has an offset of 50 horizontal and vertical alignment As such, and you know what that is going to be fine and dandy. Again this icon will be determined by a variable as well. So we've gotten this little bit done with our skill acquired Widget Blueprint. Let's go ahead and Compile and Save. Plenty more work to be done but we're off to a good start. We will see you guys in the next video.