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.
Preparation
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.
Fwf!
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.
Afterword
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 :)