sprite.tint

Category:Sprites

This property overlays a color on top of a sprite to tint it. This tint doesn't change the existing colors of a sprite, but is more like putting a pane of colored glass over the top of the sprite. Because of this, you may find that sprites with bold or dark colors become darker when you apply a tint.

You can assign the tint color in a number of ways, including:

  • A string containing a named HTML color, such as "orange" or "teal". A full list of color names can be found at W3 Schools - Colors
  • A string containing a hexadecimal color, such as "#FF7700" or "#00ADBC"
  • An RGB string, like "rgb(255, 0, 127)";

Examples

var red_cow = createSprite(100, 200);
red_cow.setAnimation("cow");
red_cow.tint = "red";

var blue_cow = createSprite(200, 200);
blue_cow.setAnimation("cow");
blue_cow.tint = "#0000FF";

var ghost_cow = createSprite(300, 200);
ghost_cow.setAnimation("cow");
ghost_cow.alpha = 0.5;

drawSprites();

Syntax

sprite.tint = "blue";

Returns

The sprite's tint color, or null if no tint has been applied.

Tips

  • A full list of color names can be found at W3 Schools - Colors.
  • For more specific color selection, or to randomize color selection, use rgb() as a parameter to fill instead of a color name.
  • You can make a sprite transparent by giving it a tint with alpha transparency (using the fourth optional parameter of rgb()). If you want to make a sprite semi-transparent without changing it's color, use white as the tint color with an additional alpha transparency parameter (eg rgb(255, 255, 255, 0.5) for 50% transparent).
  • Sprites all have the same properties and you use the dot notation (combining the name of the sprite, followed by a dot, with the label of the property) to both access and update the property for that sprite.
  • Any changes to the properties of a sprite will not be seen until after drawSprites() is called.

Found a bug in the documentation? Let us know at documentation@code.org