Health bar

Getting Started Newbie Questions
#1

I was wondering if anyone could provide me with the logic for creating a sort of display bar, which decreases as player health decreases.
I came up with this so far… but the bar sort of collapses in on itself, as opposed to declining from right to left…

[code]
local backBar = display.newRoundedRect(0, 0, 150, 50, 12)
backBar.strokeWidth = 3
backBar:setFillColor(250, 0, 0)
backBar:setStrokeColor(0, 0, 180)
backBar.x = 200
backBar.y = 200
local fuelBar = display.newRoundedRect(0, 0, 150, 50, 12)
fuelBar.strokeWidth = 3
fuelBar:setFillColor(0, 250, 0)
fuelBar:setStrokeColor(0, 0, 180)
fuelBar.x = 200
fuelBar.y = 200
fuelBar.xScale = 1

function move() --Moves player and players “fuel” gauge
player:applyLinearImpulse(0, -.05, player.x, player.y)
player.linearDampening = 50
fuelBar.xScale = fuelBar.xScale - .01
end

local function impulse( event )
local me = event.target
local phase = event.phase
if “began” == phase then
– Start Focus
me.alpha = 0.6
display.getCurrentStage():setFocus( me , event.id )
me.isFocus = true
Runtime:addEventListener( “enterFrame”, move)
elseif me.isFocus then
if “ended” == phase or “cancelled” == phase then
– End Focus
display.getCurrentStage():setFocus( me , nil )
me.isFocus = false
me.alpha = 0.25
Runtime:removeEventListener( “enterFrame”, move )
end
end
move()
end
if expertMode == “enabled” then
physics.addBody(player, “dynamic”,{ density = .1, shape = {6, -35 , -3, 20 , -17, 22 , -9, -44 }})
player.isFixedRotation = true

local button = display.newImage(“nextlevelbtn.png”)
button.x = 100
button.y = 100
button.alpha = 1
button:addEventListener( “touch”, impulse )
hudGroup:insert(button)

end

[import]uid: 28912 topic_id: 7572 reply_id: 307572[/import]

#2

Here is my health Bar code I just finished this up because I couldn’t find a version on the forums. Here is my code it is scaleable to the size of the health by using ratios.

[code]
–Simple Health Bar

health = 100;
barWidth = 50;
myNewRatio = (barWidth/health);
myNewHealth = barWidth;
halfHealth = (health/2*myNewRatio);

display.setStatusBar( display.HiddenStatusBar )

local function main ()

halfW = display.contentCenterX
halfH = display.contentCenterY

local function moveHealth()

myNewHealth = health*myNewRatio;
adjustHealth =( myNewRatio*.5 )

local myRectangle = display.newRect( 0 , 0, barWidth , 8 )
myRectangle.strokeWidth = 2
myRectangle:setFillColor( 0 , 0 , 0 )
myRectangle:setStrokeColor( 255 , 255 , 255)

myRectangle.x = halfW ;
myRectangle.y = halfH ;

if ( myNewHealth <= halfHealth ) then
local myRectangle2 = display.newRect( 0 , 0, myNewHealth , 8 )
myRectangle2.strokeWidth = 2
myRectangle2:setFillColor(255 , 0 , 0 )
myRectangle2:setStrokeColor( 255 , 255 , 255)
myRectangle2.x = halfW-halfHealth+(health*adjustHealth);
myRectangle2.y = halfH ;

else
local myRectangle2 = display.newRect( 0 , 0, myNewHealth , 8 )
myRectangle2.strokeWidth = 2
myRectangle2:setFillColor( 0 , 255 , 0 )
myRectangle2:setStrokeColor( 255 , 255 , 255)
myRectangle2.x = halfW-halfHealth+(health*adjustHealth);
myRectangle2.y = halfH ;

end

end

local t = display.newText( “0”, 40, 40, native.systemFont, 18 );
t.xScale =.5; t.yScale =.5;
t:setTextColor( 255,255, 255 );
moveHealth()
local button3 = display.newImage( “ball.bmp” )
button3.x = display.contentWidth - 40
button3.y = display.contentHeight - 140
function button3:touch( event )

if(event.phase==“began”) then

health = health - 1;

moveHealth()

t.text = myNewHealth;

elseif(event.phase==“moved”) then

elseif(event.phase==“ended”) then

end

end

button3:addEventListener( “touch”, button3 )

end

main()

[code] [import]uid: 16265 topic_id: 7572 reply_id: 27129[/import]

#3

Great code!!!

i think adding this would be essential!

[code]

if(event.phase==“began”) then

if(health >= 0) then
health = health - 1;

moveHealth()

t.text = myNewHealth;
end
end
[/code] [import]uid: 24708 topic_id: 7572 reply_id: 93956[/import]

#4

How would you stop this function once it was called???
[import]uid: 24708 topic_id: 7572 reply_id: 100813[/import]

#5

Hi!
First, I must thank you for this code snippet; it was exactly what I was searching for! But it seems to have a major memory leak in it if I’m not mistaking. Whenever you call moveHealth() two new display objects are created, myRectangle and myRectangle2, which will build upon each other until the app finally will crash.

Instead of making the objects local, I made them global and every time I called the moveHealth() I first removed and nil:ed them to remove them from memory. This way I eliminated the memory leak.

[code]
local myRectangle
local myRectangle2

function moveHealth()

myNewHealth = health*myNewRatio;
adjustHealth =( myNewRatio*.5 )

– Remove myRectangle
display.remove( myRectangle )
myRectangle = nil

–Create a new myRectangle
myRectangle = display.newRect( 0 , 0, barWidth , 8 )
myRectangle.strokeWidth = 2
myRectangle:setFillColor( 0 , 0 , 0 )
myRectangle:setStrokeColor( 255 , 255 , 255)

myRectangle.x = halfW ;
myRectangle.y = halfH ;

if ( myNewHealth <= halfHealth ) then
– Remove myRectangle2
display.remove( myRectangle2 )
myRectangle2 = nil

–Create a new myRectangle2
myRectangle2 = display.newRect( 0 , 0, myNewHealth , 8 )
myRectangle2.strokeWidth = 2
myRectangle2:setFillColor(255 , 0 , 0 )
myRectangle2:setStrokeColor( 255 , 255 , 255)
myRectangle2.x = halfW-halfHealth+(health*adjustHealth);
myRectangle2.y = halfH ;

else
– Remove myRectangle2
display.remove( myRectangle2 )
myRectangle2 = nil

–Create a new myRectangle2
myRectangle2 = display.newRect( 0 , 0, myNewHealth , 8 )
myRectangle2.strokeWidth = 2
myRectangle2:setFillColor( 0 , 255 , 0 )
myRectangle2:setStrokeColor( 255 , 255 , 255)
myRectangle2.x = halfW-halfHealth+(health*adjustHealth);
myRectangle2.y = halfH ;

end
end

–And then call it as usual
function doSomeCoolStuff()

health = health - 1;

moveHealth()

t.text = myNewHealth;
end [import]uid: 54640 topic_id: 7572 reply_id: 114339[/import]

#6

Really for this kind of thing you can use scaling.

Basic idea:

  1. Create the health bar
  2. Create the health bar’s inner (the bit that reduces)
  3. Set the inner health bar’s reference point to the right or left (depending on which way your reducing it)
  4. modify the health bars xScale accordingly.

[import]uid: 84637 topic_id: 7572 reply_id: 114789[/import]