Welcome back.
So now that we've created the world's cutest little dungeon, we're going to start working on the next
major section of the course.
Now, don't worry.
This is not the final and only level.
We'll do more with levels as we go, but our game is ready to start incorporating some more RPG elements
to it, such as experience, other spells, and leveling up.
Now in this section, we're going to add more to our HUD as two health globes is nice and they look
good.
But we need more here.
We need at least an XP bar XP being short for experience.
If you aren't familiar with XP, I'll be referring to experience points as XP throughout the rest of
the course.
So we need a game plan and the design that I'd like to go for for our HUD is going to look something
like this.
So I'm going to want my health globes on either side with some little mini globes down here in the middle.
And these will represent the spells that we have equipped and we'll show which inputs they're assigned
to currently.
And here we have a couple of other globes for our passive spells, which we haven't made yet.
But this is something like what I'd like to make now.
The way that I'd like to make this is with a bunch of boxes and I'd like to specify the sizes of those
boxes.
So what I'm going to do is go into my blueprints folder, into UI, and this is going into the overlay.
So I think I'll go into the overlay folder and into sub widgets where we'll have our sub widgets that
will go into the overlay.
So for this widget, I'm going to right click, go to user interface, create a widget blueprint and
choose Aura user widget.
And I'm going to call this WP Health Mana spells.
It's going to have XP in there as well.
But I think Health Mana spells is a good enough name and for the widget, I'm just going to start by
adding a whole bunch of boxes and then we'll fill in those boxes with things.
Now instead of fill screen, I'm going to set this to custom.
And the width is going to be about 1140 1141 and the height is going to be 216.
These are just values that I've found work for me.
And as soon as we drag in some boxes, we'll see that size.
I'm going to start with an overlay.
And call this overlay route.
And now we see the size here.
This is going to be about the size that I like.
And I'm just going to add a whole bunch of boxes.
So I'm going to start with a base box that's going to be a horizontal box.
I'm going to drag that on in.
And the horizontal box is going to be set to fill for horizontal and vertical.
And I'm going to rename this to base box and all the other things will go inside base box.
So I'm going to place a few more boxes in here.
I'll start with three main boxes.
One, two, three.
The first one is going to hold my health globe, so I'm going to call it Health Box.
The second is going to be the central box, so I'll just call it central box and the rightmost box will
be the man box.
Now, these are all going to be set to fill.
So for size up here, I'm going to choose fill for all three.
And by default, they'll fill up as much space as they can.
So I'm going to set a fraction of the size that I'd like them to fill.
I'd like the two outermost boxes to fill up 0.2 and the innermost box, 0.6.
So that's pretty much going to give me the dimensions I want.
Now, inside the central box, we're going to have some more boxes, so we'll need a couple more.
Now they're going to fill in from left to right, but these boxes are going to be vertical boxes.
So the things that go in them will fill in vertically.
So I'm going to drag in one two boxes.
I'm going to set them both to fill.
And the first box is going to hold my offensive spells.
So I'm going to call this one offensive box.
And this one will be for passive spells.
I'm going to call it passive box.
And the offensive box is going to fill most of the space.
I'm going to set the size to fill 0.9 of the space, and the passive box will fill 0.1 10% of the space.
Now the offensive box is going to have some boxes inside of it.
I'm basically going to have a row up on the top for labels and bringing over my plans here.
Here's what I'm talking about.
It's going to be one box here, another central box for the spells and some spacer down there.
So we're going to have three more boxes here.
Now, the topmost box is going to be a vertical box.
This one is going to be above the icons.
So I'm going to call this above icons box and we're going to have the actual icons themselves.
Now, this one is going to be horizontal so we can have the spells laid out horizontally next to each
other.
So this one will be called Spell Icons box, or it could even be spell globes box as they're going to
be globes.
And then finally, we'll have one more box beneath it.
And this will be a spacer box.
So all three of these are going to fill above the icons is going to take up a third of the space.
So I'm going to give it 0.3.
The spell icons themselves are going to take up about half.
I'm going to make it a little less 0.45, and the spacer box is going to take up a third of the space
0.3.
And so we have something like this.
Now, above icons box is going to get two boxes of its own, one that says offensive.
So we know this is offensive spells and then another box beneath it that has all of the input labels.
So I'm going to add two more boxes.
They'll fill up from top to bottom.
So one and two, and this one is going to be offensive text, which sounds like something kind of rude,
but it really is just text that will say offensive literally, and the next box beneath it is going
to be input text.
So it shows the inputs.
So offensive text can be fill input, text can be fill, but we may set this to auto so that the top
part fills as much as it can.
Now spell Globe's box is going to be filled up with globes and Spacer box is going to be empty, so
we'll get to that.
But for now, we have a whole bunch of boxes and we can start putting things in them.
Now the health box can get our health globe widget.
So if we search for WP Health, we can just drag a health globe into here.
And if we choose Phil, it'll be put just about at the right size.
Now, WPP Health Globe should be red.
So let's take a look.
At that widget.
We're going to go to the progress bar and it looks like WP Health Globe actually has blue by default.
So let's search for globe properties and we can change that progress bar brush.
To my health globe.
So that looks good.
And I think I just like the percent on my globes to be 100% by default.
So they look full.
So I'm going to go ahead and get my progress bar globe and set the percent all the way up for that.
Same for the ghost as well and compile that.
And now our health globe looks better.
And here in our widget it looks really nice.
Now I'd like my mana globe in here as well, so I'm going to go ahead and drag one of those in and set
it to fill as well.
Like so.
Okay, So this is a great start.
Now, while I'm at it here, I could just put some text in the offensive text box, so I'm going to
search for text and drag it on in here.
And for this text, I'm going to set horizontal alignment to center and vertical alignment to the bottom
clicking on fill and I'm going to change the font to Amaranth regular change the size to 14.
I'd like a different color and opacity.
A color that I like is 0.649028 for red 0.338234 for blue.
And actually that last number was green.
Red should be just one.
I'm going to use this color for my text and I'm going to give it an outline size of one.
So it has the outline there and I'm going to set some text for it.
It's going to say offensive.
And we'll have passive right here.
So my passive box can itself have a couple of boxes.
So I'm just going to grab a couple more vertical boxes and drag them in here just to for now.
And I'll call the top one.
Passive text and the bottom one.
Passive boxes.
Passive text and passive boxes can both be set to fill and passive text will take up 20%.
So it'll take 0.2 here.
This one gets 0.8 and I'll put some text.
I'm actually going to copy the offensive text and paste it here and call it passive text or text underscore
passive.
How about that?
Offensive can be text underscore offensive.
And I'm going to change the passive text to say passive and look at that.
It barely fits.
And I'm going to set it to fill horizontally and vertically.
And set its justification to center.
Actually, that doesn't look quite right.
So I'm going to set it to vertical alignment to bottom, and we'll just keep horizontal alignment to
center.
Okay.
So that's looking pretty good.
And what we need now are some globes to show all of our different spells.
So I'm going to go ahead and collapse a lot of these boxes as this can get quite overwhelming.
And right here, our input text, I'd actually like to just put the inputs here evenly spaced out.
So once again, I'm just going to fill this in with a bunch of boxes.
They can be horizontal or vertical and I'm going to have six of them here.
So one, two.
Three, four.
Five and six and selecting all of them.
I'm going to select Fill.
And these are going to each contain text.
I'm not going to bother renaming any of them.
I'm just going to drag in some text.
And since I kind of want the same font, I'm going to just copy one of these Offensive is fine and select
one of the boxes and paste it in.
The difference is I'd like the font color to be white, but other than that, we have some text.
Now this one is going to say Lmdb.
So there's our left mouse button input and I'll just call it text underscore lmdb and I'm going to copy
it into each of these boxes.
And all I need to do is change the text for each of them.
This one will be R and B we'll show our right mouse button spell there, followed by one.
To.
Three and four.
Looks like they're named automatically.
Almost perfectly.
They just have a lab in their names.
I'll go ahead and rename them to text one, text two, and so on.
And it actually looks like this one is named five.
So just really quickly, I'm going to rename them properly.
Okay, so now we have the numbers and we really just want boxes for each of our spells.
Now, yes, you could just put the widgets in there.
You don't really have to organize them this much with boxes.
With this particular widget, I just decided to map everything out with boxes.
This is another way to do it, but it's a little more meticulous.
But we have our spell globes box and the spell globes box can really just have a bunch of boxes inside
of it, each of which can contain one of our little globes that can show our spells.
So I'm going to just put six boxes in here.
They can be vertical or horizontal, so I'm going to just place them in here and set them all to fill.
I'm going to call this first one spell box, underscore LMB.
I'm going to drag in another one and call it spell box R&B.
And another one called spell box one.
And then I'll have to through four.
So I'll go ahead and just quickly rename these.
There we go.
And now I can take all of these boxes and set them all to fill.
Like so and now they're just waiting for those globe widgets.
And the last thing here is a couple boxes in the passive boxes box.
This is a vertical box.
So we can place a couple boxes in here.
I'll just really quickly place those in here.
I'll just do one, two, and three and call this passive box one.
Passive box to.
And we'll do a passive box spacer.
And get these all filled and we'll just make the bottom one fill less.
We'll put it at 0.6 and leave the others at one, and they should be relatively square.
So now we have lots of boxes and these are just dying to have widgets put in them.
So next we need a nice globe widget for spell icons in our HUD.
So we'll continue with that in the next video.
Excellent job for now.
Make sure to save all that work as this was pretty tedious, but we now have set up a widget that can
show a lot more information in our HUD.
So excellent job and I'll see you in the next video.