Create a proper healthbar

Favourite 61 favourites
Tutorial written by MagicTofuOriginally published on 25th, January 2013 - 10 revisions

Hi everyone!
Traveling through Scirra forums and the Internet, I came across a few tutorials that shows you how to create a healthbar. The problem is that these healthbars are static. In this tutorial I will try to show you how to make dynamic healthbar, suitable for RPG, which takes into account the different amount of health.


I will build a simple situation where at the click of a button "player" will receive damage. We will create another button that simulate level up, in this case - increase your maximum health. Another button will heal our hero.
So, prepare our environment.

Create and name few objects:
barHP – green. Set the origin point at 0 on X, healthbar to increase only to the right.
barMaxHP – red. This is our maximum health.

ddbtn – to deal damage.
addhpbtn – to increase maximum health.
healbtn – will add some hp to hero.

countHp - text showing the current amount of health/maximum health.

damageText - how many damage we want to deal.
healText - how many hp we want to restore.
addhealthText - increase the number of maximum health (level up!).

For convenience, set the value in the Text properties of these textboxes 20.

It turned out like this:


Some code

Now create two global variables: heroHP and heroMaxHP (hope it is clear what they do :)). Good part is that you can set to any value is heroMaxHP and it does not affect the width of our healthbar.
For clarity, I will set the value of variables 100 and 120.

Create the event of damage dealing, healing, and level up.


That is, for example, when you click a button ddbtn (deal damage), the number of health, remaining in character substract the amount of damage that you enter in the Textbox "damageText". Accordingly, for addhpbtn and healbtn we add values from textboxes addhealthText and healText. It's simple.

Now, will check that our healthbar not get out of his limits.
Create Every tick event and two sub-events:

Now add text display of hero health. Back to Every tick event, and set textbox's Text "countHP" to "HP:" & HP & "/" & maxHP.

Magic is about to begin

We just have to keep track of the width of the healthbar. To do this, we need only one action! 
In the same Every tick event set width of barHP = (HP / maxHP) * barMaxHP.Width

Yes, it's THAT easy :) 

I will explain the code. It does not actually need to directly correlate the player's current hp and max hp with a width of-the healthbar. 

First, we calculate the percentage of hp maxHP: (HP / maxHP) * 100. Get a percentage of current health to the max. 
Then just need to figure out what barHP width in '%', we got to the barMaxHP.Width. That is, in this case we have one unknown quantity - barHP.Width - this is X, which is and should be evaluated. 
7th grade math:
(barHP.Width / barMaxHP.Width) * 100 = (HP / maxHP) * 100 --> 
barHP.Width = ((HP / maxHP) * 100 * barMaxHP.Width) / 100 -->
barHP.Width = (HP / maxHP) * barMaxHP.Width.


Of course, in your games you do not always enter the number of damage or health or maximum health. You will kep'em in variables. And apply this method to the variables is easy. It will be your homework :) 

Thank you, take care and make games!
And .capx of course

p.s. There some bug with dealing damage when you increase maximum health to a lagre amount. I'll try to fix it. Or maybe you can :)

Unlock your full gamedev potential

Upgrade to the Personal Edition of Construct 2, it has way more features and won't holding back from making money and using your full creativity like the free edition does. It's a one off payment and all Construct 2 editor updates are free for life!

View deals

Plus, it's got a lot of additional features that will help you save time and make more impressive games!

Congratulations on finishing this tutorial!

Did you learn a lot from it? Share it now with your friends!


Sars 2,508 rep

Awesome tutorial, thanks :)

Thursday, March 07, 2013 at 6:41:21 PM
rob 3,444 rep

Itz cool

I have a query how to create listing or grade of the gameing or I means to say how to create list of level's such as 1,2,3 etc for

after click the start button you get the list page right now it show 1 (level 1) and other are locked after win the level 1 first you get level 2 and in the list page second level locked has been removed.
How to create it any idea.

Monday, March 18, 2013 at 7:24:38 AM
11nerd11 417 rep

Naaa just us the minecraft health bar and shut up

Thursday, November 21, 2013 at 7:28:48 PM
jiran 626 rep

thanks,your tutorial,very nice

Friday, November 29, 2013 at 12:02:56 PM
BowmansOmen 438 rep

This is an awesome article i noticed though when you have the player go to different layouts this doesn't update. Have you noticed that? I'm trying to figure it out. It would really make this tut u have here useful.

Monday, May 19, 2014 at 9:29:58 PM
NeoBiel 4,639 rep

Very good, very good. Thank guy

Friday, June 27, 2014 at 3:55:33 PM
hilsen123 1,507 rep

Muito bom!!!!!!

Wednesday, July 13, 2016 at 2:29:52 AM
Viet31781 764 rep

Thank you alot, this is great help!

Wednesday, May 03, 2017 at 2:22:24 AM

Leave a comment

Everyone is welcome to leave their thoughts! Register a new account or login.