Quick Links: Download Gideros Studio | Gideros Documentation | Gideros community chat | DONATE
Blend mode: Color — Gideros Forum

Blend mode: Color

totebototebo Member
edited July 2017 in General questions
I'd like to reproduce this effect in Gideros:

image

This is from Sketch 3 on Mac, but works identically in Photoshop. I've been playing around with the blend modes Gideros offers, but it's hit and miss since I don't understand them.
My Gideros games: www.totebo.com

Comments

  • totebototebo Member
    I think I've tried all combos of blend modes now, giving up! :(
    My Gideros games: www.totebo.com
  • HubertRonaldHubertRonald Member
    edited July 2017
    Hi @totebo
    I attach a little code (with its respective graphic resources) but still I don't know like put images in the position I want, but I've got effect than you want.. although the letters do not completely take the color of the respective color layer

    Maybe you have to play with the colors a little until the contrast to be nice.

    Very important you look that the alpha is 1 for the colors layers... No trap of course :)
    zip
    zip
    Blend.zip
    91K
  • HubertRonaldHubertRonald Member
    edited July 2017
    Here screenshot!
    image
    Captura de pantalla 2017-07-08 a la(s) 21.34.47.png
    914 x 232 - 22K
  • totebototebo Member
    Thanks a lot @HubertDonald! This is cool, but not quite what I was after. I'm looking for something that behaves like a Photoshop "Color" blend mode. It takes the blend layer and tints all layers underneath to match the colour.

    Check out the modified project (with a multicoloured target) and screenshot.

    zip
    zip
    Blend.zip
    111K
    Screen Shot 2017-07-09 at 09.38.59.png
    370 x 472 - 43K
    My Gideros games: www.totebo.com
  • HubertRonaldHubertRonald Member
    edited July 2017
    Hi @totebo (now if I wrote well your name)
    I was check your post and I imagined something like you posted but I believe that it will take me some more time understand...

    I checked two Render functions:
    (buffer) = RenderTarget:getPixels(x, y, w, h)
    (numberColor), (numberAlpha) = RenderTarget:getPixel(x, y)
    The first value (Buffer) than I got it was strange when I tried print(type(buffer), buffer) my output was string, ....... a lots blacks diamonds with a "?" on its center

    The second was a little more interesting

    numberColor is a decimal so I need convert it to hex
    http://lua-users.org/lists/lua-l/2004-09/msg00054.html
    -- If in the future the previous link is broken
    function DEC_HEX(IN)
        local B,K,OUT,I,D=16,"0123456789ABCDEF","",0
        while IN>0 do
            I=I+1
            IN,D=math.floor(IN/B),math.mod(IN,B)+1
            OUT=string.sub(K,D,D)..OUT
        end
        return OUT
    end
    It's really nice because it takes right color on the exact position than you indicated.. The problem I see it is that I would have to map point by point and paint or draw each one of them and I think it is not very practical in a game about execution with this technique... There must be something that is escaping me

  • antixantix Member
    edited July 2017
    What about...
    local function toHex(number)
      local strf = string.format
      return strf('%X, number)
    end
    Maybe the effect is possible with a shader? I agree though that it is sub optimal reading, processing, and writing every pixel :)
  • HubertRonaldHubertRonald Member
    edited July 2017
    Hi, there! @antix

    RenderTarget:getPixel(x, y) give you a decimal number, for example the color rgb(172,213,96)

    RenderTarget:getPixel(x, y) give you numberColor=11326816 as it's a decimal number so you need convert it to hex so you've got ACD560

    Well "Shader option" sincerely still I don't try it although we can see this little code and take some ideas:
    https://www.npmjs.com/package/glsl-blend-overlay

    DEMO BLEND OVERLAY
    http://jam3.github.io/glsl-blend-overlay/

    image
    descarga.png
    512 x 512 - 707K

    Likes: antix

    +1 -1 (+1 / -0 )Share on Facebook
  • antixantix Member
    edited July 2017
    @HubertRonald, okay I get you now :)

    So why does it need converting? If you have a function that wants you to supply an RGB color you can just pass it a decimal number anyway.

    Is there some other processing you need to do?

    In any case you could use the following...
    require("bit")
     
    function colorToHEX(color)
      local strf = string.format
      local r = strf('%X', ((color >> 16) & 255))
      local g = strf('%X', ((color >> 8) & 255))
      local b = strf('%X', (color & 255))
      return r, g, b, r .. g .. b
    end
     
      local r, g, b, rgb  = colorToHEX(16746564) -- decimal equivelent of 0xff8844
      print(r, g, b, rgb)
  • HubertRonaldHubertRonald Member
    edited July 2017
    Hi @antix as I work my arts in adobe illustrator I take colors in hex from there to Gideros because it's very lazy take colors in r,g,b and paste these on Gideros one per one... Nothing esoteric is just my current workflow

    Likes: antix

    Dislikes: SinisterSoft

    +1 -1 (+1 / -1 )Share on Facebook
  • hgy29hgy29 Maintainer

    I checked two Render functions:
    (buffer) = RenderTarget:getPixels(x, y, w, h)
    (numberColor), (numberAlpha) = RenderTarget:getPixel(x, y)
    The first value (Buffer) than I got it was strange when I tried print(type(buffer), buffer) my output was string, ....... a lots blacks diamonds with a "?" on its center
    @HubertRonald if you intend to do CPU based image blending then the first function is better: it fetches all pixels in one call, the returned string contains all R,G,B,A values of the pixels in each byte of the string.
    Once modified you can send that buffer back to Texture.new() to create a texture from your modified pixels.

    But of course a shader is far more efficient!

    Likes: antix, bgcis

    +1 -1 (+2 / -0 )Share on Facebook
  • totebototebo Member
    edited July 2017
    Thanks for this guys. It always seems comes back to the magical land of shaders!
    My Gideros games: www.totebo.com
Sign In or Register to comment.