Original subtitles

In this video, we're going to design our health UI.

And to do that we're going to use a free asset pack by Kenny, which has a CC0 license, which again

means you can do whatever you want with it, pretty much.

But we're not going to use all of these different things.

So I made a repack, which only has the assets we're going to use to avoid confusion.

So please make sure to download that from the resources link.

After you've downloaded it you should have this health UI zip.

Again, just make sure to unzip it.

This UI might be different for you.

And in here we then have the license, right?

Is the CC0 license.

It tells you what you can do with it.

In the textures folder we just have these three different things.

So we have the glass panel which is going to be the background.

We have the square green which we use.

If we do have the health and we have this shadow square, if the health is depleted back in Unreal Engine,

go to the content drawer, go to content and we can go to paper assets.

These are technically not paper assets, but I still like to keep them in here.

And we can just create a new folder and call it UI.

And here we then just want to drag these three textures in.

Just select these three and drag them into Unreal Engine.

Like this.

And again, if you have problems with dragging, you can use the import button instead.

Since these are UI elements, we do not want to apply paper 2D texture settings because this is for

pixel art.

This is for paper 2D assets, but we do want to change some other settings.

So we can just select all of them, hold shift and right click.

And again asset actions edit selection in Property Matrix.

And there's just a couple of settings we want to set up here for UI elements.

And here make sure to select all of them.

Control A and we want to look on the right side for compression.

Compression.

And here we have the compression settings we want to set this to.

User interface 2D because these are UI elements.

And we also want to set the texture group.

The level of detail texture group.

And we want to set this to user interface UI.

And those are the two basic settings you need for UI elements.

And then just save.

And we can now safely use these.

And now we can just close all of these things to the right and close these.

And here we can see these look a little bit different now.

Right.

So these look fine.

And we can use them now.

Now let's create a blueprint for the health component.

So in the content drawer go to Content Widgets right click.

And in this case we don't have a direct parent and child relationship.

But we're going to create another widget and just put it inside of here right.

So just create a new widget right click user interface.

And here we have a widget blueprint.

Use the user widget and call it WB health component.

And open it up.

And in here, let's just look at the designer first.

We're not going to worry about the actual functionality.

This video.

We only want to make it look nice.

And to get started, you might think that we want to use a canvas again, which would be an option.

However, you actually want to keep canvas panels to a minimum for the overall UI.

It made sense, but canvases are actually surprisingly heavy to render because they all cause a new

draw call.

And now we just get into optimization.

I don't want to go into too much detail here, but you want to keep canvases to a minimal.

It's not the worst thing in the world, but if we have another option, we want to use something else.

And in this case, let's just get rid of the canvas panel, delete it.

And in this case, the best thing actually is a border.

So we can just drag this in here.

And on first glance it looks similar.

But a border basically is just a box which can have some content inside of it.

And this is really good for buttons and things like that, or also for this kind of border we want to

have around the health bar.

And now we just have this white color.

But for this brush on the right side, we actually want to use our image.

So here we can go in here and we can look for glass.

Glass.

Panel, I think.

Yes.

So the textured glass panel and we can use this here.

And by default it looks very bad because it's being stretched.

We actually want to cut it up and kind of use these different parts on it instead of stretching it.

And this is actually very easy.

We just have to click here on draw S and instead of image draw S box.

And we then also have to set a margin.

So for the margin we can just set maybe 0.1.

And let's zoom in a little bit.

And you can see it's a lot clearer now.

Right.

So it kind of cuts up this image into multiple parts.

And then just reuses these to create this nice box that looks very high definition.

And yeah I think 0.1 is about right.

Let's see what happens if we do 0.5 for example.

And not much changes.

But yeah 0.1 is enough.

So we get the border here.

And now we want to add text and images in here.

One problem with the border, though, is that let's say we want to add text like this.

This is fine, but we also want to add an image.

We actually can't because the border can only have a single child.

And with these elements, there's a lot of restrictions like this where you can only have a certain

amount of children and only certain things fit into other things, and we cannot put an image and a

text inside of the border at the same time.

So we have to use something else.

Let's just delete the text for now.

And here we can look for panel.

And in here we have a lot of different options.

And panels kind of are like a parent where we can put multiple things inside in most cases.

In this case, we want to have one thing at the top and then have multiple images at the bottom.

So in this case, a vertical box is actually what makes the most sense, right.

So this lets us put a thing on top and a thing below it.

So we can just put this in here.

Nothing really changes so far.

But what we can do now is we can get the text, put it in the vertical box, and we can get the image

and put it in the vertical box as well.

Right.

And now you can see one thing is above the other.

And this still looks very bad.

We still have to work on this.

But this is the basic setup we need.

For now let's just select the image.

And instead of the brush of nothing, we want to look for our square.

I think it's called green square.

Yeah.

Square green the texture selected.

And this is the icon we want to use.

But again it is being stretched.

This is not ideal yet.

The truth is that the way things are being displayed here doesn't necessarily mean it's going to look

in the game the same way.

We actually have an option here on the right side which says fill screen.

So this is just simulating if we fill the entire screen with this widget.

So actually we can just go here and click on desired.

And you can see that it becomes much smaller.

So in this case desired just shows that the biggest part will kind of understand what is inside of it

and only uses up as little space as is necessary.

However, in your game, this again will depend on where you put this widget in.

Let's first update the text.

So for the text we just want to call it health.

And to make it easier to see, just give it a little outline.

So under the font outline settings just give it a one pixel outline.

And now it's just easier to read.

We also want to have a little bit more of a gap between the image, the text, and the outside border

of the box.

And to do that, we can just go to the vertical box.

And at the top we have the padding settings here.

And here we can just open this up.

We have left top right bottom.

And I just want to use 16 for left and right and ten for top and bottom.

And if I hit enter you can see that we now have this nice padding here around our content.

And if you are familiar with the web design and CSS, this is a little bit of a similar concept.

Next we want to make this square image smaller.

So we can just select it.

And you can see now horizontal alignment and vertical alignment are both being stretched.

So for the horizontal alignment we can just select this left align.

And you can see that we don't have this crazy stretching anymore.

But the size is still a bit off.

It is not the correct size of the texture.

If we open up the texture in the content drawer, content, paper, assets UI and this square green,

if we just hover, you can see it says dimension 19 by 26.

So this is the actual size and we want to apply this as well.

So in here if we go here to the image we can set the image size.

There is an option here right image size.

And here we can just put in the value we just read.

Right.

So here this um 19 by 26.

So here X is 19.

And why is 26?

And this is the correct image size now.

So we don't have any stretching.

This is how it is being drawn in the texture.

But now we still have a problem.

We cannot have multiple of these health images next to each other, right?

So even if I go here and duplicate, it is going to be at the bottom.

But these we do want to have next to each other.

So this one I can just delete again.

And for this we want to use a horizontal box.

So here in the panel we can look for the horizontal box.

And I want to drag this in here below the health.

And now the horizontal box by itself doesn't do anything.

We want to grab the image and put it inside the horizontal box.

Right.

And now you can see it is inside of this box.

I can just go here to the image and I can just duplicate or hit control and D right.

So we have 3456789 ten because we have ten health.

And now we have these ten images next to each other.

And you can see that the border actually expanded to accommodate for the new size of the content.

But now all of these are kind of close together, which doesn't look great.

We actually want to have a little bit of a padding in between all of these.

And there's multiple ways you could do this.

There's spacers and all of these things in CSS.

In web design, it would actually be very easy.

And you would just have to set the gap to maybe three pixels.

However, I believe we don't have a setting like this.

So the way that I'm going to use is to go to the first image.

And here we have padding and padding.

Right.

I just want to set this to three.

Right.

And now we can see we get this little nice padding here.

And now all of the other images.

I'm just going to delete them and use the first one control D to duplicate.

And again just make 2345678.

910.

And on the last one we don't need the padding.

So this one we can just reset to zero.

And now we have this nice padding between all of them.

And we did this in a very simple manner without overthinking it and having to use spacers and all of

these things.

Now that the look for the health UI is completed, let's add it to our HUD.

So we can just go here and open up the content widgets, the WB HUD.

Open it up.

And now we can just get rid of this text.

This was just for testing.

Just get rid of it.

Delete it.

And here we can now look for the WB.

And we can see our health component.

So we can have one widget inside of another one which is very powerful.

So we can just use this, put it in the canvas panel and you can't really see it.

We actually have to go here compile and save.

And here also compile and save so that it shows up properly.

And you can see that something is off the health text and the images look fine, but the border looks

really weird.

And this is because the canvas applies kind of its own rules to all of the children.

Right.

So you can see this box here.

We can just drag this box and make it matching.

Right.

And this is fine.

But there is actually a better option built into the canvas.

And we can simply look for size to content and click here.

And now we have it kind of the same size as here with the desired right.

Because now it's going to respect the content and it's going to change the size depending on how much

health we have in here, how long the text is.

And this is usually the best option if you're adding something to a canvas.

In this case, anchoring to the top left is fine, right?

We want the health to always be on the top left.

This is good, but we want to have a little bit of padding because now we're just right in the corner,

which isn't great because again, the canvas panel slot gives us a lot of options here.

We can just go position X 50.

And position y also go 50.

And now we have this nice padding here to the corner.

And this is it.

Let's check it out inside of the game I start the game and you can see the health at the top left right.

So this is working.

The health is being displayed.

But you can see that if I take damage we aren't really updating the health yet.

We still have the ten health bars even though we are taking damage.

So this is what we're going to do in the next video.