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:
These numbers are in hexidecimal (base 16), let's see what they look like in decimal (base 10):
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.
Now let's just take the 2 red color channels from each color (
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:
Finally, multiply this new value by 255 to get our final red color channel value:
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:
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!