top of page
Create a health bar for the player
1- We have to add the player's health bar and we can get it from this link
https://alessio-scalabrino.itch.io/bars-health-and-energy-hud?download
We will open the heart image and edit it to make it empty from the inside. We can do this by pressing edit image or ctrl+E and we will name it heartempty .
We will import the heart image from the file we downloaded and with the edit image heartempty We store them in the allimages file.




1- Activate the paper 2d texture settings on these images.
2- Then we create a blueprint widget in the widget file and name it heartwidget .
3- When you open the heartwidget, we will find a box at the top of the screen on the left called search pallete, from which we can call up ready-made elements created by Unreal.
Because we want a health bar for the player, we have to write in the search box canvas panel : It is a panel in which we can put whatever we want to appear on the screen.
4-Then we create two images by typing in the search box image .
The first image will have the full heart and we will call it fullheart. The second picture is the empty heart, and we will call it emptyheart

1- We choose the images by going to the details menu, then the appearance box, and in image we choose the images .

2- We adjust the space ( size X & size Y ) for both images to make them the same space and in the same place, and we make them at the top on the left .

3- We modify the ZOrder value : a value for arranging the images. The higher its value in the selected image , the more it appears in the foreground. The lower its value in the selected image, the more it appears behind the images. We will make the ZOrder value for the empty heart image ( -1 ), which will make it behind the full heart image. then
compile & save .
We did this step so that when this widget appears on the screen, the full heart will appear, and when the player is exposed to any damage, we will hide the image of the full heart. We replace it with an image of an empty heart .


4- We will create another widget and call it playerHUDhealth .
5- Inside the Blueprint file, the playerHUDhealth widget, we will create a canvas panel : it is a panel in which we can put whatever we want to appear on the screen.
6- We will write in the search box Wrap Box : a box that arranges all the widgets inside it from left to right .
Inside the playerHUDhealth widget file will be the heartwidget we created earlier , which means that the hearts we created will appear inside the Wrap Box and will appear in order from left to right .
What we need to do now is to determine the number of hearts that will appear for the character and run the necessary software so that the health bar (a mix between playerHUDhealth and heartwidget ) appears on the screen.

7- Now we will move to the character blueprint and create a new variable of type float that will hold the character’s health value ( number of hearts ) and set its value to 5 and name it playerhealth.


8- Now we will go to the empty health bar widget file ( playerHUDhealth ) and go to the graph page to make the software.

2- Software required to display the player's energy bar on the screen
We will find that there is an event called event construct : an event that only works after the widget ( orchealthbar ) appears on the screen during the game.
1- Now we have to call a player reference (bp_char) by creating a get player character point.
2- From the point get player character we extract the point cast to bp_char
We convert that point into a reference that we can call at any time ( promote as variable ).
3- We call the character reference, and from the reference we extract the energy value of the character that we created previously in the player’s Blueprint, which is playerhealth .
4- From playerhealth point We extract a point called truncate : it converts float numbers to integer numbers .
Explanation: The reason we use the truncate point is because we will create a for loop point : a statement that repeats itself. It only accepts an integer value .
5- We create a for loop point.
At the forloop point we will find that there are two parts:
First index: This is the number we will start the repetition with, which will have a value of 1 and not zero because we will start the game with one heart .
Last index: is the number at which the repetition will end, and its value will be the truncate point that holds the player’s energy value of the integer type, which means that it will end the repetition after the five hearts (5) disappear .

Now we need to show the hearts ( heartwidget ) inside the wrap box that we created earlier inside playerHUDhealth.
6- But first let's rename the wrap box to hearts box
7- We convert it to a variable that can be called by clicking on is Vriable ( check mark ) then compile , and we will now find it on the graph page .



8- From the forloop point of the loop body part , we extract the create widget point : As its name suggests, it creates a widget , and we can choose the widget that we want to create from the class part and choose heartwidget .
9- We will create a new variable that will be a reference to the value of each heart individually and we will call it AllheartsRef.
10- We will click on the variable type and write in the search box the name of the blueprint for the hearts widget, which is ( heartswidget ), then another page will appear to determine the reference type , and we will choose ( objectreference ).

Because we have many hearts , we need to set a reference to five variables ( 5 hearts ), and we can do this by:
11- Convert the variable from a variable that holds a single value ( single ) to a variable that holds multiple values ( array ) so that we can put all the hearts in one variable and have a reference that we can call at any time, and then press compile .

12- We will see at the bottom of the AllheartsRef variable bar the array field and now we can press the plus sign ( + ) five times and create five elements for each heart. Then compile

13- Now we drag the reference to the graph page.
14- From the reference point Allhearts Ref we extract the point ADD.
The Allhearts Ref will hold the hearts widget that will appear inside it .
15- We will call the variable with its saved value that we created ( hearts box ).
16- From the point heartsbox, we extract the point add child to wrap box : This point receives another widget and adds it to the wrap box , which will be hearts box

17- We move to the personal Blueprint and create a create widget point.
18- We convert the value of the point create widget to a new variable ( reference ) and call it allheartsRef

19- From the reference point allheartsRef, we extract the point add to viewport : This point displays all its inputs on the screen.
20- We connect them to the start-play event like this.

Then compile and start playing.

bottom of page