Implementing a Health Status Bar in Corona SDK
Many games need a way to show the players how well they are doing. It could be a simple counter to show the number of lives left or a bar that decreases and increases as a players energy goes up and down.

There are as many different ways to do this as there are games but lets look at a couple of different ways.
The simplest may be simply using text to display the health status:
|
|
local lives = 5
local livesLabel = display.newText("Lives: ", 10, 30, native.systemFont, 16)
local livesValue = display.newText(string.format("%d", lives), livesLabel.contentWidth+20,30,native.systemFontBold, 16)
livesLabel:setTextColor(225,225,225)
livesValue:setTextColor(255,255,255) |
Then later in your code when a player looses a life (or gains one back) simply change the text value of “livesValue” and Corona will magically update the value for you:
|
|
if lives > 0 then
lives = lives - 1
end
livesValue.text = string.format("%d", lives) |
Of course you might want to drop a graphic behind the text, set the colors accordingly, and possibly drop a duplicate text string underneath offset by a pixel to give a little stroke/shadow to the text.

But our players expect more from games and a simple text display won’t be accepted as high quality. Traditional arcade games have shown your lives as small versions of your player’s graphic. If your game involves a ship, perhaps you see a display of 5 little ships to show your life count.
With a display of say 5 small rockets, you will need one image and you will replicate it several times.
|
|
local lifeIcons = {}
local lives = 5
local maxLives = 5
local i
for i = 1, maxLives do
lifeIcons[i] = display.newImage("lifeicon.png")
lifeIcons[i].x = 10 + (lifeIcons[i].contentWidth * (i - 1))
lifeIcons[i].y = 30 -- start at 10,10
end |
This will create a display of 5 little icons that shows your full life status. Later in your code when you need to change the display:
|
|
if lives > 0 then
lifeIcons[lives].isVisible = false
lives = lives - 1
end |
Later when you need to give a life back:
|
|
lives = lives + 1
if lives > maxLives then
lives = maxLives
end
lifeIcons[lives].isVisible = true |
But what if you want more of a bar-graph display. As long as you’re using discrete values, you can continue to use a similar method using different graphics for each value, in this example, there are 5 lives, so you can create 5 different graphics for each of the 5 life states.

Instead of using a loop to load in the same graphic, you would need to load in each of the separate five graphics in and position them all at the same location:
|
|
local lifeIcons = {}
local lives = 5
local maxLives = 5
lifeBar[0] = display.newImage("lifeicon0.png")
lifeBar[1] = display.newImage("lifeicon1.png")
lifeBar[2] = display.newImage("lifeicon2.png")
lifeBar[3] = display.newImage("lifeicon3.png")
lifeBar[4] = display.newImage("lifeicon4.png")
lifeBar[5] = display.newImage("lifeicon5.png")
local i
for i = 1, maxLives do
lifeBar[i].x = 10
lifeBar[i].y = 30
lifeBar[i].isVisible = false
end
lifeBar[lives].isVisible = true |
Then to change the graphic:
|
|
if lives > 0 then
lifeBar[lives].isVisible = false
lives = lives - 1
lifeBar[lives].isVisible = true
end |
This same concept can be done with MovieClips.
|
|
healthSprites = movieclip.newAnim{"lifeicon1.png", "lifeicon2.png", "lifeicon3.png", "lifeicon4.png", "lifeicon5.png", "lifeicon0.png"}
healthSprites.x = 50
healthSprites.y = 10
healthSprites:play{startFrame=1, endFrame=lives, loop=1, remove=false} |
Then to show the current health level:
[/crayon]
lives = lives – 1
if lives < 0 then
lives = 0
end
if lives == 0 then
healthSprites:play{startGrame=6, endFrame=6, loop=1, remove=false}
else
healthSprites:play{startFrame=1, endFrame=lives, loop=1, remove=false}
end
[/crayon]
This gives you the benefit of a little animation as well. Unlike the example above, we load in the “No life left” graphic in frame 6, because movieclip starts at frame 1. We could have put frame 0 first, and just done a “lives + 1″ to get the right offset.
Hope this is helpful!