Welcome back, everybody. Well, we now have a black magic menu Widget Blueprint created. Over the next few videos, we're going to work on laying out that black magic menu. So if you haven't already done so come under your content Metroidvania widgets folder, double click on your be magic menu to open it up. Now we do have some existing widgets over here in our hierarchy, some of them are visible, some of them are not for the ones that are at well, even the ones that are visible and the ones that are not visible. Don't worry about it all for now we will shape this up over the next few videos.

Let's just take care of the things we want to take care of in this video. Namely, I want to create a title over here something that says you know, black magic menu, that kind of thing. So this is what I want to add Firstly, is in my palette panel. I'm going to do a search for a balloon. widget there is something called a background blur widget. I'm going to drag and drop this on top of my canvas panel.

This is going to enable us to have a full screen blur when this comes on to the screen. Now here is my background blur widget way down here, make sure you select that guy, you can reorder this if you want. I'm going to reorder this by dragging it right beneath my canvas panel. And when you see that yellow line like that, you can just drop it right there. And with that selected over in the Details panel, I'm going to set the anchor for this to be this full screen anchor. And when it's got the full screen anchor, I still need to set the offset left, top right and bottom all to be zero to make it true full screen you can see that green outline now encompassing the border of my screen.

And then down in the appearance section. I want to set the blur strength here to be three. Now you can see it kind of blurred out that great In the background a little bit, if you didn't see that, let me set that back. first rank zero. Now look at the grid in the background, as we said that the three, that's gonna add a little blur effect. So that our, our menu kind of pops out from what we see in the game.

Okay, so that's all well and good. Next thing we're going to add is going to be a text widget I'm going to exit out of here we're looking for a text widget. I'm going to drag and drop this on top of the canvas panel. And I'm going to reorder this up towards the top as well. I'm going to put it right below my background blur like so. And I am going to start off by naming this particular widget.

Let's call it menu, underscore name. And you can see it updated in the hierarchy. The text that I'm going to slot in is going to Say, black magic. I do want to set an anchor for this and the anchor is going to be this upper left square, which it already is. So truth be told, we did not have to set an anchor for that. The position for this particular widget, I'm going to set an x position of 75 y position is going to be 60.

You can see how this is starting to nudge it all around. I'm going to size the content here. And when I check this box, watch what it does to this green box over here. It is basically going to make that green box whatever the size of the contents are. We are then going to come under the appearance section. I'm going to change the appearance to be let's go r one g one, B, let's change that to be zero.

So we've got some yellow text. I'm going to To change the font family here to be our Gothic letters, I'm going to change the size of this to be 65. Like so that's looking swell. One thing I do want to do up here is I want to change our z order to be five, I'm going to have kind of an underline effect a little bit beneath this. So by setting this to five, that's gonna ensure that it's on top. Remember, bigger numbers are on top.

So I could set this to be 123 5000. As long as it's going to be bigger than the next widget I'm going to add, we will be fine. Okay, I do want to add some shadowing effects or other outline effects to this as well some shadow and outline. So I'm going to scroll on down where my outline settings are. I'm going to set the outline size to be five and it's gonna be a black outline on my black background here. It's a little tough to see So I'll lie size of five outline color of black, which is all good.

For a shadow offset, I'm going to set that to be shadow offset of five and five. In the shadow color here, I am going to set to have an a value of one currently you can't see it because there's a value, the alpha value is zero. But if you set that to one, boom, now you see some shadowing underneath all those letters, that's looking pretty slick. Okay, next widget I am looking to add here is going to be an image widget. I'm going to left click and drag this onto my canvas panel as well like so. And then I'm going to reorder it.

So it just added this image zero down here. I'm going to put this right underneath my black magic like so. And I'm going to rename this the Details panel to menu, underscore underline, like so. And the widget are and the details we want to set for this. Let me just zoom out a little bit so we can see what we're doing here. We got an anchor is the upper left, which is good, the position of this is going to be negative 130.

The position y is going to be negative 35. We are going to size the content. So check that box. My z order here is going to be zero that's fine. Now the appearance brush, I actually want to slot in an image in here I want and always does that. So you're going to left click hold down left click.

Then I'm going to release left click when I'm in this browse section, t underscore Inc. That's the one I'm looking for. Let's see, I've got t underscore ink, black, pink, let's go black, something like that. And then I'm going to come under my render transform section. And for the scale, the x scale, I'm gonna set to be point eight. And the Y scale, which is kind of the up and down scale, I'm gonna set to be point three, something like that. Now, let me just double check my position here, because that is not exactly where I was expecting it to be negative 130 and negative 35.

That is what I have my notes saying it should be as, however I disagree. I don't think that that is exactly where it should go. So I'm going to take our Y position here, kind of slide it up and down. I'm selecting right here. kind of moving this down a little bit, right about there. So that's about where I want this to go.

Now I may decide I want to change this at a later time, I think I'm gonna go to about 35. So I think I had it at negative 35. Let's go 35 for now, maybe we'll change it later. Okay, that is gonna do it all. For this one, we've just added a title to our screen. Let's go ahead and Compile and Save a lot more work to be done.

But guys, that'll do it all for this one. We'll see you in the next one.