Phaser API Documentation

Only webGL setCharacterTint([start], [length], [tintFill], [topLeft], [topRight], [bottomLeft], [bottomRight])


Sets a tint on a range of characters in this Bitmap Text, starting from the start parameter index and running for length quantity of characters.

The start parameter can be negative. In this case, it starts at the end of the text and counts backwards start places.

You can also pass in -1 as the length and it will tint all characters from start up until the end of the string. Remember that spaces and punctuation count as characters.

This is a WebGL only feature and only works with Static Bitmap Text, not Dynamic.

The tint works by taking the pixel color values from the Bitmap Text texture, and then multiplying it by the color value of the tint. You can provide either one color value, in which case the whole character will be tinted in that color. Or you can provide a color per corner. The colors are blended together across the extent of the character range.

To swap this from being an additive tint to a fill based tint, set the tintFill parameter to true.

To modify the tint color once set, call this method again with new color values.

Using setWordTint can override tints set by this function, and vice versa.

To remove a tint call this method with just the start, and optionally, the length parameters defined.


name type arguments Default description
start number <optional> 0

The starting character to begin the tint at. If negative, it counts back from the end of the text.

length number <optional> 1

The number of characters to tint. Remember that spaces count as a character too. Pass -1 to tint all characters from start onwards.

tintFill boolean <optional> false

Use a fill-based tint (true), or an additive tint (false)

topLeft number <optional> 0xffffff

The tint being applied to the top-left of the character. If not other values are given this value is applied evenly, tinting the whole character.

topRight number <optional>

The tint being applied to the top-right of the character.

bottomLeft number <optional>

The tint being applied to the bottom-left of the character.

bottomRight number <optional>

The tint being applied to the bottom-right of the character.


This BitmapText Object.