ColorMatrix
Phaser.Display.ColorMatrix
The ColorMatrix class creates a 5x4 matrix that can be used in shaders and graphics operations. It provides methods required to modify the color values, such as adjusting the brightness, setting a sepia tone, hue rotation and more.
The matrix rows (indices 0, 1, 2, 3, 4 form the first row) are summed to create the red, green, blue, and alpha channels in order. The matrix columns (indices 0, 5, 10, 15 form the first column) describe contributions from the initial channels, typically in the range -1 to 1. The last column (4, 9, 14, 19) contains an addition, expected to be in the range 0-255 (although other values are valid). For example, to set the red channel to the contents of the green channel, the first row would be [0, 1, 0, 0, 0]. To set the red channel to full, regardless of current channels, the first row would be [0, 0, 0, 0, 255].
These operations are the default use, but you can use ColorMatrix to conveniently store data for other purposes.
Use the method getData to return a Float32Array containing the current color values. This shrinks the addition column from the range 0-255 to 0-1 (but does not clamp it).
Scope: static
Source: src/display/ColorMatrix.js#L11
Since: 3.50.0
Public Members
alpha
alpha: number
Description:
The value that determines how much of the original color is used when mixing the colors. A value between 0 (all original) and 1 (all final)
Source: src/display/ColorMatrix.js#L57
Since: 3.50.0
Public Methods
alphaToBrightness
instancealphaToBrightness([multiply])
Description:
Applies an alpha-to-brightness color effect to this ColorMatrix. This replaces the color with a grayscale depiction of the original alpha, where black represents transparency and white represents opacity, and sets the alpha to full.
Parameters:
| name | type | optional | default | description |
|---|---|---|---|---|
| multiply | boolean | Yes | false | Multiply the resulting ColorMatrix (true), or set it (false) ? |
Returns: Phaser.Display.ColorMatrix - This ColorMatrix instance.
Source: src/display/ColorMatrix.js#L525
Since: 4.0.0
alphaToBrightnessInverse
instancealphaToBrightnessInverse([multiply])
Description:
Applies an alpha-to-brightness color effect to this ColorMatrix. This replaces the color with a grayscale depiction of the original alpha, where white represents transparency and black represents opacity, and sets the alpha to full.
Parameters:
| name | type | optional | default | description |
|---|---|---|---|---|
| multiply | boolean | Yes | false | Multiply the resulting ColorMatrix (true), or set it (false) ? |
Returns: Phaser.Display.ColorMatrix - This ColorMatrix instance.
Source: src/display/ColorMatrix.js#L545
Since: 4.0.0
black
instanceblack([multiply])
Description:
Sets this ColorMatrix to be black, only preserving alpha. Useful for cases where you only want the alpha.
Parameters:
| name | type | optional | default | description |
|---|---|---|---|---|
| multiply | boolean | Yes | false | Multiply the resulting ColorMatrix (true), or set it (false) ? |
Returns: Phaser.Display.ColorMatrix - This ColorMatrix instance.
Source: src/display/ColorMatrix.js#L305
Since: 4.0.0
blackWhite
instanceblackWhite([multiply])
Description:
Sets this ColorMatrix to be black and white.
Parameters:
| name | type | optional | default | description |
|---|---|---|---|---|
| multiply | boolean | Yes | false | Multiply the resulting ColorMatrix (true), or set it (false) ? |
Returns: Phaser.Display.ColorMatrix - This ColorMatrix instance.
Source: src/display/ColorMatrix.js#L288
Since: 3.50.0
brightness
instancebrightness([value], [multiply])
Description:
Changes the brightness of this ColorMatrix by the given amount.
Parameters:
| name | type | optional | default | description |
|---|---|---|---|---|
| value | number | Yes | 0 | The amount of brightness to apply to this ColorMatrix. Between 0 (black) and 1. |
| multiply | boolean | Yes | false | Multiply the resulting ColorMatrix (true), or set it (false) ? |
Returns: Phaser.Display.ColorMatrix - This ColorMatrix instance.
Source: src/display/ColorMatrix.js#L167
Since: 3.50.0
brightnessToAlpha
instancebrightnessToAlpha([multiply])
Description:
Applies a brightness-to-alpha color effect to this ColorMatrix. This preserves RGB, but replaces the alpha with the brightness of the color.
Parameters:
| name | type | optional | default | description |
|---|---|---|---|---|
| multiply | boolean | Yes | false | Multiply the resulting ColorMatrix (true), or set it (false) ? |
Returns: Phaser.Display.ColorMatrix - This ColorMatrix instance.
Source: src/display/ColorMatrix.js#L565
Since: 4.0.0
brightnessToAlphaInverse
instancebrightnessToAlphaInverse([multiply])
Description:
Applies a brightness-to-alpha color effect to this ColorMatrix. This preserves RGB, but replaces the alpha with the brightness of the color, inverted.
Parameters:
| name | type | optional | default | description |
|---|---|---|---|---|
| multiply | boolean | Yes | false | Multiply the resulting ColorMatrix (true), or set it (false) ? |
Returns: Phaser.Display.ColorMatrix - This ColorMatrix instance.
Source: src/display/ColorMatrix.js#L583
Since: 4.0.0
brown
instancebrown([multiply])
Description:
Applies a brown tone to this ColorMatrix.
Parameters:
| name | type | optional | default | description |
|---|---|---|---|---|
| multiply | boolean | Yes | false | Multiply the resulting ColorMatrix (true), or set it (false) ? |
Returns: Phaser.Display.ColorMatrix - This ColorMatrix instance.
Source: src/display/ColorMatrix.js#L440
Since: 3.50.0
contrast
instancecontrast([value], [multiply])
Description:
Change the contrast of this ColorMatrix by the amount given.
Parameters:
| name | type | optional | default | description |
|---|---|---|---|---|
| value | number | Yes | 0 | The amount of contrast to apply to this ColorMatrix. |
| multiply | boolean | Yes | false | Multiply the resulting ColorMatrix (true), or set it (false) ? |
Returns: Phaser.Display.ColorMatrix - This ColorMatrix instance.
Source: src/display/ColorMatrix.js#L321
Since: 3.50.0
desaturate
instancedesaturate([multiply])
Description:
Desaturates this ColorMatrix (removes color from it).
Parameters:
| name | type | optional | default | description |
|---|---|---|---|---|
| multiply | boolean | Yes | false | Multiply the resulting ColorMatrix (true), or set it (false) ? |
Returns: Phaser.Display.ColorMatrix - This ColorMatrix instance.
Source: src/display/ColorMatrix.js#L220
Since: 3.50.0
desaturateLuminance
instancedesaturateLuminance([multiply])
Description:
Apply a desaturated luminance to this ColorMatrix.
Parameters:
| name | type | optional | default | description |
|---|---|---|---|---|
| multiply | boolean | Yes | false | Multiply the resulting ColorMatrix (true), or set it (false) ? |
Returns: Phaser.Display.ColorMatrix - This ColorMatrix instance.
Source: src/display/ColorMatrix.js#L365
Since: 3.50.0
getData
instancegetData()
Description:
Gets the ColorMatrix as a Float32Array.
Can be used directly as a 1fv shader uniform value.
Returns: Float32Array - The ColorMatrix as a Float32Array.
Source: src/display/ColorMatrix.js#L138
Since: 3.50.0
grayscale
instancegrayscale([value], [multiply])
Description:
Sets this ColorMatrix to be grayscale.
Parameters:
| name | type | optional | default | description |
|---|---|---|---|---|
| value | number | Yes | 1 | The grayscale scale (0 is black). |
| multiply | boolean | Yes | false | Multiply the resulting ColorMatrix (true), or set it (false) ? |
Returns: Phaser.Display.ColorMatrix - This ColorMatrix instance.
Source: src/display/ColorMatrix.js#L269
Since: 3.50.0
hue
instancehue([rotation], [multiply])
Description:
Rotates the hues of this ColorMatrix by the value given.
Parameters:
| name | type | optional | default | description |
|---|---|---|---|---|
| rotation | number | Yes | 0 | The amount of hue rotation to apply to this ColorMatrix, in degrees. |
| multiply | boolean | Yes | false | Multiply the resulting ColorMatrix (true), or set it (false) ? |
Returns: Phaser.Display.ColorMatrix - This ColorMatrix instance.
Source: src/display/ColorMatrix.js#L237
Since: 3.50.0
kodachrome
instancekodachrome([multiply])
Description:
Applies a kodachrome color effect to this ColorMatrix.
Parameters:
| name | type | optional | default | description |
|---|---|---|---|---|
| multiply | boolean | Yes | false | Multiply the resulting ColorMatrix (true), or set it (false) ? |
Returns: Phaser.Display.ColorMatrix - This ColorMatrix instance.
Source: src/display/ColorMatrix.js#L474
Since: 3.50.0
lsd
instancelsd([multiply])
Description:
Applies a trippy color tone to this ColorMatrix.
Parameters:
| name | type | optional | default | description |
|---|---|---|---|---|
| multiply | boolean | Yes | false | Multiply the resulting ColorMatrix (true), or set it (false) ? |
Returns: Phaser.Display.ColorMatrix - This ColorMatrix instance.
Source: src/display/ColorMatrix.js#L423
Since: 3.50.0
multiply
instancemultiply(a, [multiply])
Description:
Multiplies the given matrix a against the current _matrix.
Parameters:
| name | type | optional | default | description |
|---|---|---|---|---|
| a | Array.<number> | No | The 5x4 array to multiply with ColorMatrix._matrix. | |
| multiply | boolean | Yes | false | Multiply the resulting ColorMatrix (true), or set it (false) ? |
Returns: Phaser.Display.ColorMatrix - This ColorMatrix instance.
Source: src/display/ColorMatrix.js#L619
Since: 3.50.0
negative
instancenegative([multiply])
Description:
Converts this ColorMatrix to have negative values.
Parameters:
| name | type | optional | default | description |
|---|---|---|---|---|
| multiply | boolean | Yes | false | Multiply the resulting ColorMatrix (true), or set it (false) ? |
Returns: Phaser.Display.ColorMatrix - This ColorMatrix instance.
Source: src/display/ColorMatrix.js#L348
Since: 3.50.0
night
instancenight([intensity], [multiply])
Description:
Applies a night vision tone to this ColorMatrix.
Parameters:
| name | type | optional | default | description |
|---|---|---|---|---|
| intensity | number | Yes | 0.1 | The intensity of this effect. |
| multiply | boolean | Yes | false | Multiply the resulting ColorMatrix (true), or set it (false) ? |
Returns: Phaser.Display.ColorMatrix - This ColorMatrix instance.
Source: src/display/ColorMatrix.js#L399
Since: 3.50.0
polaroid
instancepolaroid([multiply])
Description:
Applies a polaroid color effect to this ColorMatrix.
Parameters:
| name | type | optional | default | description |
|---|---|---|---|---|
| multiply | boolean | Yes | false | Multiply the resulting ColorMatrix (true), or set it (false) ? |
Returns: Phaser.Display.ColorMatrix - This ColorMatrix instance.
Source: src/display/ColorMatrix.js#L508
Since: 3.50.0
reset
instancereset()
Description:
Resets the ColorMatrix to default values and also resets the alpha property back to 1.
Returns: Phaser.Display.ColorMatrix - This ColorMatrix instance.
Source: src/display/ColorMatrix.js#L111
Since: 3.50.0
saturate
instancesaturate([value], [multiply])
Description:
Changes the saturation of this ColorMatrix by the given amount.
Parameters:
| name | type | optional | default | description |
|---|---|---|---|---|
| value | number | Yes | 0 | The amount of saturation to apply to this ColorMatrix. |
| multiply | boolean | Yes | false | Multiply the resulting ColorMatrix (true), or set it (false) ? |
Returns: Phaser.Display.ColorMatrix - This ColorMatrix instance.
Source: src/display/ColorMatrix.js#L193
Since: 3.50.0
sepia
instancesepia([multiply])
Description:
Applies a sepia tone to this ColorMatrix.
Parameters:
| name | type | optional | default | description |
|---|---|---|---|---|
| multiply | boolean | Yes | false | Multiply the resulting ColorMatrix (true), or set it (false) ? |
Returns: Phaser.Display.ColorMatrix - This ColorMatrix instance.
Source: src/display/ColorMatrix.js#L382
Since: 3.50.0
set
instanceset(value)
Description:
Sets this ColorMatrix from the given array of color values.
Parameters:
| name | type | optional | description |
|---|---|---|---|
| value | Array.<number> | Float32Array | No | The ColorMatrix values to set. Must have 20 elements. |
Returns: Phaser.Display.ColorMatrix - This ColorMatrix instance.
Source: src/display/ColorMatrix.js#L92
Since: 3.50.0
shiftToBGR
instanceshiftToBGR([multiply])
Description:
Shifts the values of this ColorMatrix into BGR order.
Parameters:
| name | type | optional | default | description |
|---|---|---|---|---|
| multiply | boolean | Yes | false | Multiply the resulting ColorMatrix (true), or set it (false) ? |
Returns: Phaser.Display.ColorMatrix - This ColorMatrix instance.
Source: src/display/ColorMatrix.js#L602
Since: 3.50.0
technicolor
instancetechnicolor([multiply])
Description:
Applies a technicolor color effect to this ColorMatrix.
Parameters:
| name | type | optional | default | description |
|---|---|---|---|---|
| multiply | boolean | Yes | false | Multiply the resulting ColorMatrix (true), or set it (false) ? |
Returns: Phaser.Display.ColorMatrix - This ColorMatrix instance.
Source: src/display/ColorMatrix.js#L491
Since: 3.50.0
vintagePinhole
instancevintagePinhole([multiply])
Description:
Applies a vintage pinhole color effect to this ColorMatrix.
Parameters:
| name | type | optional | default | description |
|---|---|---|---|---|
| multiply | boolean | Yes | false | Multiply the resulting ColorMatrix (true), or set it (false) ? |
Returns: Phaser.Display.ColorMatrix - This ColorMatrix instance.
Source: src/display/ColorMatrix.js#L457
Since: 3.50.0
Constants:
Public Members
ALPHA_TO_BRIGHTNESS
ALPHA_TO_BRIGHTNESS: Array.<number>
Description:
A constant array used by the ColorMatrix class for alpha-to-brightness operations.
Source: src/display/ColorMatrix.js#L800
Since: 4.0.0
ALPHA_TO_BRIGHTNESS_INVERSE
ALPHA_TO_BRIGHTNESS_INVERSE: Array.<number>
Description:
A constant array used by the ColorMatrix class for inverse alpha-to-brightness operations.
Source: src/display/ColorMatrix.js#L815
Since: 4.0.0
BLACK
BLACK: Array.<number>
Description:
A constant array used by the ColorMatrix class for black operations.
Source: src/display/ColorMatrix.js#L685
Since: 4.0.0
BLACK_WHITE
BLACK_WHITE: Array.<number>
Description:
A constant array used by the ColorMatrix class for black_white operations.
Source: src/display/ColorMatrix.js#L700
Since: 3.60.0
BRIGHTNESS_TO_ALPHA
BRIGHTNESS_TO_ALPHA: Array.<number>
Description:
A constant array used by the ColorMatrix class for brightness-to-alpha operations.
Source: src/display/ColorMatrix.js#L830
Since: 4.0.0
BRIGHTNESS_TO_ALPHA_INVERSE
BRIGHTNESS_TO_ALPHA_INVERSE: Array.<number>
Description:
A constant array used by the ColorMatrix class for inverse brightness-to-alpha operations.
Source: src/display/ColorMatrix.js#L845
Since: 4.0.0
BROWN
BROWN: Array.<number>
Description:
A constant array used by the ColorMatrix class for brown operations.
Source: src/display/ColorMatrix.js#L750
Since: 3.60.0
DESATURATE_LUMINANCE
DESATURATE_LUMINANCE: Array.<number>
Description:
A constant array used by the ColorMatrix class for desaturated luminance operations.
Source: src/display/ColorMatrix.js#L720
Since: 3.60.0
KODACHROME
KODACHROME: Array.<number>
Description:
A constant array used by the ColorMatrix class for kodachrome operations.
Source: src/display/ColorMatrix.js#L770
Since: 3.60.0
LSD
LSD: Array.<number>
Description:
A constant array used by the ColorMatrix class for lsd operations.
Source: src/display/ColorMatrix.js#L740
Since: 3.60.0
NEGATIVE
NEGATIVE: Array.<number>
Description:
A constant array used by the ColorMatrix class for negative operations.
Source: src/display/ColorMatrix.js#L710
Since: 3.60.0
POLAROID
POLAROID: Array.<number>
Description:
A constant array used by the ColorMatrix class for polaroid shift operations.
Source: src/display/ColorMatrix.js#L790
Since: 3.60.0
SEPIA
SEPIA: Array.<number>
Description:
A constant array used by the ColorMatrix class for sepia operations.
Source: src/display/ColorMatrix.js#L730
Since: 3.60.0
SHIFT_BGR
SHIFT_BGR: Array.<number>
Description:
A constant array used by the ColorMatrix class for shift BGR operations.
Source: src/display/ColorMatrix.js#L860
Since: 3.60.0
TECHNICOLOR
TECHNICOLOR: Array.<number>
Description:
A constant array used by the ColorMatrix class for technicolor operations.
Source: src/display/ColorMatrix.js#L780
Since: 3.60.0
VINTAGE
VINTAGE: Array.<number>
Description:
A constant array used by the ColorMatrix class for vintage pinhole operations.
Source: src/display/ColorMatrix.js#L760
Since: 3.60.0