Don't tint, but "Colorize" sprite

Question

In my 2D tile based game, the player can paint tiles to change there color. The simple approach (and what I have already done) is to use the tint parameter in SpriteBatch.Draw.

This looks nice, and here is an example:

enter image description here

But say, I want to paint the wood white. If you have ever messed with the tint, you know this isn't possible using the tint parameter. Color.White will tint the sprite the default color, and not white. This isn't a major problem, but I suppose some users might want it.

My question is, is there a method to color a sprite based on hue/saturation instead of tint. Similar to the "colorify" function in GIMP.

An obvious approach would to be to use this function in GIMP and just export sprites for each color. The trouble comes in at the fact that this would take forever to do for all my sprites, and each sprite has multiple variations, meaning you could have in total 100+ combos for one block type.

Is this possible? I suppose a shader might get the job done.

Why don't you make the base sprite as bright as possible (nearly white)? You could achieve arbitrary effects with a pixel shader, but I doubt that this is necessary in this case. Gimp uses the same technique as the tint parameter, in my opinion. — Nico Schertler
Look into the HSV color model: link. You can convert your texture from RGB into HSV, apply an offset to the Hue to change color, and then convert it back to RGB. Although it would definitely be easier to just have your texture be bright white to start, and use the built in XNA tinting. — foolmoron

Andrew Russell Andrew Russell · Accepted Answer · 2013-09-02T15:44:07

The "colourify" function in The GIMP simply does a desaturate (convert to grayscale), followed by a colour multiplication. Very simple. This should be the equivalent HLSL (untested):

float4 original = tex2d(...);
float q = (original.r + original.g + original.b) / 3;
q /= original.a; // optional - undo alpha premultiplication
return float4(tint.rgb * q, tint.a * original.a);

But you could achieve the same effect by simply storing all your textures desaturated to begin with and using the default SpriteBatch shader for its multiplication. If you don't want to modify your source art, you could do it in a custom content processor.

Although, if you want to use a custom shader, you can do something more sophisticated. You could implement a full hue-rotation (kinda complex). But perhaps you could consider something like the "Overlay" blend mode (very simple) - which lets you colourize the grays, while preserving both the highlights and lowlights (instead of multiply, which also colourizes the highlights).

Don't tint, but "Colorize" sprite

2 Answers