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. :)


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).

  • 2
    \$\begingroup\$ This is so off-topic but I got to ask - how did you make that second image? \$\endgroup\$
    – DMan
    Feb 12 '11 at 4:18
  • \$\begingroup\$ @DMan Photoshop for the different note images and then Illustrator to arrange stuff ;) \$\endgroup\$
    – bummzack
    Feb 12 '11 at 10:10
  • \$\begingroup\$ 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 ? \$\endgroup\$
    – Mr_Qqn
    Feb 12 '11 at 11:31
  • \$\begingroup\$ 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? \$\endgroup\$
    – bummzack
    Feb 12 '11 at 12:04
  • \$\begingroup\$ Yes, for the moment I will generate a sprite sheet with all the variations. \$\endgroup\$
    – 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.

  • \$\begingroup\$ Problem with this is that the shading won't be recognizable when using bright colors (for example yellow). \$\endgroup\$
    – bummzack
    Feb 11 '11 at 23:00
  • \$\begingroup\$ 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. \$\endgroup\$
    – ggambett
    Feb 11 '11 at 23:02
  • \$\begingroup\$ BTW, I'm sorry, I hadn't seen the "probably simpler approach" in your answer. \$\endgroup\$
    – ggambett
    Feb 11 '11 at 23:04
  • 1
    \$\begingroup\$ You're right about the multiplying. I was mixing things up. Lack of coffee I guess. \$\endgroup\$
    – bummzack
    Feb 11 '11 at 23:55
  • \$\begingroup\$ Thanks for your answer, but as I'm learning opengl 3 I'd prefer to use the other method. :) \$\endgroup\$
    – Mr_Qqn
    Feb 12 '11 at 11:35

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.