Skip to main content
Version: Phaser v4.0.0

GradientMap

The GradientMap Filter Controller.

This controller manages the GradientMap effect for a Camera.

GradientMap recolors an image using a ColorRamp. The image is converted to a progress value at each point, and that progress is evaluated as a color along the ramp.

The progress value is normally the brightness of the image. You can use the colorFactor and color properties to customize it.

Constructor

new GradientMap(camera, [config])

Parameters

nametypeoptionaldescription
cameraPhaser.Cameras.Scene2D.CameraNoThe camera that owns this filter.
configPhaser.Types.Filters.GradientMapConfigYesThe configuration object for the GradientMap effect.

Scope: static

Extends

Phaser.Filters.Controller

Source: src/filters/GradientMap.js#L11
Since: 4.0.0

Inherited Members

From Phaser.Filters.Controller:


Public Members

alpha

alpha: number

Description:

The blend strength of the gradient map effect over the original image, in the range 0 (no effect, original image fully visible) to 1 (full gradient map effect, original image fully replaced).

Source: src/filters/GradientMap.js#L140
Since: 4.0.0


color

color: Array.<number>

Description:

RGBA offset values added directly to the ramp progress after colorFactor has been applied. Each element corresponds to a channel: red, green, blue, and alpha. For example, setting a channel to 1 when its corresponding colorFactor entry is -1 effectively inverts that channel's contribution to the progress value.

Source: src/filters/GradientMap.js#L85
Since: 4.0.0


colorFactor

colorFactor: Array.<number>

Description:

RGBA multipliers applied to each channel of the source image to compute the ramp progress value. The results are summed together. The defaults [ 0.3, 0.6, 0.1, 0 ] approximate standard luminance weights, producing a perceptually accurate grayscale progress. Keep the sum of factors equal to 1 for a normalized result, or use negative values (paired with color offsets) to invert a channel's contribution.

Source: src/filters/GradientMap.js#L106
Since: 4.0.0


dither

dither: boolean

Description:

Whether to use Interleaved Gradient Noise to dither the ramp. This can reduce banding, but the effect is easily lost if the image is later transformed.

Source: src/filters/GradientMap.js#L73
Since: 4.0.0


ramp

ramp: Phaser.Display.ColorRamp

Description:

The ColorRamp used to recolor the image. Each pixel's brightness (or custom progress value derived from colorFactor and color) is looked up along this ramp to determine its output color.

Source: src/filters/GradientMap.js#L62
Since: 4.0.0


unpremultiply

unpremultiply: boolean

Description:

Whether the input should be unpremultiplied before computing progress. This means that transparent colors are considered at full brightness. It is usually desirable.

Source: src/filters/GradientMap.js#L128
Since: 4.0.0


Inherited Methods

From Phaser.Filters.Controller: