Welcome back everyone. In this video we are going to continue with our HUD layout specifically, we are going to add a display to our HUD. And if you don't recall where we left off in the last video, I am right here in our content Metroidvania widgets folder. W BP HUD was the name of the Widget Blueprint asset that we were working within. So double click on this guy to open it up. Now why are we going to be displaying some manna information on our screen?

Well, because we're going to have some special skills that our character is going to be able to use later on in this project that are going to consume some man things like shooting a fireball. Things like turning into Miss we're going to require some manna for that. So to do this, I am going to start off with adding in image widgets. And I'm going to simply drag and drop this onto our canvas panel. In this first one, I'm going to hit f2 one and I'm going to rename this Manoj underscore base. And I think my approach this time is going to be a little bit different than last time, I'm going to add all of the widgets first and then I'm going to go back and set its details.

So you're going to see a cluster of widgets, occupying the left hand corner of the screen for the time being, but don't worry, we'll go back and fix it. The next widget that I'm going to add is an overlay widget. I'm going to drag and drop this one. Also on top of the canvas panel. This one is going to be called f2 or not f2. I'm going to hit f2 to call it a Manoj underscore overlay.

And now I want to attach some widgets to this manner overlay. Now, if I hover over this overlay widget up in our palette panel right here gives us a little tooltip that says this allows widgets to be stacked on top of each other uses simple flow layout for content on each layer, which is going to be what we want because we're going to include a background a meter and a numerical value within this overlay. So, next one I'm going to be looking for is an image. So I'm going to drag and drop this not on the canvas panel but on our manage overlay. And I'm going to call this hitting f2 on it. Manoj underscore background.

Next thing I'm going to be looking for is a progress bar widget. I'm going to drag and drop this on top of our man overlay. attaching it to it. This one is going to be called manna underscore meter. And then we're going to add one more we're going to add a text widget. We're going to drag and drop this on top of manner overlay.

And I'm gonna hit f2 on this and call this Amana underscore current. And with all those added, we can set some details for the use. So let's select our mana base first. And with that one selected, we're going to come over to the upper right for our details, our anchor for this is we're going to set this to the upper right corner of our screen. Now, these anchors, what they do is they set the position relative to the anchor. So right now you can see that our widget is way over here on the left hand side, but our anchor is over in the upper right hand corner.

So it is showing that our x position is that negative 1900 and 21 inch change relative to our anchor point. So with our anchor point set to our upper right, we're going to set our position x to be negative 316. And then I'm going to set our position y here to be 20 positive Why's the downward direction and negative y is going to be the up direction. And for the size of this I'm going to set the size x to be 120 in the size y I will set to be 100. Now for the image for this I do have one that we haven't imported, so come under appearance brush. going to left click hold down, left click come under my search bar and then I'm going to do a search for t underscore Manoj underscore base.

It's gonna look like a little orb holder there. Now something else that this anchor points does for us is that if we were to compile, save and jump in and play here, now you can see once this does actually decide to play for me. Now if I was to do shift in F one slide, I could get my mouse cursor here and resize my viewport window here, you can see how it's going to keep that particular man a holder there, that little orb in the upper right hand portion of the screen. Okay, so that's what anchoring also does for you is depending on how you try to resize your screen, it's going to try to keep it locked into that portion of the screen. Let's get the details for the rest of these guys knocked out. So let's select our map overlay and we will also set the anchor for this to be the upper right, the position x I'm going to set that to be negative 295.

The position y I'm going to set to be eight. The size x I'm going to set to be 80 as well as the size y that's going to be pretty good there for now. Next one I'm going to select is our man up background and What do we got here? We're going to be fine with our padding settings right here in our horizontal and vertical alignments. However, down in the appearance section underneath the brush area, here we are going to left click hold down left click release, left click and I'm going to do a search for t underscore Manoj we're looking for this T underscore man up background. There we go.

Size here should say 1024 by 1024. Next we're going to select our Amana meter here. details for this will read as follows. Let's set our horizontal alignment to be all the way filled horizontally. You can see how that's going to spread this all the way across like so. And our vertical alignment.

We're going to do vertical align fill as well and you're going to see how that fills this all up. For the style settings, we are going to set this Dial tint, a value that is the alpha value to be zero meaning we can see all the way through it, it's completely transparent. And we're going to leave that as it is for right now. We are going to set the fill image down below where it says fill image image left click hold down, left click release, left click. And here we're going to do a search for t underscore manna orb. Okay.

And then down below in the progress area. It shows percent of zero. I'm going to set this to be one for the time being and you can see that it fills in our orb image right there. We are going to bind this to a variable eventually Now it also says a bar fill type left to right, I do want to change that to be bottom to top so that when this value does change, it's gonna go like this. And let me see is that all we got there, I actually I can see there's some things off here a little bit, but we'll look to fix that all up in just a moment. Let's continue on though to our Amana current text block here.

And here, I'm going to come up under the padding settings. I'm going to click this little drop down arrow and where it says left padding, I'm going to set that to be two top padding I'm going to set this to be five and the bottom padding I'm going to set this to be 10 horses horizontal alignment, I'm gonna set this to middle as well as the vertical alignment and the tech I'm just going to put in a placeholder value of 99. Because eventually, we're going to bind this to a variable as well but not just yet. Down in the appearance section, I'm going to change this B value here to be zero because I want a straight yellow color, you can modify that as you see fit. And the font family here. I'm gonna change this to be Gothic numbers.

Like so. Font Size, I'm gonna make this be 40. So that's gonna pretty much fill up our orb area here. Coming down below a little bit more outline settings. I'm going to set this to outline size of two to put a little bit of a black stroke around our numbers. And let's see shadow color shadow offset.

Let's do shadow offset of two in the X and two in the y and for the shadow color. We do have strings Rate black although we need to make this a value be one so that we can actually see a little bit more of a black shadow. One last thing I want to fix up before we put a wrap on this video is I'm not happy with that or back there. I want to double check our settings for that. So I'm going to check our Manta meter which is using this T Manoj orb and right now we are drawing it as a box which is not what I want. I want to select this right here under fill image draw as I'm going to change this over to an image that is more of the shape that we're looking for right there.

So this looks much nicer let's Compile and Save here and now we've got a man display on our HUD so if we jump in and play you can see things are starting to shape up. Okay. Can I escape out of here for now guys, that is gonna do it all for this one. We've got some more work to do on the HUD upcoming but we are getting there. See you in The next video