Power-up & -down and health bar

Favourite 20 favourites
Tutorial written by Dan72Originally published on 3rd, October 2013 - 3 revisions

The Basics

Create the game field

Our starting point is:
Feel free to download the following images and insert them accordingly

Layer 0 - Background with background tile
Lock the layer!

Layer 1 - One player sprite, one monster sprite, one medikit to gain health points
Name the sprites accordingly as follows

Player:
Monster:
Medikit:
Place the sprites on the layer and scale them as you prefer. Not we're not building a complete game and only the player sprite is moving.

Side note: don't use the Red Cross symbol on medikits or any other health-related objects. The symbol is protected under the Geneva convention, as you can read here on Wikipedia! Instead, use green crosses or other symbols

Give the player
- an 8Direction behavior with Set angle property set to No
- a new instance variable called health with an initial value of 100

Layer 2 - Text field with Score and two health bars
Note: In a game you program, don't forget to set the layer's parallax properties to 0,0

For the health bar, load the following two images as tiled backgrounds!

Name the tiled backgrounds accordingly as follows and insert Bar_bottom first.

Bar_bottom:
Bar_top:
Insert a text object (not a text box!), I used following properties:
Text: Health: 100
Arial, Bold and yellow color

This is what you should see now:


We have to correct the bars now. In their properties, set them both to:
Position 490, 20
Size 100, 20

Adding and subtracting health points

Now that we're set up, let's add some events!
Note: The text field is simply for comprehension of what is happening. In the real game, the health bar suffices and the text would show the score.

Theory

When the player is in touch with a monster, health gets diminished. If the player touches the medikit, player's health rises.

So we need to change the Player's instance variable health and the width of the health bar.

Health bar width = 100 × Player.Health / 100
The first 100 corresponds the bar width in pixels. It could be different depending on the bar width you are using.

In the below conditions, the min and max value of the instance variable should be checked as well.

Practice

With the following conditions
Monster -> is on collision with another object (choose Player)
Player -> Compare instance variable (Health is greater than 0)

...add these actions
Player -> Subtract from -> Instance variable "health" 1
Text -> Set text -> "Health: "&Player.Health
Bar_top -> set width -> 100*Player.Health/100
Save and run the game. Move the player to the monster and each time it hits the monster, the instance variable Player.Health is diminished by 1 and the health bar width is getting smaller and smaller.

But we want a continuous health decline while the player and monster are touching each other. This may depend on your game.

We'll do this with the medikit. Now let's add the following conditions
Medikit -> is overlapping another object (choose Player)
Player -> Compare instance variable (Health is less than 100)

...add these actions
Player -> Add to -> Instance variable "health" 1
Text -> Set text -> "Health: "&Player.Health
Bar_top -> set width -> 100*Player.Health/100
Save and run the game. Move the player to the medikit and swooooosh, health is back to 100 in almost no time. You also can observe the Health points getting higher, until it reaches 100.

Now you can change the monster's condition from collision to overlapping.

Don't forget the event when the health variable reaches 0! Game should end or something else should happen. :-)

Share and Copy this Tutorial

You are free to copy, distribute, transmit and adapt this work with correct attribution. Click for more info.

Comments

0
rozpustelnik 6,174 rep

Thank You. Very useful tutorial. Waiting for the chapter covering timer, though.

Friday, October 04, 2013 at 8:33:44 AM
0
Lordshiva1948 44.3k rep

very nicely done thanks so much

Friday, October 04, 2013 at 8:37:51 AM
0
farnsu 1,759 rep

Great tutorial.
I'm a little confused about DT and using events to move stuff.
Typically if I want to move something 20 px it just snaps there,
I want a smooth transition over time from x to 20px does *dt do this?

Friday, October 04, 2013 at 5:31:10 PM
0
AbelaNET 14.9k rep

Great article. Thanks for sharing.

Monday, October 07, 2013 at 2:07:03 PM
0
upair 526 rep

Love it I think I would try it but I dont know how to add this feature to a flappy bird theme game

Monday, July 07, 2014 at 12:25:06 AM

Leave a comment

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