Posted on by
NOTE: This tutorial is outdated. Please refer to the setFillColor() and newGradient() documentation.

Posted by . Thanks for reading...

33 Responses to “Tints and Gradients”

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

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

    Reply
  3. 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?

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

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

    Reply
  6. 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 }

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

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

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

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

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

    Reply
  12. 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)?

    Reply
    • econstante

      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?

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

    Reply
    • Evan

      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.

      Reply
  14. Evan

    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?

    Thanks!

    Reply
  15. Walter

    @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: http://coronalabs.com/beta

    Reply

Leave a Reply

  • (Will Not Be Published)