Welcome back everyone. Well, we are continuing to make project in our black magic selection menu, we now have a title, we've got sort of this center widget, if you will, that kind of shows you the different directions that you can press on your thumbsucker arrow keys to select the different magic. In this video, we're going to get these four different magic selections added to our layout. So again, I am in the finished version of what this magic menu will look like. I'm gonna jump out of here now and go back to our current version of this project. This is what we currently have in place.

For starters, if you haven't already done so, come to this directory content Metroidvania widgets, find your way on over to the Blackmagic menu, double click on it to open it up. So seemingly there are a lot of widgets we need to add here. But through copying and pasting, we can take a little shortcut so what We're going to add firstly is an overlay. Come up to the palette and search for an overlay. We are going to drag and drop this on top of our be magic Grid Panel. So selected and come under your be magic Grid Panel, that guy right there, drop it right on there.

And right away, we're going to rename this to f2. We're going to call it electro spark underscore overlay, we're going to start with the electro spark overlay. Okay, and I'm gonna try to maximize my space here because our hierarchy is getting rather large. I have no need for animations right now. So I can kind of lower that down. So with our electric spark overlay selected, actually, you know what, let me let me place all of the widgets here first and then we'll go back and set the details.

I think That may go a little bit faster. So we've got the Overlay and then the next thing I'm going to add is a border widget. So I'm going to left click and drag and drop a border on top of our overlay. Like so. Gonna f2 this and call this electro spark underscore border. Next thing I'm going to add is an image, there is an image in our palette, left click, we're going to drag and drop this on top of our border.

Gonna hit f2 on this electro spark underscore image. And you'll note that this hierarchy right here is very similar to what we just created here 123123 Next, I am going to grab another image only. I'm going to place this one on top of our electro spark overlay right here. gonna hit f2 on this and this will be called he left true spark underscore selected okay next I'm going to grab a text widget not a text box but a text widget. Left click we're going to drag and drop this on top of electro spark overlay. Note the hierarchy here.

Good hit f2 this will be called electro spark underscore name. And then I'm going to do another text box or not text box sorry my bad a text widget text widget. Drag and drop it on top of the electric spark overlay hit f2 and this will be called electro spark underscore Manoj cost. Okay, so note the hierarchy here. Now let's go ahead and set some details for all these and then we're going to be able to do some copying and pasting. So that should be nice.

So let's start with our electro spark overlay. Make sure you got that selected. Over in the Details panel, we're going to set this into row two, column zero, that's all good. The electro spark borders what I want to deal with next and we are going to set the padding for this to be the content padding actually, you know actually, we don't need to set it for this the electro spark border. I'm looking ahead in my notes Electra spark border here is where we want to come under the appearance section. And we want to set the appearance to be our black magic t underscore black Magic Oh okay.

And let's set that to be the horizontal and vertical alignment to fill in fill. It's showing up like this because we haven't set our electro spark image yet. Let's go to electoral spark image. Let's set that to be have a padding of 57 by 55 by 42 by 48 you can see as I'm setting the padding here, it's kind of revealing our border back there, that T black magic. Now for this the brush image I want to slot in our magic empty teammates MTX it fits in there quite nicely. Alright, so that is looking good.

Let's do our electrical spark selected. Next, let's set the image right away appearance image, it's going to be our highlight, image t underscore highlight. And I'm going to set the padding here to be left of nine, top of five, right and bottom are going to be zero. I'm going to also just make sure the horizontal and vertical alignment is centered as well and then coming under my render transform. What do I want to set for the render transform? flipping over my page and notes if I remember right, it was point 775 for the scale, and it was point 775 for the x scale.

Point 775 for the Y scale. Also I do want to set the visibility of this in the behavior section up here to be hidden. I do not want that to show right away Now I know that currently you still see it here in the editor. But this is telling this when it is appearing in game it will show is hidden. So note that hidden doesn't mean hidden here in our Widget Blueprint. And as evidence of this, I jump back over to the previous version of this screen that we're creating right here you can see that this exact widget I've got set to hidden but it's not actually hidden.

Okay, jumping back to our version of this screen that we're putting together. The next thing I want to select is our electro spark name. And in the Details panel, I want to set our horizontal alignment to middle our vertical alignment to the top. The padding is going to be said to Six for the left 20 for the top and I need to set some text in here I'll just set that to be some magic because this is going to be bound to a variable later on. I do have some appearance that I want to set. For this I'm going to set the color and opacity as our one g one A B zero, I want some yellow in there.

Font family is going to be our Gothic letters. And I'm going to set the size to be 35. I am going to have an outline for this. So outline size we'll set that to two. So we got a little bit of a black outline around our yellow text there that's looking pretty spiffy there. And some shadow offset Sure why not let's go shadow offset of two in the X in the world.

And of course, to make the shadow appear, I've got to set this alpha value here, there's a value to be one, and that will add a little bit there as well. Also, I want to scroll on down to justification of this, I'm going to set this to middle. So by setting this justification to middle that's gonna ensure that our text is really centered up like we want it to be. Okay, and last we got our electric spark man Acosta like that guy. Let's go ahead and set the text here to be default of 99. Just because that's a good dummy value, right.

Let's set the color and opacity to be yellow as well. So I'm just going to change this B value here to be zero. I'm going to change the font family to be Gothic numbers fonts. The size of this I'm going to set to 40. So you can see kind of what this is. going to look like now let's set some of the padding settings the left padding is going to be set to nine.

The bottom padding is going to be set to 20. But I also want to set our vertical alignment here to be the bottom so that's going to nudge it down here to the bottom and then down in our appearance section to I'm going to set the justification for this to be boom smack dab in the middle is that not what I wanted to do? Let me just double check that yes middle here as well even though like I had it not set to middle middle here as well but also at the top. I want to set the horizontal alignment to be middle in the middle of the slot. Okay, I do want to set some more settings for this for the outline I'm gonna set an outline size of two. That is going to be black and the shadow offset for this I am going to set to be two into The alpha value, we got to set that to one to make that shadow actually show up.

That's looking pretty nice. Okay, so if I zoom on back, you can see what this slot is going to look like. So now what I'm going to do is give myself some room here, I'm going to right click and select this electrical spark overlay. I'm going to right click it, I'm going to copy it and then I'm going to come up to my Grid Panel and I'm going to paste it once. I'm going to paste it twice and I'm going to paste it a third time because we're essentially going to be duplicating this for our different skills or fireball and our blood loss and arctic blast, etc. Okay, so before we get started here, I'm just going to send you on a naming convention crusade here because I'm going to pause video just a little bit, but I'm going to let you know which overlays should be which so down from electro spark overlay this next one Down, I'm going to name this to be fireball underscore overlay.

This next one down, I'm going to hit f2 on this is going to be blood lust underscore overlay overlay. And then this last one I'm going to hit f2 on and this is going to be arc dick. Blast underscore overlay. Okay, so now I'm going to pause the video here while I go about renaming each of these widgets in a similar naming convention to how I named my electro spark widgets. So seeing a little bit pausing now. Okay, and we are back now I think I've got everything named appropriately along the left hand side here.

If you weren't sure what you were supposed to name everything you can pause the video here and see how I named everything. So what we've done got now is four different overlays, but they're all occupying the exact same slot the exact same row and column. So I want electro spark here, but I want to move these other three. So I'm gonna select my fireball overlay. And I'm gonna set the new row for this to be two but the new column for this to be forced This is going to live over on the right hand side here, our bloodless overlay. Let's select that.

Next, I'm going to set the roll for this guy to be zero but the column to be two. That's going to be our top most one. This is not perfectly kind of centered above my arrows here. So all I'm gonna do, I'm just gonna nudge this on over a little bit. I'm gonna set my x nudge to negative five. That's just gonna kind of snug it up a little bit more in my in precise vision to be directly above our arrow right here.

Let's select our arctic blast overlay. Here I'm going to set the row for this one To be four. Let me zoom on back so you can see what I'm doing. And the column will be to adhere to, I'm just going to nudge the x over to negative five just to slightly bump it on over. Alright guys, that is looking pretty good. We're not quite done yet.

There's still a little bit of fix ups I want to do over with these HUD widgets that are going to populate this black magic menu as well. But for the purposes of this video, we are finished. So let's go ahead and Compile and Save. That'll do it all for this one guys. See you in the next one.