How to tint an image red progressively?

Hello guys.

The title says it all. Why do I want to do that? Say I have an display object which has a health % number of 100%. I want to slowly turn that object red each time a bullet hit it.

I know I can do object:setFillColor(R,G,B) but how do I choose R,G,B element knowing that the object need to turn more and red as the object.health go from 100 to 0? I tried couple things but either the image (color) turn quickly to green/blue or turn to red almost right away. I need something that turn red slowly an finish with a dark red simulating object damage.

Any ideas?

Thanks guys for any help.

Mo [import]uid: 49236 topic_id: 19724 reply_id: 319724[/import]

set r,g,b to 0,0,0 for black then for each hit add 2.55 to r
or set r,g,b to 255,255,255 for white then each hit subtract 2.55 from g & b [import]uid: 7911 topic_id: 19724 reply_id: 76331[/import]

Something like this:

[lua]local kHealthBarWidth = 500
local kHealthBarHeight = 80
local lastHealth = -1
local currHealth = 100
local healthBar = display.newRect( 0,0,kHealthBarWidth ,kHealthBarHeight )
healthBar.x = 8
healthBar.y = 8
healthBar:setFillColor( 0,0,0 )

– Set the fill color to a percent of full red or blue
– amount can be 0-100
– 0 (no health) would give us 100% red and 0% blue
– 100 (full health) would give us 0% red and 100% blue

function updateHealth( amount )
– this check is to make sure we don’t update the display
– unless it has actually changed
if ( lastHealth ~= amount ) then
lastHealth = amount
healthBar:setFillColor( math.round( 255*(100-amount)/100),0,255*amount/100) )
end
end[/lua]

Then whenever you need to update the Health meter you can just set it to whatever percent you want. For instance, if you want the health to start full and go down to 0 over some number of seconds you can do this:

[lua]local kTimeToDie = 10000 – 10 seconds which is 10000 milliseconds
local kHealthDecTime = kTimeToDie / 100

local function healthListener( event )
currHealth = currHealth - 1
updateHealth( currHealth )
end

timer.performWithDelay( kHealthDecTime, healthListener )[/lua]

NOTES: updateHealth() takes a parameter so that you can call it at the end of your scene setup to show the initial full health. If you don’t want to do this then you can remove that and just use the “currHealth” value directly

I’ve just written this off the cuff, so there may be some minor errors, but I wanted to show you the general concepts. Let me know if anything isn’t clear and I can throw together a small sample app showing this actually working. [import]uid: 16734 topic_id: 19724 reply_id: 76337[/import]

WOW! It worked! I am using something:

local temp = (255 - 2.55*(100 - object.health))
planets[p]:setFillColor( 255, temp ,temp)

It works for what I need and it has a nice effect…

Thanks so much Ken for the great example. It real helped figure out things. Thanks for taking the time. Thank you too jstrahan, I was SO focus on doing something to R (red) that I forgot about the effect of G and B!! You should see the crazy formulas I came up with to play with R :slight_smile:

THANK YOU! This is by far the BEST dev community!

Mo [import]uid: 49236 topic_id: 19724 reply_id: 76343[/import]

Another option would be to place a pre-tinted image over the health meter and just change the alpha of it as health decreases.
[import]uid: 9048 topic_id: 19724 reply_id: 76597[/import]

@bensharpe

Good suggestion. I actually thought about that for another effect ( destruction effect where the object destroyed will turn into another object that looks like it was destroyed…a mouth full!). But I think with the tint feature there is no need to add complication of dealing with two images.

Thanks again to all who responded to my plea for help. I appreciated it very much.

Mo [import]uid: 49236 topic_id: 19724 reply_id: 76684[/import]