In Corona daily build 612, we’ve added a couple of graphics goodies: tinting and gradients!
Tints
You can now tint images by calling setFillColor() on the image object. You pass in colors just like you would for a solid object and Corona interprets this as a tint. The number of arguments determines how the numbers are interpreted. It’s grayscale if you pass 1 or 2 and color if you pass 3 or 4:
[cc lang="lua"]image:setFillColor( gray )
image:setFillColor( gray, alpha )
image:setFillColor( red, green, blue )
image:setFillColor( red, green, blue, alpha )
[/cc]
Here’s a quick example of a Andy Warhol-like treatment of the HelloWorld sample to give you a sense of how it works. It draws the world.jpg 4 times. Once normally and then 3 more times with different tints:
[cc lang="lua"]local w,h = display.contentWidth*0.5, display.contentHeight*0.5
local halfW,halfH = 0.5*w, 0.5*h
local background = display.newImageRect( “world.jpg”, w,h )
background:translate( halfW, halfH )
local dw = w + halfW
local dh = h + halfH
local background = display.newImageRect( “world.jpg”, w,h )
background:setFillColor( 255, 255, 0 )
background:translate( dw, halfH )
local background = display.newImageRect( “world.jpg”, w,h )
background:setFillColor( 255, 255, 0 )
background:translate( halfW, dh )
local background = display.newImageRect( “world.jpg”, w,h )
background:setFillColor( 255, 0, 255 )
background:translate( dw, dh )[/cc]
To get rid of an image tint, simply pass in white:
[cc lang="lua"]image:setFillColor( 255 )
[/cc]
Update: Starting in daily build 614, you can now tint sprite objects as well. Same syntax:
[cc lang="lua"]spriteObject:setFillColor( 255, 0, 0 ) — red tint
[/cc]
Gradients
You can now add tints gradients to text objects and also solid rectangles (that’s pure rects, not rounded rects) using the new gradient API. You create a new gradient object by calling graphics.newGradient(). You can pass (and reuse) the object in calls to text:setTextColor() and rect:setFillColor().
The following code demonstrates a vertical gradient that goes from yellow to white:
[cc lang="lua"]local myText =
display.newText( “Hello, World!”, 0, 0, native.systemFont, 40 )
myText.x = display.contentWidth * 0.5
myText.y = display.contentWidth * 0.25
local g = graphics.newGradient( { 180, 180, 0 }, { 255 }, “down” )
myText:setTextColor( g )[/cc]
Cairo
Wooooooooooo! Wonderful! I know so many people who have been waiting for this!
J. A. Whye
On my “to-do” list for today was to sit down with Acorn and create sets of objects in different colors. I’ve just scratched that off my list!
It means instead of having dozens of graphic objects for party of my game I can have one set and just tint them. *This* may be big enough for me to give up my “I don’t use daily builds for my released apps” stance.
Very nice!
Jay
Crossman
This is awesome.
The more photo editing stuff the better.
Ken Ibrahim
Awesome! I was hoping this would be possible somehow so that I could create different colored versions of a background image by applying a tint to a grayscale original.
John Ballinger
OMG, I was just thinking about this today, this is a great feature. Yay…
Inas
Wow, this is useful feature!
Question, if we want to clear the tint, is there any API for that, or should we just set the fillColor to 0 alpha?
Walter
To clear a tint, set the fill color to completely white. Tinting modulates the colors of the bitmap by the color of the tint, so modulating with white (1.0) gives back the original bitmap color.
Sun Jiajie
wow,great!! that’s the feature i was waiting for!
firemaplegames
Awesome!
SannyChan
Yes!!
One step closer to closing the graphics capability gap!
You have one more item on your list we need, a copyPixels function!
object.copyPixelsTo(object) to create dynamic textures, which would speed up soo many draw processes, its not even funny!
Or even a display.flatten() function to flatten all objects into one texture. One can dream!
Matt L
Does this work with sprites as well?
finefin
great! Now I can get rid of my alpha-channel workarounds to make different brightness levels of a texture.
way to go!
finefin
I just updated my project and it works like a charm! thank you!
John Tran
Oh yea!!! I need this…Thank you very much!
Paul Allan Harrington
Perfect timing. I was just trying to schedule time to edit graphics for this effect and similar and wishing I didn’t have to spend time editing graphics when I should/could be programming
Best wishes,
Paul Allan Harrington
Visuals Work: { visualswork.com }
Consulting Group: { pahgroup.com }
codeRebelBase
Does tinting work with all display objects, including sprites?
XenonBL
Works great! Thanks for implementing.
Walter
@Matt, yes starting in build 614 you can tint sprites via setFillColor(). See update in blog post.
don@loqheart.com
@Walter That’s strange. I tested with 612, and setFillColor works on sprites there as well. I tested and updated the Spriteloq API as a result. Is there something different in 614?
J. A. Whye
I already commented to say “whoohoo!” but wanted to post a follow-up to say thanks again for adding this — I played around with it yesterday and it works like a charm.
I set one of my current art assets to greyscale and after that added tint after tint to create “new versions” of the same thing. It works great and is going to save me a lot of time.
Jay
Chang Kian Boon
Has anyone tried to call the setFillColor to tint an image on timer.performWithDelay? It works for normal rect or circle, but not with image. Any solution for this?
Chris
Will it ever be possible to tint a display group?
Chris
Also, will the transition library be updated to support tints?
saravanan
local myText =
display.newText( “Hello, World!”, 0, 0, native.systemFont, 40 )
myText.x = display.contentWidth * 0.5
myText.y = display.contentWidth * 0.25
local g = graphics.newGradient( { 180, 180, 0 }, { 255 }, “down” )
myText:setTextColor( g )
copy code and paste into my edit .And i run its make some runtime error
Jeff Johnson
Does not work unless I translate the image afterwards…
Tomjuan
I can’t seem to make this work using the gray-option. It works great using color – e.g. (255,0,0) leaves a red tint.
The only ‘result’ I get is more like a transparent, darkened layer, which in my opinion is not a gray.
Has anybody tried this, and gotten it to work with gray?
I am using build 704.
Neil
I’ve been struggling to understand the mathematics behind tinting – especially as it relates to colored images.
This is what I think happens… (please correct me if I’m wrong):
Does it tint individual pixels proportionally based on their RGB value? For example, if you have a pixel colored (255,195,105) (a light orange) and you tint it (85,170,255) [that's (33%,66%,100%)] would the final color would be (85,130,105)?
Walter
Yup, you got it
Olivier
Wahhoooo
Cool stuff
A question : I’ve got a character, with big white eyes.
I used “setFillColor” to change the character’s tint during the game.
But I’d like the entire character “minus” his eyes change.
In other words, i’d like the body to change but not the eyes.
Is it possible to “block” a color, like white in my example?
Any idea?
Thanks
Olivier
Katrice
I really think about why you branded this specific blog post,
“Tints and Gradients | Corona Labs”. Either way
I actually loved the blog!Thanks for the post,Tonja