If you haven't already, please visit Modifying the Color of an Image! This tutorial is intended to provide further insight in how to better control the tinting process.

var image:Image = new Image(texture);
 
image.color = 0xA1B2C3;

So what does the above code do exactly? That's what we're here to find out!

Setting the color of an image causes Starling to multiply each pixel of the image with the number you have given (in this case 0xA1B2C3). Although it's actually a little more complicated than that.

The color you set is essentially 3 smaller numbers grouped together which each number representing either red, green or blue (the colors that make up a single pixel). For example, take 0xA1B2C3 and split it up into 3 numbers:

• A1 = red
• B2 = green
• C3 = blue.

These numbers are in hexidecimal (base 16), let's see what they look like in decimal (base 10):

• 161 = red
• 178 = green
• 195 = blue

Each of the 3 numbers can range from 0 (00 in base 16) to 255 (FF in base 16). The higher the number, the more of that color there is. So if a pixel is colored 0xFF0000 that would mean the pixel is fully red.

It's a complicated process to let's take it step by step. For this we are going to focus on 1 pixel of the image. Let's imagine the color of this pixel is 0xAABBCC. For reference we will call this the base color. With 0xA1B2C3 being our tint color.

• Split the base color into the three color channels (red, green and blue).
• Convert these numbers into base 10.
• Repeat this process with the tint color.

Now let's just take the 2 red color channels from each color (AA and A1) and use their base 10 values (170 and 161). Now that we have these, we can figure out what color the pixel will be once the base color has been tinted with the tint color by following these instructions:

• 170 / 255 = 0.666…
• 161 / 255 = 0.631…

Now take these two new values and multiply them together:

• 0.666 * 0.631 = 0.421…

Finally, multiply this new value by 255 to get our final red color channel value:

• 0.421 * 255 = 107

Now let's convert 107 back into base 16 to get 6B. That's our new red color channel!

(170 * 161) / 255 = 107

Now it's just a case of repeating the above steps for the green and blue color channels to get the final color of our pixel:

• 0x6B839C

If you'd implement that in AS3, a method like the following would to the trick:

private static function tintColor(baseColor:uint, tintColor:uint):uint
{
    var red:uint = Color.getRed(baseColor);
    var green:uint = Color.getGreen(baseColor);
    var blue:uint = Color.getBlue(baseColor);
    var alpha:uint = Color.getAlpha(baseColor);
 
    var redTint:Number = Color.getRed(tintColor) / 255.0;
    var greenTint:Number = Color.getGreen(tintColor) / 255.0;
    var blueTint:Number = Color.getBlue(tintColor) / 255.0;
    var alphaTint:Number = Color.getAlpha(tintColor) / 255.0;
 
    return Color.argb(alpha * alphaTint, red * redTint, 
                      green * greenTint, blue * blueTint);
}

So that is essentially how color multiplication works. It's a long and complicated process for humans but to a computer, it's no sweat. Although this can come in useful if, for example, you need to calculate what tint you need to achieve a certain color. That's actually the exact reason I needed to know how to do this calculation so I set out to find out how color multiplication works. Now that I fully understand it, I figured it would be worthwhile to note my findings in this wiki!

So I hope this information will benefit you as much as it has me, if not more. Feel free to make any adjustments where you see fit and good luck with your present and future Starling projects!