Have you ever wondered why Starling's Image 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 Image, 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.

[Embed(source="white_block.png")]
private var EmbeddedTexture:Class;
 
var blockTexture:Texture = Texture.fromBitmap(new EmbeddedTexture());
 
var redBlock:Image = new Image(blockTexture);
redBlock.color = Color.RED;
 
var greenBlock:Image = new Image(blockTexture);
greenBlock.color = Color.GREEN;
 
// 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!)

Need something a little more advanced? Check out Modifying the Color of an Image (Advanced)!

With Starling 1.5 or above, you can use a ColorMatrixFilter

[Embed(source="white_block.png")]
private var EmbeddedTexture:Class;
 
var blockTexture:Texture = Texture.fromBitmap(new EmbeddedTexture());
 
 
var filterRed:ColorMatrixFilter = new ColorMatrixFilter();
filterRed.tint(0xFF0000, 0.8);
 
var filterGreen:ColorMatrixFilter = new ColorMatrixFilter();
filterGreen.tint(0x00FF00, 0.8);
 
 
var redBlock:Image = new Image(blockTexture);
redBlock.filter = filterRed;
 
var greenBlock:Image = new Image(blockTexture);
greenBlock.filter = filterGreen;