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.

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

Something like this:

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

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 :)

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

Another option would be to place a pre-tinted image over the health meter and just change the alpha of it as health decreases.

@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.

views:1512 update：2012/1/3 13:02:13


Label: corona android iphone ipad building error inmobi problem display screen View image tableView failed object physics touch button game lua config event listener