Tints and Gradients
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:
image:setFillColor( gray, alpha )
image:setFillColor( red, green, blue )
image:setFillColor( red, green, blue, alpha )
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:
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 )
To get rid of an image tint, simply pass in white:
Update: Starting in daily build 614, you can now tint sprite objects as well. Same syntax:
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:
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 )
RSS feed
Wooooooooooo! Wonderful! I know so many people who have been waiting for this!
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
This is awesome.
The more photo editing stuff the better.
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.
OMG, I was just thinking about this today, this is a great feature. Yay…
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?
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.
wow,great!! that’s the feature i was waiting for!
Awesome!
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!
Does this work with sprites as well?
great! Now I can get rid of my alpha-channel workarounds to make different brightness levels of a texture.
way to go!
I just updated my project and it works like a charm! thank you!
Oh yea!!! I need this…Thank you very much!
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 }
Does tinting work with all display objects, including sprites?
Works great! Thanks for implementing.
@Matt, yes starting in build 614 you can tint sprites via setFillColor(). See update in blog post.
@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?
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
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?
Will it ever be possible to tint a display group?
Also, will the transition library be updated to support tints?
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
Does not work unless I translate the image afterwards…