How to modify the color of an image

Have you ever wondered why Sparrow's SPImage class contains a color-property? Well, you can use that property to tint a texture in any color!

While this can be used for different things, e.g. highlighting items of interest, I want to show you an especially useful way to save texture memory.

Let's say you have a “SameGame”- or “Tetris”-style game with lots of blocks with different colors. Thanks to the color-property of SPImage, you only need to create one white image of such a block. To display the actual block on the screen, you just need to set its color.

SPTexture *blockTexture = [SPTexture textureWithContentsOfFile:
                           @"block.png"];
 
SPImage *redBlock = [SPImage imageWithTexture:blockTexture];
redBlock.color = 0xff0000;
 
SPImage *greenBlock = [SPImage imageWithTexture:blockTexture];
greenBlock.color = 0x00ff00;
 
// etc.!

The output color is the result of a multiplication of the color of a pixel in the texture by the color of the quad. That means that you can never use the color-property to make a texture look brighter, but only darker. (That's because both sides of the multiplication have values between 0 and 1. To make a color brighter, you would have to multiply it with a value bigger than 1!)

Tinting blocks for SameGame

  tutorials/modifying_the_color_of_an_image.txt · Last modified: 2013/03/05 10:19 (external edit)
 
Powered by DokuWiki