Take the 2-minute tour ×

In my rhythm game, I have a note object which can be of a different color depending on the note chart. I could use a sprite sheet with all the different color variations I use, but I would prefer to parametrize this. (Each note sprite is made of different shades of a hue. For example a red note has only red, light red and dark red.)

How can I colourise a sprite anew?

I'm working with OpenGL, but any algorithm or math explanation will do. :)

share|improve this question

2 Answers 2

up vote 8 down vote accepted

I'd probably use a single color image (eg. your note-sprite) with alpha channel and then color the whole image with your base-color. So, something like in the following image (from wikimedia commons):

image of a music-note

If your color was red, you would then color the note (all the black parts) with the same red. What you would need in addition, is a grayscale image with the shading of the note. Then combine the shading with the flat color by using blend-modes like Multiply and/or Screen.

Another, probably simpler approach would be to just have a grayscale image where you would multiply each color component with your selected color. So if you have a gray value of 0.5, and a red color RGB(1.0, 0.0, 0.0), that would result in RGB(0.5, 0.0, 0.0) for the given pixel.

Update: Here's an example image to illustrate what I mean with the blend-modes:

blending layers

Of course you could just use the shadow layer if you don't need the highlights (which is basically the same as the simpler approach mentioned above).

share|improve this answer
This is so off-topic but I got to ask - how did you make that second image? –  DMan Feb 12 '11 at 4:18
@DMan Photoshop for the different note images and then Illustrator to arrange stuff ;) –  bummzack Feb 12 '11 at 10:10
Thanks for your explanation. :) Is it possible to do the blend into a fragment shader ? Or is it preferable to stay with the opengl blend function and render the 3 images separately ? –  Mr_Qqn Feb 12 '11 at 11:31
I'm not a shader expert, but from my limited knowledge I'd say it shouldn't be a problem. Alternatively you could just pre-calculate the images you need on the CPU? –  bummzack Feb 12 '11 at 12:04
Yes, for the moment I will generate a sprite sheet with all the variations. –  Mr_Qqn Feb 12 '11 at 16:46

Make a greyscale (or just white) version of the image you want to show, with a suitable alpha channel. Use the vertex color to "dye" the image.

Vertex color multiplies each channel, so white x red = red, 50% grey x red = 50% red, and so on.

share|improve this answer
Problem with this is that the shading won't be recognizable when using bright colors (for example yellow). –  bummzack Feb 11 '11 at 23:00
Not sure what you mean. Black or very dark grey in the greyscale image multiplied by very bright yellow is still black or very dark yellow. –  ggambett Feb 11 '11 at 23:02
BTW, I'm sorry, I hadn't seen the "probably simpler approach" in your answer. –  ggambett Feb 11 '11 at 23:04
You're right about the multiplying. I was mixing things up. Lack of coffee I guess. –  bummzack Feb 11 '11 at 23:55
Thanks for your answer, but as I'm learning opengl 3 I'd prefer to use the other method. :) –  Mr_Qqn Feb 12 '11 at 11:35

Your Answer


