Original subtitles

Our goal over the next couple of videos will be making the health UI for the player.

However, in order to do that, we first need to build up a basic understanding about how widgets and

UI work in Unreal Engine.

In my other course, some people ask me to show how to make a main menu.

However, I believe that is too big of a side tangent and would take many hours to cover correctly.

And that is not the point of this course, and also not of the other course, but the basic UI knowledge

you're going to gain over the next couple of lessons is going to put you in the right direction, and

you can then figure out the rest for yourself if you want to make a main menu.

Before making the health system, let's just start out by showing some text on the screen.

Go to the content drawer, go to content and here right click make a new folder and just called widgets.

And widgets is just the name that Unreal Engine uses for their UI elements.

First we want to create our overarching HUD widget, which is going to cover the entire screen, and

we can then put child widgets inside of it to build out the other small elements.

Just right click here and then go to User Interface.

And here we have the Widget Blueprint.

So just click on this.

And here we can also base this off a certain class.

But we just want to use the basic user widget under common.

Just click on this.

And here we usually call these WB for Widget Blueprint.

And this one is going to be HUD.

Wbhp had.

And then open it up.

And this is something completely new.

You haven't seen before, but we're gonna go through it step by step.

A widget blueprint basically consists of two different parts, and here on the right side we can switch

between the designer, which you see right now, which lets us create how the interface looks, and

the graph, which is very similar to the blueprints we've been using so far.

And this is where we can implement logic.

The events here have a little bit of a different name.

So the event pre-construct is similar to the construct event in the blueprint.

The construct event construct is similar to the begin play in the blueprint and tick is just tick the

same thing.

And here on the left side we also have the functions.

We have macros, variables.

We can kind of do similar things as we did in the player blueprint in all of our other blueprints,

but one difference is that the details panel is here on the bottom left instead of on the right side.

So this is a little bit confusing.

So if you want to set up the default values and things, we have to do it here on the left side.

But it's still the same thing.

We're going to make use of all of this later to pass through how much health the character has, and

then display the health on the UI.

But for now, let's just have a look at the designer and check out how this works.

And this screen is kind of a science in itself.

If you want to really master all of the different elements here and have a deep understanding, it's

going to take you weeks, if not months, and we're only going to cover the basics that we need for

our game and for the overarching HUD.

The first thing we want to look for is a canvas.

And this is just if we drag it here, it's just the basic outline, and the canvas lets us place other

things on top of it.

So we can then put the health bar here, maybe put some text here.

And to all of these kind of things.

And the canvas is the parent that lets us place things in here.

So just for example, we can go in here and maybe drag in a button and you can see we can place it anywhere

we want.

We can drag in an image.

And the image now is this white.

But we could select a brush here on the side and just give it some sort of material like this for example.

Right.

And we have text in here.

So we could just drag in a text block and then write some text, change the size.

And there's a lot of things we can do here with sliders.

And we have progress bars like this.

And there's just many different things you can do with this.

And then style it to actually make it look nice.

But for now, let's just select all of these, hold shift and just hit delete on the keyboard.

And what we want to do is just show some text in the middle of the screen for now, and then actually

have that display in the game, because just making it here is not enough.

We actually have to tell the game to spawn this widget blueprint.

So let's just get a text element, drag it in here in the canvas, and we can then select it.

And here on the right side we have a lot of options and it's a little bit overwhelming.

There's so many options available.

But for now we just want to change the text.

So under content text just write in hello world.

And hit enter.

And you can see if we zoom in here, by the way, right click and drag and the mouse wheel to zoom.

And yeah, we can see that it says Hello world.

But now let's make.

But let's also make the text a little bit bigger because this is very hard to see.

So here again on the right side we should have a font menu here font.

And here we have the font family, the typeface the size.

Let's just blow up the size and maybe go like 150 and we can go even bigger.

So 250 for now.

And this is really big now.

Let's also change the color right.

So for this we can just close this down go to Color and Opacity.

And we can click this one here.

And we can just pick the red color.

Pick any color you like.

And I'm just going to go with red.

And click on okay.

And this is how we can make changes to the text.

One other thing you'll also use often is under font.

We have a outline setting so we can set the outline size to let's say maybe two.

And then you can see we get this black rim around the text which will make it easier visible.

But the biggest problem right now is that our text is anchored.

And you can see this thing here.

This is the anchor to the top left.

And this means no matter what size our screen is, the text will always be hooked into the top left

side.

However, we want to show this text in the middle.

And to do this again we need to just select the text and all the way at the top you can see the anchors,

and here you can see we anchor it to the top left, which it is right now we can anchor it to the middle.

We can also kind of stretch it or go across the entire screen.

So there's a lot of options here that we can use.

And this kind of depends on what you want to do.

But now if we just click on center this alone doesn't really do much.

It is now centered here, but it still isn't aligned with this.

So we actually want to.

And you can also read this here.

Hold shift to update the alignment.

And then hold control to update the position.

So we want to hold shift and control and then click here.

And this is already a lot better but it still isn't perfect.

And the reason this isn't perfect is because it actually only understands this box.

It doesn't really know how big the text is.

So we can drag this box and make sure that it kind of matches the text size roughly.

Like this.

And then we just do the anchoring again, hold shift and control.

And now we are in the middle.

One more thing we could also do is let's say we have this one a little bit bigger.

We can also use the center option.

So here for justification we can also use this one.

Right.

And now we justified inside of this box.

And now we can again just anchor it to the middle.

And we don't have to be as precise.

As far as I know there is no way for justification for top to bottom.

And it only works from left to right.

So for top and bottom, we need to make sure that the box size matches.

Now that we have prepared our heart and the text, we actually want to show it in the game.

Because now if I just start the game, nothing happens.

We actually need to tell it to spawn this HUD.

And now we have to think about where is the best place to spawn this.

And you might think the player is a good option and this is not too bad, but we have to handle the

issue of respawning the player.

So we would have to despawn the HUD widget and spawn a new widget when the player is being respawned.

But actually there is a thing about widgets and they are going to stay in memory until you load a different

stage.

So even if we destroy a widget to create a new one, it's still going to stay in memory.

And I'm not sure if this is a bug or if this is just how Unreal Engine works.

However, this has been a problem for a long time, so the best practice is actually to try to prevent

to despawn these kind of widgets and just make them invisible and then make them visible again if you

need them again and kind of reuse them.

So I believe in this case, the best place to spawn this widget is actually in the game mode.

So let's open up the game action content blueprints GM action.

And here we want to go to Beginplay.

And after we set up the player start this is fine.

We then want to create widget.

And here we just pick the WB hat which we just created in the designer.

And this alone is also not enough.

If I start the game now, still nothing happens.

It is being technically created, but it's not showing.

And for this we have to look for, uh, add to viewport.

And now if we start the game, you can see that it is showing up.

So this is working.

And this is basically how you create a widget, right?

So you create the widget blueprint.

You set something in the designer, and then you think about where is the best place to spawn this.

In many cases, it is going to be the game mode.

In some cases it's going to be the player.

And this is how this works.

And for the owning player we can just get player controller.

And this is just a best practice.

So we can then use the player controller inside of the widget.

The widget knows who it belongs to and we only have one player, so this is fine.

But actually we are going to set a different player reference as well later on.

And just to show you one more cool thing, because we anchored this in the middle, even if we just

start the game now and I resize the window, it is always nicely in the middle.

And this is the strength of using anchors.

And this covers the very basics of UI.

In the next video we're going to design our health UI.