Phaser API Documentation

  Version: 
Filter

The Gradient FX Controller.

This FX controller manages the gradient effect for a Game Object.

The gradient overlay effect is a visual technique where a smooth color transition is applied over Game Objects, such as sprites or UI components. This effect is used to enhance visual appeal, emphasize depth, or create stylistic and atmospheric variations. It can also be utilized to convey information, such as representing progress or health status through color changes.

A Gradient effect is added to a Game Object via the FX component:

const sprite = this.add.sprite();

sprite.preFX.addGradient();
sprite.postFX.addGradient();

Constructor:

new Gradient(gameObject, [color1], [color2], [alpha], [fromX], [fromY], [toX], [toY], [size])

Parameters:

name type arguments Default description
gameObject Phaser.GameObjects.GameObject

A reference to the Game Object that has this fx.

color1 number <optional> 0xff0000

The first gradient color, given as a number value.

color2 number <optional> 0x00ff00

The second gradient color, given as a number value.

alpha number <optional> 0.2

The alpha value of the gradient effect.

fromX number <optional> 0

The horizontal position the gradient will start from. This value is normalized, between 0 and 1, and is not in pixels.

fromY number <optional> 0

The vertical position the gradient will start from. This value is normalized, between 0 and 1, and is not in pixels.

toX number <optional> 0

The horizontal position the gradient will end at. This value is normalized, between 0 and 1, and is not in pixels.

toY number <optional> 1

The vertical position the gradient will end at. This value is normalized, between 0 and 1, and is not in pixels.

size number <optional> 0

How many 'chunks' the gradient is divided in to, as spread over the entire height of the texture. Leave this at zero for a smooth gradient, or set higher for a more retro chunky effect.

Since: 3.60.0
Source: src/fx/Gradient.js (Line 11)

Extends


Members

active: boolean
Focus
Focus

Description:

Toggle this boolean to enable or disable this effect, without removing and adding it from the Game Object.

Only works for Pre FX.

Post FX are always active.

Type:
boolean
Inherited from: Phaser.FX.Controller#active
Since: 3.60.0
Source: src/fx/Controller.js (Line 47)
Focus
Focus
alpha: number
Focus
Focus

Description:

The alpha value of the gradient effect.

Type:
number
Since: 3.60.0
Source: src/fx/Gradient.js (Line 64)
Focus
Focus
color1: number
Focus
Focus

Description:

The first gradient color, given as a number value.

Type:
number
Since: 3.60.0
Source: src/fx/Gradient.js (Line 150)
Focus
Focus
color2: number
Focus
Focus

Description:

The second gradient color, given as a number value.

Type:
number
Since: 3.60.0
Source: src/fx/Gradient.js (Line 177)
Focus
Focus
fromX: number
Focus
Focus

Description:

The horizontal position the gradient will start from. This value is normalized, between 0 and 1 and is not in pixels.

Type:
number
Since: 3.60.0
Source: src/fx/Gradient.js (Line 85)
Focus
Focus
fromY: number
Focus
Focus

Description:

The vertical position the gradient will start from. This value is normalized, between 0 and 1 and is not in pixels.

Type:
number
Since: 3.60.0
Source: src/fx/Gradient.js (Line 94)
Focus
Focus

Description:

A reference to the Game Object that owns this effect.

Type:
Inherited from: Phaser.FX.Controller#gameObject
Since: 3.60.0
Source: src/fx/Controller.js (Line 38)
Focus
Focus
glcolor1: Array.<number>
Focus
Focus

Description:

The internal gl color array for the starting color.

Type:
Array.<number>
Since: 3.60.0
Source: src/fx/Gradient.js (Line 121)
Focus
Focus
glcolor2: Array.<number>
Focus
Focus

Description:

The internal gl color array for the ending color.

Type:
Array.<number>
Since: 3.60.0
Source: src/fx/Gradient.js (Line 130)
Focus
Focus
size: number
Focus
Focus

Description:

Sets how many 'chunks' the gradient is divided in to, as spread over the entire height of the texture. Leave this at zero for a smooth gradient, or set to a higher number to split the gradient into that many sections, giving a more banded 'retro' effect.

Type:
number
Since: 3.60.0
Source: src/fx/Gradient.js (Line 73)
Focus
Focus
toX: number
Focus
Focus

Description:

The horizontal position the gradient will end. This value is normalized, between 0 and 1 and is not in pixels.

Type:
number
Since: 3.60.0
Source: src/fx/Gradient.js (Line 103)
Focus
Focus
toY: number
Focus
Focus

Description:

The vertical position the gradient will end. This value is normalized, between 0 and 1 and is not in pixels.

Type:
number
Since: 3.60.0
Source: src/fx/Gradient.js (Line 112)
Focus
Focus
type: number
Focus
Focus

Description:

The FX_CONST type of this effect.

Type:
number
Inherited from: Phaser.FX.Controller#type
Since: 3.60.0
Source: src/fx/Controller.js (Line 29)
Focus
Focus

Methods

destroy()
Focus
Focus

Description:

Destroys this FX Controller.

Inherited from: Phaser.FX.Controller#destroy
Since: 3.60.0
Source: src/fx/Controller.js (Line 81)
Focus
Focus
setActive(value)
Focus
Focus

Description:

Sets the active state of this FX Controller.

A disabled FX Controller will not be updated.

Parameters:

name type description
value boolean

true to enable this FX Controller, or false to disable it.

Returns:
Description:

This FX Controller instance.

Inherited from: Phaser.FX.Controller#setActive
Since: 3.60.0
Source: src/fx/Controller.js (Line 62)
Focus
Focus