NOTE: This tutorial is outdated. Please refer to the setFillColor() and newGradient() documentation.
  1. 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!


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

  3. 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!

  4. 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: { }
    Consulting Group: { }

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


  6. Chang Kian Boon says:

    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?

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

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

  9. 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)?

    • is there some kind of formula/function to apply an specific tint to get the color you want in a pixel?

      let’s say I have a greenish (0, 100, 0) square and I want to turn it red (255, 0, 0)

      is there a formula I can apply to convert that?

  10. 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?

    • You would have to separate the eyes from the sprite you want to tint. It’s pretty easy when you have all the sprites in a display group as your character.

  11. Does anyone know if/when they will allow tinting and masking to work together?

    As of 1107 when you apply a mask to a tinted sprite or a display group that consists of tinted sprites, it removes the tint. The only work around I have is using display.capture to then mask the captured screen, however this is too slow on device.

    Any other suggestions?


  12. @Evan, this will work in the new graphics engine. You’ll be able to apply a mask and a tint to sprites.

    We’re about to seed a build with the new engine any day now, so be sure to sign up for the beta to get in the queue:

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title="" rel=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>