Sprites can be translated, rotated or scaled. This affects where and how their canvas is displayed within the scene. Sprites with a "rotation" of 0 are untransformed. The canvas of an untransformed sprite has a positive x-axis pointing right and a positive y-axis pointing up.

Figure 1: Untransformed sprite with an image drawn on its canvas at 0,0

A sprite with a rotation of 180 degrees will render its canvas upside down. The two scaling properties "scalex" and "scaley" can be used to stretch, contract or mirror the canvas. Scaling is not affected by the rotation of the sprite. The "scalex" value of 0.5 will contract the sprite along its x-axis to half its original size. Negative scale values will flip or mirror the canvas along its x or y axis.

Figure 2: Sprite transformations

In addition to being transformed, sprites can also be modulated. The "alpha" property controls the transparency of sprites. The "color" property modulates the RGB color values of everything drawn on the canvas. Let's say that we have drawn a white (255, 255, 255) circle on some sprite's canvas. Setting the "color" property to red (255, 0, 0) will truncate the greens and blues of the circle making it appear red. If the circle was black (0, 0, 0) trying to modulate its colors would have no effect since black is the absence of color.

Figure 3: Sprite modulation

When our scene contains overlapping sprites, we need to define the order in which those sprites should be rendered. To do so, we need to assign each sprite a unique "depth" value. There is no way to determine the order in which two overlapping sprites will be rendered if they have the same depth.

Blending modes