All language subtitles for 003 Making the Health UI Functional[UdemyIran.Com]

In the last video.

We designed the health UI, but it still isn't functional, right?

If we get hit, it still doesn't deplete.

So that's what we're going to do now.

And to do this, we want to go to the widget blueprint for the health component and go inside of the

graph.

And in here.

We just want to try this out on construction first.

Just try to deplete all of the health first.

And once you have that working, we're going to hook it into the actual blueprints that tell us when

the player got hit.

The problem right now is, though, that we cannot access anything from the designer in our graph.

We actually need to mark these things as variables so that Unreal Engine knows that we want to change

them in the graph.

The thing we need now is the horizontal box, and we can actually just change the name to make it more

obvious.

And this is going to be the health box.

And here you can see the is variable.

And we just have to check this and compile and save.

And now if we go to the graph you can see here on the left side under variables we have access to the

health box.

And we can just drag it out here.

And first we just want to grab all of the images inside of the health box and change them from the green

image to the shadow image.

And let's just use the event construct for testing this.

So if this widget is being instantiated, this is going to fire off.

And we can just use this for testing.

So here we can just get all children from the panel and we can just loop over them.

So just for each and have a for each loop and connect the event construct to this.

And for now we can just print string so we know what is happening here.

Just print string and print the array element.

And if we start the game now, you can see that we are just printing all of the images.

And this shows us that we can get access to all of these, and we can then also make changes to the

properties here on the right, but actually to be able to make changes, we, for example, cannot just

call set brush here because we need to cast this because it doesn't really know that the children of

the healthbox are images.

It could just be any type of panel widget.

So here we want to cast two image.

Like this.

And from the loop body connect here and now here we can just set brush from texture.

And now we can just select the texture.

And here I just want to look for square.

And we have the green square.

But now I just want to set everything to the shadow square which is what we use if the health is being

depleted and compile save.

And now let's have a look.

I start the game and you can see all of the health is depleted.

But we cast everything to image here, which is fine on constructor.

But when we actually want to use the set brush from texture, we don't want to cast this again and again

and again every single time.

So we actually want to create a new array with the already casted images.

So instead of just calling set brush from texture here we just get rid of this.

Actually we can just hold alt click here and just drag it down for now.

And now we just want to make an array where we save the images.

So on the variables left here just call it health images.

And make it an array of image type.

So here object types image and object reference, which is the image we are casting to here.

And we then want to and usually this details panel is on the right side for other blueprints.

But here it's at the bottom.

It still has the same things.

And here we want to change this to an array.

So variable type change this to an array.

Compile and save.

And we can then drag out these health images and get health images.

And we can then just add.

Like this and put this here and connect the as image here.

So yeah, we just loop over all of the children of the health box.

Right.

All of these images, we are casting them to image.

So that Unreal Engine knows that this is an image where we can call the set brush from texture on,

and we just save it for now.

And again, just to demonstrate, let's say uncompleted.

Once everything is done here, we can just get the health images and we can just do a for each loop

again like this and just connect here from completed to exec and set the brush.

And this still works the same way, right?

We still see the are depleted.

This is working fine, but we can now just call this anywhere in our code, not just on the completed

here.

Right.

I can disconnect this.

And now we can actually use this when we take damage.

So here we want to prepare a custom event which we can call when the player takes damage.

So here just make a custom event and call it Update health.

Like this.

And we can just go here and connect this.

And of course, in the end, we don't want to set all of these to the shadow square.

But based on how much health we have left, we want to decide which of these should be shadows and which

of these should be green.

So here we also want to put an input.

So select this and go to input.

And just set this to call this current health.

Current health and make this a float.

Like this.

Better to see.

And for now, just compile and save.

And we first want to call this in the player.

And then after that we're going to see what we do with the current health, how we're going to implement

this here.

So we can go to the content drawer.

We can go blueprints, characters player and BP player.

And we want to of course, update the health on any damage.

So whenever we take damage, we want to also update the health here.

But there are a couple of problems right now.

We don't know how we can get a reference to the HUD.

We also don't know how we can get a reference to the nested WB health component, because it is actually

being spawned in the game mode.

So that is the first hurdle we have to overcome.

Open up the game mode.

So blueprints GM action.

And here we instantiate the HUD widget.

So this is fine.

But we don't just want to add it to the viewport.

We also want to save it.

So here we can just drag off and promote the variable and just call it HUD widget.

Like this and then, well, we can also save it in between here and here.

We just remove this line, hold alt, put this here.

Like this.

And then we can also connect here to add to viewport.

So we save it here in the HUD widget we can compile and save.

And we can basically just tunnel this through to the player now.

So in the BP player on begin play, I believe we already have a reference to the game mode, right.

So we cast, we get the game mode, we cast the GM action.

And we can then use the GM action anywhere in our blueprint.

So when we take damage right on any damage and open up some space on the right side here.

We can then get our GM action.

This one.

Get the GM action and we can get the HUD widget.

Which is great.

But we cannot.

But we still cannot just call this update health.

Right?

So if I try to from the HUD widget, just call the update health, we actually cannot do it.

And the reason is that it is not on the HUD widget, but it is on the nested health component.

So how do we get this?

Well, we have to go to the Wbhp health.

And also set this to is variable and compile and save.

And now in the player also compile save.

I can get one layer deeper and just look for the Wbhp health component.

And now on this I can call update health.

Right.

So we are basically daisy chaining a couple of things together to get a reference inside another thing.

And this allows us to go from the player to the GM action to the HUD widget to the health component.

And then we can finally call our function.

And now let's just open up some more space here and just hold control to select the others.

And now we just want to wedge this in here and connect this.

And we have to give it a value for the current health.

And how do we get this.

And we get this from our BPC vitality and just get current health and plug this in here.

And now we can just compile and save.

You see, in the health component we don't call on construct.

We don't change the brush.

We only make this array.

So if we just start the game we just have the green squares.

This is fine.

But if I get hit, you can see that the player talks to the game mode, which talks to the HUD, which

then talks to the health component, and we deplete all of the health.

Of course, now we want to update this to not deplete all of the health, but show the remaining health.

And this is the reason we passed the current health through.

So we can now use this to decide if all of these blocks should be the shadow blocks, or if these blocks

should be the green blocks.

And to do this we need to compare the array index.

So this is always going to loop over the health right.

So it is going to give us a number starting at zero.

So this is going to be 012345.

So let's say we have three health.

We can just check for the index.

And then we say well this one should be green.

So zero one and two should be green.

If we have three health and everything else after this should just be the shadow.

And this is a thing if you're familiar with programming, right.

An array always starts at zero.

And this is something that often trips people up.

So we have to compensate for that by adding a plus one.

Plus one.

And now this is actually going to show us 1234.

So this is going to be not zero anymore.

So this is going to start at 1234.

And this just makes it easier for us to compare the health to the array index.

And the health is a float.

So we cannot actually compare a float with an integer.

And this is why we have to floor this.

So floor just means it's going to cut off all of the decimal spots, and it's only going to keep the

number in the front.

And now what do we do here.

We check if the health the current health for this loop is bigger or equal.

Then the current index.

And now based on this, we can decide if we want to show the shadow texture or the green texture.

So here we can just use a select.

And plug this in which we just talked about.

Right.

So if this is true then we use the square.

Green.

If this is not true, use the square shadow.

And now we can just compile and save and let's check this out.

I go here, I get hit and you can see we deplete one health.

The second one is gone.

And now this is a working system.

Right, and we can go all the way until we are defeated.

Just take some more damage.

And like this.

We are defeated.

It resets and you can see that actually, now the health doesn't reset unless we get hit again.

So this is another problem that we have to fix.

But in general the system is working.

And if you're rather new to programming, this part with the loop might be a little bit intimidating,

might be a little bit confusing, and you'll just get used to this over time.

You don't have to fully understand it yet.

But basically, like I said before, we're just iterating over all of these.

And then for every step in the loop we decide, is this bigger or equal than the number of health we

have left?

And then we just decide based on this, and you could use some print strings to just show you the numbers,

show you more what's going on here if you have a hard time understanding this, but arrays are prominently

used, it's something you have to get used to and they can be so helpful.

Now let's take care of the last issue, which like I said, if we get respawned, the health doesn't

reset in the HUD.

And this is a very easy thing to fix.

On the beep player.

We can just get this entire thing which we put under the any damage, right where we update the health

to the current health, we can just copy this, control C and go to begin play and open up some space

here.

Uh, this one actually, as well.

Pull this up as well.

And just after the falling lateral friction, because this doesn't block anything, we can just control

V to paste this in here and go like this.

And this basically just tells the player and basically this just makes the player update the health

one time after it's being spawned or respawned.

So we can just compile and save and let's take some damage.

Now I'm at low health.

Let's have a look at what happens.

I get defeated.

We respawn and the health is being set back.

I take damage again and the health is still correct.

And this is the reason that we put this on the game mode so we don't have to worry about the whole thing.

Is all the player got these spots, we have to despawn the UI, we have to respawn it again.

And we kind of sidestepped that whole issue and also made it more optimized this way.

And these are the basics for how to use UI, how to make it functional, and the concepts you've learned

here.

You can apply that to stamina systems, mana systems, and a lot of other things you can do with just

this basic knowledge and understanding.

So I hope you can come up with something cool.

And maybe if you want, you could add a bullet count or make a small challenge for yourself with the

shot energy.

But yeah, this wraps up the UI.

And next we're going to get into playing sounds.