Tint

Overview

The tint property allows you to apply a color overlay to any Graphic. When a Tint is set, its color is multiplied with the original pixel colors of the graphic, allowing you to easily recolor or visually modify sprites, shapes, and other graphics.

This is useful for effects like:

• Changing a character’s outfit color
• Flashing a sprite red when taking damage
• Applying a global mood or atmosphere tint

Example

Start with a simple Actor with a Sprite attached to it.

ts
class TintActor extends ex.Actor {
  constructor(center:ex.Vector) {
    super({ width: 100, height: 100, pos: center });
    // Pretend this is our loaded sprite
    const swordSprite = new ex.Sprite({ image: new ex.ImageSource('./sword.png') });
    this.graphics.use(swordSprite);
  }
}
 
game.add(new TintActor(game.screen.center));

ts
class TintActor extends ex.Actor {
  constructor(center:ex.Vector) {
    super({ width: 100, height: 100, pos: center });
    // Pretend this is our loaded sprite
    const swordSprite = new ex.Sprite({ image: new ex.ImageSource('./sword.png') });
    this.graphics.use(swordSprite);
  }
}
 
game.add(new TintActor(game.screen.center));

This will give you an Actor like this:

To add a light red tint to it we need to tweak this to add the tint to the graphic.

ts
class TintActor extends ex.Actor {
 
  constructor(center:ex.Vector, tint: ex.Color) {  //<-------------  added Tint parameter
    super({ width: 100, height: 100, pos: center });
    // Pretend this is our loaded sprite
    const swordSprite = new ex.Sprite({ image: new ex.ImageSource('./sword.png') });
    swordSprite.tint = tint;                    //<-------------  setting the Graphic's tint property
    this.graphics.use(swordSprite);
  }
}
 
game.add(new TintActor(game.screen.center, ex.Color.fromHex("#FF000050")));

ts
class TintActor extends ex.Actor {
 
  constructor(center:ex.Vector, tint: ex.Color) {  //<-------------  added Tint parameter
    super({ width: 100, height: 100, pos: center });
    // Pretend this is our loaded sprite
    const swordSprite = new ex.Sprite({ image: new ex.ImageSource('./sword.png') });
    swordSprite.tint = tint;                    //<-------------  setting the Graphic's tint property
    this.graphics.use(swordSprite);
  }
}
 
game.add(new TintActor(game.screen.center, ex.Color.fromHex("#FF000050")));

Gives you:

Opacity

To control 'how much' tinting is applied to a Graphic you can use the alpha channel of the color to lighten or deepen its tinting.

Clearing a Tint

To clear a tint from a graphic, just set its tint to white #FFFFFF