🎉 Celebrating 25 Years of GameDev.net! 🎉

Not many can claim 25 years on the Internet! Join us in celebrating this milestone. Learn more about our history, and thank you for being a part of our community!

A question about coloring grayscale game sprites

Started by
5 comments, last by Kryzon 6 years, 1 month ago

Hey!

My purpose is to make grayscale sprites, which can be colored with a blank color.

How can you define what areas shoud be lighter or darker than the given color?

I used the texures of GeometryDash as a reference. In my perception, the greyscale texture isn't transformed consistantly to colored. But even if it would, the grayscale can only darken the color, it can't make it brigther. So My guess is that this information should be contained in another texture map, (that I haven't found in case of my reference).

The attached picture is a screenshot from geometry dash. On the left, you can see the greyscale, on the right, it's the red colored one.

Could you enlighten me, how does it work?

Thanks!

Reference Grayscale vs red.png

Advertisement

in paint shop pro this would be multiplication (of the rgb values). It is independent of gamma.

I don't think the grayscale is being used for blending. I think it's being used for "gradient mapping", also known as colourising with a look-up-table.

There's some theory in here:

http://www.imagemagick.org/Usage/color_mods/#clut

You can but it depends on what data you store as the gray scale. Normally when we try to make a gray scale image we consider all the colors, but that above image is not a normal gray scale.

It is a how much red scale.

So it's the same as taking just the red channel from the image; then to make it a new color you take just that "Red Scale" and Hue shift it. https://en.wikipedia.org/wiki/Hue 

Quote

varying mediump vec2 texCoord1Varying;

varying mediump vec4 colorVarying;

uniform sampler2D texture1;

 

uniform mediump vec4 mappedColor;

void main()

{

    mediump vec4 inputColor = texture2D(texture1, texCoord1Varying);

    mediump float intensity = 0.5 * (inputColor.r + inputColor.b);

    gl_FragColor = vec4(mix(vec3(1.0, 1.0, 1.0) * inputColor.a, mappedColor.rgb * intensity, 1.0 - inputColor.g), inputColor.a) * colorVarying;

}

This is a glsl fragment shader that maps magenta to another color, taking the magenta's brightness and alpha into consideration.

What makes me think it's some sort of mapping (mapping a scalar to RGB) is that the difference in red is bigger than the difference in gray.

That big a color change with that little a grayscale change can be achieved by a lookup table with steep changes.

This topic is closed to new replies.

Advertisement