Welcome back everybody in this video, we will begin to lay out our initial HUD here we just want to display our player portrait and our playerhealth. Laying out our HUD here in full is going to encompass a few videos. So we're just going to start shipping it off little bit by little bit. And to do so you need to come into your content Metroidvania widgets folder and double click on your W BP HUD asset. So what you see in front of you is the layout where we are going to start laying out some of these widgets from our palette onto our screen, if you will here. So this is what we're going to do.

We're going to add some widgets into our layout or hierarchy first, and then we're going to set some details for each. So the first one we're going to add over in our palette here is we're going to add an image and you can add it to by left clicking and dragging right here onto your canvas panel surface, or you can attach it right down here into your hierarchy. So I do want this attached to my canvas panel like so. So I'm just going to drag and drop it right there. And I'm going to f2 on this one f2 to rename it, and I'm gonna call this portrait underscore background. And you know what, while I'm doing this, how about I said some details for each of these right away so you can kind of see what they're gonna look like.

So, with this selected, I'm gonna go over into my Details panel over on the right hand side and I'm going to set an anchor for this to be this upper left square that's going to up anchor to the upper left hand portion of my screen. Okay, with that said, I do have some positional settings in mind, I'm going to set this to be negative 35 in the x, the y position is going to be negative 15. D, the size of this is going to be 350 in the X and 315 in the y. And the image that I'm going to use for this, I have to expand some triangles out here where there's this little brush, option gonna click on that little down arrow, and here's where I can slot in an actual image. And if I click right here, this drop down, I can do it.

This is a weird behavior with it. If you just simply click the drop down, it's going to bring on this save asset. But if you click and then hold down your left click and come under the Browse option right here. You can then do a search for t underscore, portraits, underscore backgrounds. What you're looking for, is this black and pink sort of a scrubbing right there. It looks kind of cool, right?

And that's all we want. Want to set for that one. Next, we are going to add a nother image. So I'm going to drag and drop this on top of our canvas panel because I want to attach it to our canvas panel which is this, basically this blue rectangular area right here. I'm going to select it hit f2. And I'm going to call this our health underscore background like so.

And with that selected, I'm going to have to flip over my page of notes here. I'm going to come over to the Details panel, the anchor for this is going to be the upper left. The position x is going to be 210. The position y 33. size x we're going to set this to be 450. And the size y is going to be 50 And the image for this we are going to use again you got to hold down left click here and then release when you get to this search area, I think that's a little bit of an annoying behavior. I'm going to look for t underscore ink black, that's the one we're looking for.

So the texture looked kind of squished before but when we give it this size over in our Details panel, it kind of stretches it out. z order this is basically the order of widgets as when they are overlapping one another which one should be on top, which one should be on the bottom. So if you hover over the Zohar here as people like to say that z order, it says higher values are rendered last so they will appear on top now I am going to be adding several widgets here and I do want some to appear on top of the others. I'm going to set this to one even though it is already on top of my portrait background. I'm going to set that to be one. And Next I am going to add a health meter.

And this is going to be done by adding this progress bar widget. So left click, drag this on top of our canvas panel release. Let's select it hit f2 to give it a name, and we will call this health underscore meter. This is going to be used to represent our player's health. The details for this guy once again flipping over my page of notes. We're going to anchor this to the upper left hand portion of the screen.

The position x we're going to set to be 230. The position why 47 the sighs x is going to be 390. The size y is going to be 20. And the Z order for this I'm going to set to be two and I'm going to set let's see style style style. I'm going to select this little drop down. We're going to select our background image, and then we're going to go to tint and currently we've got style background image, which is kind of this gray color tint white right here.

Let's set this a value to be zero. So you can see that blanks it out now and coming down a little bit lower. Below that we've got the style background image, fill image is what we're looking For now, select that guy. And for the image for this, we're going to select. And again, if you just click it, you'll get that little pop up. So select hold down your left click and then release in the search bar, I'm going to do a search for t underscore, Inc. underscore pink.

Now you don't see anything yet because down below we need to set our progress bar percentage it's currently at zero percent. Let's set this to be one. And right now it's set to have this fill color of blue. We're going to change that in just a little bit here. And it says bar fill type left to right. So you can actually left click and drag on this and kind of move this left to right so you can see that as our health decreases, it's gonna kind of come down to the left and then when we it increases it can fill up to the right like so.

Okay, Down here where there's this appearance, fill color and opacity. I'm going to change this out to be let's go kind of that hot pink color like that. And that looks pretty good. So again, the idea here is we added this background, this health background, so that we would kind of make this pink stand out a little bit more sort of like have a border to it. So that was the idea there. Eventually, selecting our health meter, we're going to bind a variable to this percent value so that we can actually drive the meter to go lower or higher as we see fit.

Okay, so with that, we're done. We got a couple more widgets, we're going to add here, let's add a another image. Let's select this left click and drag on top of our canvas panel. Then I'm going to select it. Do too and we will call this one portrait. portrait and apparently cannot spell today portrait underscore pic.

And as you can guess this is going to be our Countess picture. So with this one selected again gonna come over to the Details panel we're going to set the anchor to be that same upper left our position x, we're going to set to be 90, our position y is going to be 10 the size x will be one is 75 and the size y is going to be 175. And the Z order for this you can see it's right now this is an example of what z order can do. It's currently behind our two different meters here our actual meter meter and then our health background that black border. So if I set our z order here to be three which is a greater number it will now Draw our portrait pic on top of all that which is what I want for this. And down here in the appearance section under the brush image.

I'm going to left click hold down left click release, left click and do a search for t underscore portraits pic and there is our Countess picture that's pretty good. Then last but not least, we're going to add one more before wrapping up this video. We're going to add a text widget not a text box but a text widget. Go ahead and drag and drop this on top of our can this panel. We're going to select it f2 to change its name and I'm going to call this health underscore current. And of course we've got some details that we want to start with This will come over to the Details panel, the anchor is going to be the upper left square that you saw with all the others, then the position x is going to be 248.

The position y is going to be 40. The size x is going to be 100, the size y we will leave at 30. Actually, you know what we're not going to set a size x and size y. In fact, you can zero both of these out because we are going to size to content click this box right here. And currently, you're not going to see anything yet. You're not going to see how this affects things.

But you will in just a moment here. I'm going to set our text here to be 100. And of course, you can't see our text yet because it is the Z order of zero which means it's going to be drawing behind these other items. So I'm going to set that To be three, that'll draw it on top. Then down below in our appearance section, I am going to click under color and opacity. I'm going to set our b value here to be zero, make it kind of yellow.

And our font here, gonna click this open, and I'm going to set our font to be, let's do the Gothic numbers font right there. And I'm going to set the typeface font size to be 40. Not 10, not 1040, like so. So that's a little bit bigger there. So you can see with the size the content, um, if I was to uncheck this, I would then basically have my size of my whole widget shrunk very badly and then it becomes Very hard to select it. So with the size the content, it will wrap the boundaries around this to make it really easy to click and move if you so want.

So I'm just going to set that back to the hard coded values that I had position x 248. Position y 40. Now one thing I noticed that could help this text out a little bit is it could possibly use a border, an outline, if you will. So let's come under our appearance section right here and we've got some outline settings right here. Let's try and outline size of one for right now something very thin, very subtle. Our outline color is currently set to black.

And you know what one is a little bit too small. Let's try three, maybe something a little bit thicker threes probably pretty good. So eventually we're going to bind this number our value 100 to a health value. So 100 is just By default, as a placeholder, guys that is going to do it all for this section of laying out our HUD, what we can do now is Compile and Save. And if you remember right from the previous video, in our framework blueprint, that we created our Nv HUD, we were actually creating some script to create our widget and add it to the viewport. Well, now that we've actually added a little bit of HUD, I should be able to click play.

And now you see our HUD up there in the upper left. So there's plenty more work to be done yet, but we're off to a great start. So let's keep the momentum rolling, guys. We'll see you in the next video.