Home Unreal Engine

UE4 technical tutorials chapter 1 - Custom HP bar, damage, heal

grand marshal polycounter
Offline / Send Message
Obscura grand marshal polycounter
Hello everybody, this is the first part of the tutorial series I'm making, about some technical finenesses that can be done with Unreal Engine 4. I'm planning to cover a wide range of thing in the series, from beginner to across intermediate to advanced topics.



Chapter 1 - Custom HP bar, damage, heal

--- beginner level---



This first chapter will show you how to make a custom, circle shaped progress bar that can be used to display stats about the player. In this case I use it to display hp. Also, I'm showing you how to set cariables, some ways to communitate between blueprints, and one way for increasing or decreasing the player's hp.

Here is the end result:
[ame="http://www.youtube.com/watch?v=QpVDMJowDFw"]http://www.youtube.com/watch?v=QpVDMJowDFw[/ame]

Lets get started...

So the idea is to display the hp on a circle shaped progress bar, similar to what you can see in the Diablo series for example. Mine won't be as detailed as what you can see in that game, but the tutorial is made for showing the logic behind it (or at least one way).
healthorb.png

So what we need:
1. A circle shaped, filled alpha

2. An another alpha, with black color on the top section, and white color on the bottom section.

3. Alpha blend, or alpha test blend mode - I will use alpha blend for some fancy effects

4. Multiplication...

5. Pushing the second alpha before the circle alpha

fXU54nS.jpg

This will be done to hide some parts of the circle, to display the missing health.

Here is the material setup I used:
F0yyvO7.jpg

Explanation:

I used translucent blend mode (alpha blend).

Emissive channel:

I wanted the circle to be green when the player is healthy, and red, when its dying, so I did a lerp between red and green, based on a collection parameter, called "hp". A collection parameter is a parameter that can be accessed by blueprints, and can be changed dynamically. I used a power on this value, because I wanted the color to go non-linearly...

Opacity channel:

Texture sampler 1 (red channel is used) is used to get the circle alpha.
Texture sampler 2 (green channel is used) is used to get the half black, half white image. The texture coordinate of this is set to be U=1 V=0.5, so I get double height for this image. After this, an "add" was used, to "move" the texture coordinate gradient, so I get a manual panner...

The 2 texture samplers are multiplied onto each other, and there is an another multiply after it, because I wanted it to be semi transparent.

The refraction channel was used because I wanted the HP bar to look like its bulging.


After the textures and the material is done, the material can be added to the screen as a widget, or on a mesh, attached to the camera. Its recommended to use widget though... I won't go into details with this part.

So lets continue with the blueprints:

I added 2 trigger volumes to the level. One for dealing damage, and one for healing.

For getting input from them, I used the level blueprint, because it was a simple case, but in a real game, damage dealing, or healing assets are specific actors.

I used 3 variables in the level blueprint:
- intrigger (boolean) - used to check if the player is standing in a trigger
- triggerdamage (float) - used to set the amount of damage that the trigger will deal
- triggerheal (float) - used to set the amount of healing in the healer trigger

This is how my blueprint setup looks:
OzWSyqY.jpg

trigger1 damage section:

OnActorBeginOverlap (trigger1) - this is an event that gets called when the player enter this trigger. Right after that, I set the "intrigger" to be true, so now we know the player is standing in one trigger. From here, I need to send info to the player about the amount of damage he will get. This can be done with "cast to". My player character was called "player" so its Cast to Player in my case. Cast has an reference object input. In different cases, you'll need different reference objects. For when you want to cast to your player character, you need to use "get player character". When its the controller what you want to cast to, then its "get player controller"... When its a random actor, then you can use "get all actors of class", but this is an another topic :D. So... I have a variable inside my player character blueprint, called "damageamount". I will change its value with the cast, I will set it to be equal to the "triggerdamage". Then there is a custom event call "damage". Custom event is an another way to communicate between blueprints. With this, I can execute a row of nodes , or a function, or anything in an another blueprint.... I wanted the trigger, to deal damage every 0.1 secs, so after the "damage" event is called, I'm checking if the player is still standing inside the trigger, and if he does, then I fire the "damage" event again, and again, until the "intrigger" bool becomes false.

OnActorEndOverlap (trigger1) - This event is happening when the player leaves the trigger volume. I simply disable the "intrigger" boolean (so the looped damage dealing will get ended)

Trigger 2 heal - Its pretty much the same as trigger 1 damage, I just change another variables.


Player character:

Variables:

-Health (float) - current health of the player
-Damageamount (float) - amount of damage to deal to the player, when "damage" event gets called.
-Healamount (float) - amount of healing, when the "heal" event gets called.

aj4XhZZ.jpg

Damage event (custom event):

We was referring to this event in the previous blueprint, now here is what it does.

When this event gets called, we check if the player's current health (health var) is greater than 0 or not. If its greater, then we need to deal damage. This can be done with subtracting the "damageamount" from his current healts. We need to "set" the health variable then, so its value will change to the result of the subtraction. Then I set my collection parameter to be equal to the player's current health, so we will get visual representation too.

Heal event (another custom event):

Again, this is almost the same, the only difference is that we check if the player is on max health, and then if he has 0 health. The another difference is that now we add to his "health" instead of subtracting.

Now the thing is done.

I hope you found this tutorial useful!

Replies

Sign In or Register to comment.