Take the 2-minute tour ×
Game Development Stack Exchange is a question and answer site for professional and independent game developers. It's 100% free, no registration required.

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
add comment

2 Answers

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
2  
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
show 1 more comment

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
1  
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
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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