Blend mode: Color

totebo · July 2017

I'd like to reproduce this effect in Gideros:

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.

totebo · July 2017

I think I've tried all combos of blend modes now, giving up!

HubertRonald · 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

HubertRonald · July 2017

Here screenshot!

totebo · July 2017

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.

HubertRonald · 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

antix · 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

HubertRonald · 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/

antix · 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)

HubertRonald · 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

hgy29 · July 2017

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!

totebo · July 2017

Thanks for this guys. It always seems comes back to the magical land of shaders!

Howdy, Stranger!

Categories

In this Discussion

Top Posters

Blend mode: Color

Comments

Howdy, Stranger!

Quick Links

Categories

In this Discussion

Top Posters

Blend mode: Color

Comments