Welcome back, everyone. Last video here for our HUD layout. The goal in this one is to lay out the black magic portion of our HUD. So let's jump right to it. We are within our w BP HUD asset here in our content Metroidvania widgets folder. This is what we've got so far, we're going to be adding some more widgets over here to our hierarchy to represent whatever black magic skill we've got slotted into our right trigger button.

So without further ado, let's bring in an image we're going to do like we did before, we're going to attach some some image some widgets to our hierarchy first, and then we're going to set the details. So let's go ahead and left click, grab our image, we're going to drop this on top of our canvas panel. You're gonna hit f2 on this one, this one's gonna be called B map. For black magic underscores Starburst. We're going to add a another image widget just going to grab this drag and drop it on our canvas panel hit f2 on it and this one is going to be called be magic underscore image. Next one we are going to grab is a border widget going to drag and drop this on our canvas panel.

Hit f2 this is going to be called be magic underscore border. And we're starting to run out a little bit of space here. So just two more to add. We're gonna add a test a text widget next, drag and drop that on your canvas panel. F to be magic underscore manna costs will be the name of this one. And last but not least, we are going to add an image widget.

This tool is going to be added to our canvas panel. gonna hit f2 on this one and this one's gonna be called be magic. move my mouse cursor out of the way there underscore button. So it's a little weird in that this is actually an image widget, but we're naming it button because like we had the L trigger button up over here we're gonna have a button to represent our trigger. Okay, so with all that in place, let's start setting the details. So starting with our A B magic Starburst, make sure that guy is selected.

We are going to anchor this one to the upper right square here. The position for the x is going to be negative 162. The y is going to be 55. The size x is going to be 50 and the size y is going to be 50. So that is going to be our starting First, we need to slot in that image of our Starburst. So under appearance brush, I am going to left click and hold, release left click down in my search bar and I'm going to do a search for t underscore star burst right there, it's gonna look kind of small, but later on, we're going to use this too, as a kind of animation that's gonna spin behind our image holder here to represent whenever we change out whatever magic is slotted in that particular location.

Okay, so next one, let's go select our be magic image over here in our hierarchy. The anchor for this one is also going to be the upper right square there this guy. position x is going to be negative 183. Position y is going to be 31. size x we're going to set to 90 and the size y is going to be 90 as well. We'll set the Z order for To be five and the brush, the appearance brush image is going to be left click and hold, release, left click and this one is going to be magic underscore empty. This sort of black looking empty, empty circle if you will.

Okay, and next one, we are going to select our be magic border down here in our hierarchy. This one too is going to have the anchor point in the upper right corner. And these positional coordinates are relative to that anchor point once again, so position x is going to be negative to 25 relative to that anchor point. And this little flower icon represents our anchor point by the way, position y is going to be negative five sighs x is going to be 160 sighs Why is going to be 160 And our z order here, we're going to set this to be 10 over the top of our Starburst there, or sorry, our be magic image. And then for our appearance brush, we're going to left click hold, release, left click in here, we're going to do a search for t underscore black magic. This is kind of the the holder if you will, the asset that's going to serve as the frame for our black magic image.

Okay, we do want to make sure that we draw this as an image, which it is, so this is all looking good. Next one, we only got a couple more of these and we can put a wrap on our HUD here. So our B Magic Man Acosta like that guy. Anchor Point as you would expect by now upper right? position x relative to that anchor point is going to be negative one to 60 position wise 96 the size x 50 size y 50 the Z order you can see it's behind things. So let's bring that to the top by putting it at 15.

That'll put it to the top of the stack. I'm going to set our text here, this is gonna be a placeholder value, I'm just gonna set it to 99 for now, eventually we are going to bind this to a variable. I do want the color of this to be yellow. So I'm going to set the be the blue value here to be zero under the appearance section. The font family is going to be our Gothic numbers. size will be a little bit bigger we'll set it to 25.

We do have some outline settings here as well. The outline size is going to be two. We're going to leave it at a black color here. The a as one is going To make it so that shows if you set this to zero, that outline is not going to show. So make sure the outline color a is one. That's the alpha value how transparent or opaque it is.

Shadow offset here, we're gonna set that to two in the x and the y and you currently don't see any shadowing to this until you set the shadow color a the alpha value to be one, like so. Lastly, I'm going to set the justification here. As you see it's a little bit over to the left. Let's set that to be a little bit more to the middle. And maybe that's not centered perfectly, but I'm going to say good enough for now. Sorry, we do have one more widget here.

That is our be magic button widget. So make sure you select that guy. As you may expect. This is going to be anchored in the upper right corner. position x is going to be negative 65 Position y we got 45. size x is going to be 65. Size y is 60.

We're going to give us a z order of 15. Even though it's not really going to be touching this too much, just as kind of a precaution in case it does intrude on it a little bit, and our brush image here, I'm going to left click and hold left click release. And t underscore our trigger oh one is the one we are looking for here. Now I actually am going to give this a little bit of a tint here. You don't have to do this and maybe this doesn't look good. You can see I've kind of got a white frame here to indicate white magic and I kind of keep this button looking white as well.

And I've kind of got this dark color for black magic as well as it's kind of this hot pink color. I'm just going to colorize this button a little bit too. Totally your choice here but I'm going to set the G value here under the tent, not the color and opacity the tent, it was at the G value to be point 05. And the B value is going to be point five and that's basically going to give it a pinkish color hot pink that kind of matches this side of our Manoj equation. So that is pretty well going to do it for our HUD. Let's Compile and Save and play and see what this looks like.

Lot of work done over the course of four videos here. So you can see how this all kind of looks on our screen. And I'm just going to hold down shift and then do f1. And if I do that, my mouse cursor will appear on screen so I can kind of resize this window and you can see that our manna objects right up here in the upper right, they're staying anchored to that upper right hand portion of the screen, whereas this health and character info up over here is staying anchored to the leftmost portion of the screen. So as you kind of resize it, it'll try to keep those things in their respective corners. But guys, that is looking pretty good.

So job well done. We have a HUD layout all together. Now we just need to bind some of these various widgets to some variables. That is upcoming. We will see you guys in the next video.