Jump to content

[TOPIC: topicViewTemplate]
[GLOBAL: userSmallPhoto]
Photo

Health bar problem
Started by ec0 Oct 13 2018 09:52 PM

7 replies to this topic
health bar

Best Answer XeduR @Spyric , 14 October 2018 - 04:19 AM

Perhaps the easiest way to accomplish what you want is to do something like:
 

local maxWidthHP = 100 -- hp bar's max width in pixels

damageBar.width = maxWidthHP*(playerTable.health/user.maxHealth) -- your hp bar's width multiplied by the ratio of remaining HP

You can adjust the maxWidthHP, which is the maximum width of your HP bar in pixels. If you multiply that width with the ratio of remaining HP, i.e. playerTable.health/user.maxHealth, then your HP bar will always be between 0 pixels and the amount of pixels that you determine. If you increase the user.maxHealth to 200 and the playerTable.health is at 100, your HP bar will be at 50%, etc.

*Edit, update the code example to use your variable names.

[TOPIC CONTROLS]
[/TOPIC CONTROLS]
[modOptionsDropdown]
[/modOptionsDropdown]
[reputationFilter]
[TOPIC: post.html]
#1

ec0

[GLOBAL: userInfoPane.html]
ec0
  • Enthusiast

  • 42 posts
  • Corona SDK

I have a this health bar, everything works as it should, the only problem is when I change the HP the width changes as well. How can I stop that? 

 

Here's the code I use.

 

--creates the health bar background
local barBack = display.newRect(0, 0, user.maxHealth + 10 , 25)
magnet:left(barBack, 25)
magnet:top(barBack, 10)
hudGroup:insert(barBack)
barBack:setFillColor( 100/255, 100/255, 100/255 )
 
--creates the health bar
local healthBar = display.newRect(0, 0, user.maxHealth, 20)
magnet:left(healthBar, healthBar.width/2 + 30)
healthBar.y = barBack.y
healthBar.anchorX = 1
hudGroup:insert(healthBar)
healthBar:setFillColor( 255/255, 0/255, 0/255 )
 
--when the player gets damaged 
local damageBar = display.newRect(0, 0, 0, 20)
damageBar.x = healthBar.x
damageBar.y = healthBar.y
damageBar.anchorX = 1
hudGroup:insert(damageBar)
damageBar:setFillColor( 60/255, 60/255, 60/255 )
 
--displays the player health
local healthText = display.newText(hudGroup, playerTable.health.."/"..user.maxHealth, 0, 0, _font, 12)
healthText.x = barBack.x 
healthText.y = barBack.y
healthText.alpha = 0.8
heart:toFront( )
 
--updates the health bar
function updateDamageBar()
damageBar.width = user.maxHealth - playerTable.health
healthText.text = playerTable.health.."/"..user.maxHealth
end



[TOPIC: post.html]
#2

XeduR @Spyric

[GLOBAL: userInfoPane.html]
XeduR @Spyric
  • Contributor

  • 361 posts
  • Corona SDK

Are you talking about this?
 

--updates the health bar
function updateDamageBar()
damageBar.width = user.maxHealth - playerTable.health
healthText.text = playerTable.health.."/"..user.maxHealth
end

Whenever you call updateDamageBar function, the width of the damageBar is updated by using the formula "user.maxHealth - playerTable.health". If you want to stop the width from changing, then comment out, change or delete that row.


 



[TOPIC: post.html]
#3

ec0

[GLOBAL: userInfoPane.html]
ec0
  • Enthusiast

  • 42 posts
  • Corona SDK

No, I want the damage bar to change width, it shows that the health is depleting.
I don’t want the health bar (and in turn the barBack) to change width.
I want to be able to change the max health of the player without the health bar changing width. So it doesn’t matter whether the player's max health is 100 or 1000, the health bar will remain the same width.
Sorry if I didn’t explain myself well.

[TOPIC: post.html]
#4

XeduR @Spyric

[GLOBAL: userInfoPane.html]
XeduR @Spyric
  • Contributor

  • 361 posts
  • Corona SDK

  Best Answer

Perhaps the easiest way to accomplish what you want is to do something like:
 

local maxWidthHP = 100 -- hp bar's max width in pixels

damageBar.width = maxWidthHP*(playerTable.health/user.maxHealth) -- your hp bar's width multiplied by the ratio of remaining HP

You can adjust the maxWidthHP, which is the maximum width of your HP bar in pixels. If you multiply that width with the ratio of remaining HP, i.e. playerTable.health/user.maxHealth, then your HP bar will always be between 0 pixels and the amount of pixels that you determine. If you increase the user.maxHealth to 200 and the playerTable.health is at 100, your HP bar will be at 50%, etc.

*Edit, update the code example to use your variable names.



[TOPIC: post.html]
#5

ec0

[GLOBAL: userInfoPane.html]
ec0
  • Enthusiast

  • 42 posts
  • Corona SDK

Thanks. I’ll try this out.

[TOPIC: post.html]
#6

ec0

[GLOBAL: userInfoPane.html]
ec0
  • Enthusiast

  • 42 posts
  • Corona SDK

It worked! Thank you for your help.
  



[TOPIC: post.html]
#7

SGS

[GLOBAL: userInfoPane.html]
SGS
  • Corona Geek

  • 1,887 posts
  • Corona SDK

I find it preferable to load an image (say at 100px wide) and that represents 100% health. 

 

To simulate 50% health simply set image.xScale = 0.5.  You will need to image.anchorX at 0.



[TOPIC: post.html]
#8

ec0

[GLOBAL: userInfoPane.html]
ec0
  • Enthusiast

  • 42 posts
  • Corona SDK

That's pretty much what i'm doing. Though I had my anchorX set to 1, because I had the width increase, instead of decrease, due to the way I had set it up.

I have since changed the anchorX to 0, because I change the way my health bar was set up.

But thanks anyways :) 




[topic_controls]
[/topic_controls]

Also tagged with one or more of these keywords: health bar