Best Way to allow players to "Dye" images without losing color quality?

Question

I am creating a 2.5D isometric (2D images) game.

I want the players to be able to "dye" their armor, clothes, and other things. I find that grayscaling everything leads to losing out on some of the more "natural" coloring. For example, making a dragon with red/yellow grayscale and then applied overlay color, leads to a purely red dragon with all loss of the secondary color. Meanwhile, dying that same Red/Yellow Dragon Blue, makes it Blue/White which looks great.

The characters in my game do not have a huge variety of equipment. The game is closer to how League of Legends handles characters and graphics. There may be a single type of character (ex. Hero) but multiple outfits for the character as options. I want players to be able to have as much customization as possible in the limited number of "outfits" and characters.

So I want players to be able to select a character, pick one of several weapons, alternate between a handful of costume choices (layered onto the characters), and then dye most of everything (pick a specific metallic color for weapons, pick any color at all for clothing).

If I were to be able to use grayscale without losing some of the coloring, I would.

Here is an example as to what I am talking about:

It is not even possible to "dye" the Dragon, no matter what I use in Photoshop's "Color Overlay" options. Obviously, I am doing it wrong if it is possible to color it better using grayscale. For a color like Green or Yellow or a Lighter Purple, this works okay. For any other color, it destroys the art.

However, it looks much better if I do NOT grayscale it, and instead simply apply a "HUE" color to the original (Red/Yellow) image.

Red Hue

Purple Hue

Now the players could dye the Dragon ANY color, and it would still look great! (The yellow turns white, while the red turns to any color of the rainbow.)

Does this mean that WHITE or BLACK is the best secondary color? Then use some sort of method or shader to change white (secondary) color to something different?

Are there any articles on this complex method of taking a single image, and based on the coloring, dye different pixels?

For the Dragon, would it work best as a White/Black high Contrast Dragon? Is Red/Yellow the best color set? It turns out a lot better for images than a few other colors I tried. Is Grayscale still superior?

Does Photoshop's "Blending Options" not include the method to appropriately "dye" images for a video game? Are there complex Shaders/Methods that allow me to achieve better success?

Note: If GrayScale allows me to reduce the RAM consumption of my images, or prevent loss of quality during lossy compression, that would be something I would seriously consider.

Answer 1

Hue-shifting is one possibility that would let you get a range of colors without losing the color details. The basic idea is to convert each pixel from RGB to HSV space, then offset the hue by a user-defined amount, then convert back to RGB. Actually, this can be done more efficiently by applying a rotation matrix to the RGB values: create a matrix that rotates around the (1, 1, 1) axis by the user-defined hue angle. Then you can simply apply this matrix to each RGB value in your pixel shader.

This will allow the red-yellow dragon to be shifted to a yellow-green, green-cyan, cyan-blue, blue-magenta, or magenta-red dragon. This is a bit restrictive as the two colors can't be altered independently with this approach. They'll maintain their relative hue as they're authored in the original image. There are also some colors you can't access, e.g. you can't make a black-and-white dragon this way. Still, this may be enough for your purposes.

Another possibility, if your models have two or three "key colors" (red and yellow here), you could author the original image using a separate color channel for each key color. In this case, you'd author the dragon red and green instead of red and yellow, and if you had a third color you could author it in blue. Then, you can let the user pick the three key colors, and use the red, green, and blue values in the image as amounts of those user-defined colors to blend in. So your pixel shader would look something like

finalColor = image.r * userColor1 + image.g * userColor2 + image.b * userColor3;

This would let the users pick any color combination they wanted, including things like black and white, or purple and gold.

Answer 2

The problem you are facing is that you can't simply "tint" the whole image, the appearance you see is more than just a base color. For one you have fine gradients from one one material to the other, but more importantly you also have reflections,highlights and shadows, which are not influenced by the base color. (Those are basically added on top of it.)

So you need to decompose the image into it's components.

A Example:

In this case we have 3 layers:

• The Background - This contains the elements that shouldn't be colored.
• The Part that should be colored - This is multiplied by the color. (OpenGL multiplies by default if you specify a color other than white.)
• The Highlights - These are drawn additive over the whole image. It's not white but yellow, to emulate a hue change. Objects aren't just a single color, the hue changes together with the brightness.

Answer 3

I would personally recommend using mask textures to achieve what you want. This will ensure that your main RGB24 texture will keep its original colour quality without sacrificing any precision. It will also give you plenty of artistic freedom to blend your main texture with your colour mask.

Each mask can be viewed as a grayscale texture that will linearly interpolate the colour of your base texture with your custom color. Let's say you are letting your users customize two colors, the pixel shader will look something like this:

inputs: MainTexture(RGB), Mask1Texture(A), Mask2Texture(A), Colour1(float), Colour2(float)

output: (Mask1Texture+Mask2Texture)-MainTexture + Colour1*Mask1Texture + Colour2*Mask2Texture

This suggests that the more a mask has a large value for one pixel, the less your main texture will impact the output colour of that pixel. For example you could convert your dragon texture into a grayscale and erase everything but your wings to have custom wing colour no matter the body colour.

I have used this technique for mobile games and it won't affect your overall performance. It might cost you a 33% more RAM per texture but the trade-off for quality is probably worth it.

P.s. If you're only thinking of using one custom colour, you can simply use the Alpha channel of your RGBA32 main texture as your mask.

Answer 4

you can use color palettes and let the player edit the palette. If you use shaders, you can use 1D textures as palettes and the original gray value as index.

To convert a true color image into an image with 255 colors, you can take all your pixel color values and group them in the 3d color space to 255 clusters with the k-means algorithm. Or use generic image conversion tools. Then it is important to mention that interpolation of the gray value texture will be an interpolation of indices in your color textures. This can lead to a result where you have several colors between two texels of your original image. This can be solved by disabling interpolation (I think you do not want to do that) or by sorting your color palette in a useful manner.

Answer 5

you could convert the image to a gray image but still save it with rgba channels. store a weight value in the alpha channel then use this to decide how much dye to apply to a pixel. this weight can be calculated based on how close the color is to white. the closer to white the pixel is, the less dye should apply or the lower the weight should be. this will leave most highlights with their original lightness, but apply a bit of the dye to it. the final pixel color can then be found by calculating each channel Ro + (Rd * Ao) where Ro is the original red, Rd is the red in the dye color and Ao is the Alpha of the original. so all white pixels get no new color and all black pixels assume the dye color.