Version: Phaser v4.0.0

Gradient

A Gradient Game Object.

This Game Object is a quad which displays a gradient. You can manipulate this object like any other, make it interactive, and use it in filters and masks to create visually stunning effects.

Behind the scenes, a Gradient is a Phaser.GameObjects.Shader using a specific shader program.

The gradient color is determined by a Phaser.Display.ColorRamp, containing one or more Phaser.Display.ColorBand objects. The ramp is laid out along the shape of the gradient, originating from the start location. The shapeMode describes how the gradient fills elsewhere, e.g. a LINEAR gradient creates straight bands while a RADIAL gradient creates circles.

Note that the shape of the gradient is fitted to a square. If its width and height are not equal, the shape will be distorted. This may be what you want.

A Gradient can be animated by modifying its offset property, or by modifying the ramp data. If you modify ramp data, you may have to call gradient.ramp.encode() to rebuild it.

Constructor

new Gradient(scene, [config], [x], [y], [width], [height])

Parameters

name	type	optional	default	description
scene	Phaser.Scene	No		The Scene to which this Game Object belongs.
config	Phaser.Types.GameObjects.Gradient.GradientQuadConfig	Yes		The configuration for this Game Object.
x	number	Yes	0	The horizontal position of this Game Object in the world.
y	number	Yes	0	The vertical position of this Game Object in the world.
width	number	Yes	128	The width of the Game Object.
height	number	Yes	128	The height of the Game Object.

Scope: static

Extends

Phaser.GameObjects.Shader

Source: src/gameobjects/gradient/Gradient.js#L14
Since: 4.0.0

Inherited Members

From Phaser.GameObjects.Components.BlendMode:

blendMode

From Phaser.GameObjects.Components.ComputedSize:

From Phaser.GameObjects.Components.Depth:

depth

From Phaser.GameObjects.Components.Filters:

From Phaser.GameObjects.Components.Origin:

From Phaser.GameObjects.Components.ScrollFactor:

From Phaser.GameObjects.Components.Transform:

From Phaser.GameObjects.Components.Visible:

visible

From Phaser.GameObjects.GameObject:

From Phaser.GameObjects.Shader:

Public Members

dither

dither: boolean

Description:

Whether to dither the gradient. This helps to eliminate banding by adding a tiny amount of noise to the gradient. Dither may lose effectiveness if resized, so you should only enable it when it will make a difference.

Source: src/gameobjects/gradient/Gradient.js#L242
Since: 4.0.0

offset

offset: number

Description:

Move the start of the gradient. You can animate gradients in this way.

Note that the offset effect changes based on shape and repeat mode. Conic gradients may appear weird!

Animate the offset from -1 to 1 using mode 1 (TRUNCATE) to create a one-time shockwave.

Use mode 2 (SAWTOOTH) or 3 (TRIANGULAR) to create a moving pattern.

Source: src/gameobjects/gradient/Gradient.js#L132
Since: 4.0.0

ramp

ramp: Phaser.Display.ColorRamp

Description:

The ramp which contains the color data for the gradient.

By default, this is a linear progression from black to white. You can encode much more complex gradients with the ColorRamp.

Source: src/gameobjects/gradient/Gradient.js#L117
Since: 4.0.0

repeatMode

repeatMode: number

Description:

The repeat mode of the gradient. Gradient progress is evaluated as a number, where 0 is the start of the shape vector and 1 is the end. Repeat mode tells us how to handle that number below 0/above 1.

This can be one of the following:

0 (EXTEND): values are clamped between 0 and 1,

so the ends of the gradient become flat color.
1 (TRUNCATE): values are discarded outside 0-1,

so the ends of the gradient become transparent.
2 (SAWTOOTH): values are modulo 1,

so the gradient repeats.
3 (TRIANGULAR): values rise to 1 then fall to 0,

so the gradient goes smoothly back and forth.

Note that conic gradients never leave the range 0-1 unless offset is applied. They may look weird if you do.

Source: src/gameobjects/gradient/Gradient.js#L151
Since: 4.0.0

shape

shape: Phaser.Types.Math.Vector2Like

Description:

The shape vector of the gradient within its quad. This points from the start in the direction that the gradient flows. Gradient color starts from the start vector and ends at the tip of this.

Source: src/gameobjects/gradient/Gradient.js#L221
Since: 4.0.0

shapeMode

shapeMode: number

Description:

The shape mode of the gradient. Shapes are based on the shape vector.

This can be one of the following:

0 (LINEAR): a ribbon where the shape points from one side to the other.

Commonly used for skies etc.
1 (BILINEAR): like LINEAR, but reflected in both directions.

Useful for gentle waves, reflections etc.
2 (RADIAL): gradient spreads out from the start,

to the radius described by shape.

Useful for glows, ripples etc.
3 (CONIC_SYMMETRIC): gradient is determined by angle to shape,

going from 0 along the shape vector to 1 opposite it.

Useful for sharp-looking features or light effects.
4 (CONIC_ASYMMETRIC): gradient is determined by angle to shape,

going from 0 to 1 with a full rotation. This creates a seam.

Good for creating colors that change with angle,

like speed meters.

Source: src/gameobjects/gradient/Gradient.js#L178
Since: 4.0.0

start

start: Phaser.Types.Math.Vector2Like

Description:

The start location of the gradient within its quad. The gradient emanates from this point. Gradient color starts here and ends at the tip of the shape vector.