Skip to main content
Version: Phaser v4.0.0

Phaser.GameObjects.Components.Tint

Scope: static

Source: src/gameobjects/components/Tint.js#L9
Since: 3.0.0

Static functions​

isTinted​

isTinted: boolean​

Description:

Does this Game Object have a tint applied?

Returns true if any of the four corner tint values differ from 0xffffff, or if the tintMode property is set to anything other than MULTIPLY. Returns false when all four tint values are 0xffffff and the tint mode is MULTIPLY, which is the default untinted state.

Tags:

  • webglOnly

Source: src/gameobjects/components/Tint.js#L218
Since: 3.11.0

tint​

tint: number​

Description:

The tint value being applied to the whole of the Game Object. Returns the value of tintTopLeft when read. When written, the same color value is applied to all four corner tint properties (tintTopLeft, tintTopRight, tintBottomLeft, and tintBottomRight) simultaneously.

Tags:

  • webglOnly

Source: src/gameobjects/components/Tint.js#L194
Since: 3.0.0

tintBottomLeft​

tintBottomLeft: number​

Description:

The tint value being applied to the bottom-left vertex of the Game Object. This value is interpolated from the corner to the center of the Game Object. The value should be set as a hex number, i.e. 0xff0000 for red, or 0xff00ff for purple.

Source: src/gameobjects/components/Tint.js#L44
Since: 3.0.0

tintBottomRight​

tintBottomRight: number​

Description:

The tint value being applied to the bottom-right vertex of the Game Object. This value is interpolated from the corner to the center of the Game Object. The value should be set as a hex number, i.e. 0xff0000 for red, or 0xff00ff for purple.

Source: src/gameobjects/components/Tint.js#L56
Since: 3.0.0

tintMode​

tintMode: Phaser.TintModes​

Description:

The tint mode to use when applying the tint to the texture.

Available modes are:

  • Phaser.TintModes.MULTIPLY (default)

  • Phaser.TintModes.FILL

  • Phaser.TintModes.ADD

  • Phaser.TintModes.SCREEN

  • Phaser.TintModes.OVERLAY

  • Phaser.TintModes.HARD_LIGHT

Note that in Phaser 3, tint mode and color were set at the same time. In Phaser 4 they are separate settings.

Source: src/gameobjects/components/Tint.js#L68
Since: 4.0.0

tintTopLeft​

tintTopLeft: number​

Description:

The tint value being applied to the top-left vertex of the Game Object. This value is interpolated from the corner to the center of the Game Object. The value should be set as a hex number, i.e. 0xff0000 for red, or 0xff00ff for purple.

Source: src/gameobjects/components/Tint.js#L20
Since: 3.0.0

tintTopRight​

tintTopRight: number​

Description:

The tint value being applied to the top-right vertex of the Game Object. This value is interpolated from the corner to the center of the Game Object. The value should be set as a hex number, i.e. 0xff0000 for red, or 0xff00ff for purple.

Source: src/gameobjects/components/Tint.js#L32
Since: 3.0.0

Static functions​

clearTint​

<instance> clearTint()​

Description:

Clears all tint values associated with this Game Object.

Immediately sets the color values back to 0xffffff and the tint mode to MULTIPLY, which results in no visible change to the texture.

Tags:

  • webglOnly

Returns: Phaser.GameObjects.Components.Tint - This Game Object instance.

Source: src/gameobjects/components/Tint.js#L89
Since: 3.0.0

setTint​

<instance> setTint([topLeft], [topRight], [bottomLeft], [bottomRight])​

Description:

Sets the tint color on this Game Object.

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

To modify the tint color once set, either call this method again with new values or use the tint property to set all colors at once. Or, use the properties tintTopLeft, tintTopRight, tintBottomLeft and tintBottomRight to set the corner color values independently.

To remove a tint call clearTint.

The tint color is combined according to the tint mode. By default, this is MULTIPLY.

Note that, in Phaser 3, this would also swap the tint mode if it was set to fill. In Phaser 4, the tint mode is separate: use setTintMode.

Tags:

  • webglOnly

Parameters:

nametypeoptionaldefaultdescription
topLeftnumberYes"0xffffff"The tint being applied to the top-left of the Game Object. If no other values are given this value is applied evenly, tinting the whole Game Object.
topRightnumberYesThe tint being applied to the top-right of the Game Object.
bottomLeftnumberYesThe tint being applied to the bottom-left of the Game Object.
bottomRightnumberYesThe tint being applied to the bottom-right of the Game Object.

Returns: Phaser.GameObjects.Components.Tint - This Game Object instance.

Source: src/gameobjects/components/Tint.js#L109
Since: 3.0.0

setTintFill​

<instance> setTintFill()​

Description:

Deprecated method which does nothing. In Phaser 3, this would set the tint color, and set the tint mode to fill. In Phaser 4, use gameObject.setTint(color).setTintMode(Phaser.TintModes.FILL) instead.

Tags:

  • webglOnly

Source: src/gameobjects/components/Tint.js#L178
Since: 3.11.0

setTintMode​

<instance> setTintMode(mode)​

Description:

Sets the tint mode to use when applying the tint to the texture.

Note that, in Phaser 3, tint mode and color were set at the same time. In Phaser 4 they are separate settings.

Tags:

  • webglOnly

Parameters:

nametypeoptionaldescription
modenumber | Phaser.TintModesNoThe tint mode to use.

Returns: Phaser.GameObjects.Components.Tint - This Game Object instance.

Source: src/gameobjects/components/Tint.js#L159
Since: 4.0.0