These docs are for Phaser 2.3.0 Phaser 3 docs can be found on GitHub pages.
Phaser CE docs can be found on the Phaser CE Documentation site.

Constructor

Phaser. Color

new Color()

The Phaser.Color class is a set of static methods that assist in color manipulation and conversion.

Source code: utils/Color.js (Line 12)

Public Methods

<static> componentToHex(color) → {string}

Return a string containing a hex representation of the given color component.

Parameters
Name Type Description
color number

The color channel to get the hex value for, must be a value between 0 and 255.

Returns
string -

A string of length 2 characters, i.e. 255 = ff, 100 = 64.

Source code: utils/Color.js (Line 677)

<static> createColor(r, g, b, a, h, s, l, v) → {object}

A utility function to create a lightweight 'color' object with the default components. Any components that are not specified will default to zero.

This is useful when you want to use a shared color object for the getPixel and getPixelAt methods.

Parameters
Name Type Argument Default Description
r number <optional>
0

The red color component, in the range 0 - 255.

g number <optional>
0

The green color component, in the range 0 - 255.

b number <optional>
0

The blue color component, in the range 0 - 255.

a number <optional>
1

The alpha color component, in the range 0 - 1.

h number <optional>
0

The hue, in the range 0 - 1.

s number <optional>
0

The saturation, in the range 0 - 1.

l number <optional>
0

The lightness, in the range 0 - 1.

v number <optional>
0

The value, in the range 0 - 1.

Returns
object -

The resulting object with r, g, b, a properties and h, s, l and v.

Author:
  • Matt DesLauriers (@mattdesl)
Source code: utils/Color.js (Line 421)

<static> fromRGBA(rgba, out) → {object}

A utility to convert an integer in 0xRRGGBBAA format to a color object. This does not rely on endianness.

Parameters
Name Type Argument Description
rgba number

An RGBA hex

out object <optional>

The object to use, optional.

Returns
object -

A color object.

Author:
  • Matt DesLauriers (@mattdesl)
Source code: utils/Color.js (Line 97)

<static> getAlpha(color) → {number}

Given a native color value (in the format 0xAARRGGBB) this will return the Alpha component, as a value between 0 and 255.

Parameters
Name Type Description
color number

In the format 0xAARRGGBB.

Returns
number -

The Alpha component of the color, will be between 0 and 1 (0 being no Alpha (opaque), 1 full Alpha (transparent)).

Source code: utils/Color.js (Line 912)

<static> getAlphaFloat(color) → {number}

Given a native color value (in the format 0xAARRGGBB) this will return the Alpha component as a value between 0 and 1.

Parameters
Name Type Description
color number

In the format 0xAARRGGBB.

Returns
number -

The Alpha component of the color, will be between 0 and 1 (0 being no Alpha (opaque), 1 full Alpha (transparent)).

Source code: utils/Color.js (Line 924)

<static> getBlue(color) → {number}

Given a native color value (in the format 0xAARRGGBB) this will return the Blue component, as a value between 0 and 255.

Parameters
Name Type Description
color number

In the format 0xAARRGGBB.

Returns
number -

The Blue component of the color, will be between 0 and 255 (0 being no color, 255 full Blue).

Source code: utils/Color.js (Line 960)

<static> getColor(r, g, b) → {number}

Given 3 color values this will return an integer representation of it.

Parameters
Name Type Description
r number

The red color component, in the range 0 - 255.

g number

The green color component, in the range 0 - 255.

b number

The blue color component, in the range 0 - 255.

Returns
number -

A native color value integer (format: 0xRRGGBB).

Source code: utils/Color.js (Line 484)

<static> getColor32(a, r, g, b) → {number}

Given an alpha and 3 color values this will return an integer representation of it.

Parameters
Name Type Description
a number

The alpha color component, in the range 0 - 255.

r number

The red color component, in the range 0 - 255.

g number

The green color component, in the range 0 - 255.

b number

The blue color component, in the range 0 - 255.

Returns
number -

A native color value integer (format: 0xAARRGGBB).

Source code: utils/Color.js (Line 467)

<static> getGreen(color) → {number}

Given a native color value (in the format 0xAARRGGBB) this will return the Green component, as a value between 0 and 255.

Parameters
Name Type Description
color number

In the format 0xAARRGGBB.

Returns
number -

The Green component of the color, will be between 0 and 255 (0 being no color, 255 full Green).

Source code: utils/Color.js (Line 948)

<static> getRandomColor(min, max, alpha) → {number}

Returns a random color value between black and white Set the min value to start each channel from the given offset. Set the max value to restrict the maximum color used per channel.

Parameters
Name Type Description
min number

The lowest value to use for the color.

max number

The highest value to use for the color.

alpha number

The alpha value of the returning color (default 255 = fully opaque).

Returns
number -

32-bit color value with alpha.

Source code: utils/Color.js (Line 816)

<static> getRed(color) → {number}

Given a native color value (in the format 0xAARRGGBB) this will return the Red component, as a value between 0 and 255.

Parameters
Name Type Description
color number

In the format 0xAARRGGBB.

Returns
number -

The Red component of the color, will be between 0 and 255 (0 being no color, 255 full Red).

Source code: utils/Color.js (Line 936)

<static> getRGB(color) → {object}

Return the component parts of a color as an Object with the properties alpha, red, green, blue.

Alpha will only be set if it exist in the given color (0xAARRGGBB)

Parameters
Name Type Description
color number

Color in RGB (0xRRGGBB) or ARGB format (0xAARRGGBB).

Returns
object -

An Object with properties: alpha, red, green, blue (also r, g, b and a). Alpha will only be present if a color value > 16777215 was given.

Source code: utils/Color.js (Line 848)

<static> getWebRGB(color) → {string}

Returns a CSS friendly string value from the given color.

Parameters
Name Type Description
color number | Object

Color in RGB (0xRRGGBB), ARGB format (0xAARRGGBB) or an Object with r, g, b, a properties.

Returns
string -

A string in the format: 'rgba(r,g,b,a)'

Source code: utils/Color.js (Line 890)

<static> hexToColor(hex, out) → {object}

Converts a hex string into a Phaser Color object.

The hex string can supplied as '#0033ff' or the short-hand format of '#03f'; it can begin with an optional "#" or "0x", or be unprefixed.

An alpha channel is not supported.

Parameters
Name Type Argument Description
hex string

The color string in a hex format.

out object <optional>

An object into which 3 properties will be created or set: r, g and b. If not provided a new object will be created.

Returns
object -

An object with the red, green and blue values set in the r, g and b properties.

Source code: utils/Color.js (Line 548)

<static> hexToRGB(hex) → {number}

Converts a hex string into an integer color value.

Parameters
Name Type Description
hex string

The hex string to convert. Can be in the short-hand format #03f or #0033ff.

Returns
number -

The rgb color value in the format 0xAARRGGBB.

Source code: utils/Color.js (Line 529)

<static> HSLColorWheel(s, l) → {array}

Get HSL color wheel values in an array which will be 360 elements in size.

Parameters
Name Type Argument Default Description
s number <optional>
0.5

The saturation, in the range 0 - 1.

l number <optional>
0.5

The lightness, in the range 0 - 1.

Returns
array -

An array containing 360 elements corresponding to the HSL color wheel.

Source code: utils/Color.js (Line 717)

<static> HSLtoRGB(h, s, l, out) → {object}

Converts an HSL (hue, saturation and lightness) color value to RGB. Conversion forumla from http://en.wikipedia.org/wiki/HSL_color_space. Assumes HSL values are contained in the set [0, 1] and returns r, g and b values in the set [0, 255]. Based on code by Michael Jackson (https://github.com/mjijackson)

Parameters
Name Type Argument Description
h number

The hue, in the range 0 - 1.

s number

The saturation, in the range 0 - 1.

l number

The lightness, in the range 0 - 1.

out object <optional>

An object into which 3 properties will be created: r, g and b. If not provided a new object will be created.

Returns
object -

An object with the red, green and blue values set in the r, g and b properties.

Source code: utils/Color.js (Line 203)

<static> HSVColorWheel(s, v) → {array}

Get HSV color wheel values in an array which will be 360 elements in size.

Parameters
Name Type Argument Default Description
s number <optional>
1

The saturation, in the range 0 - 1.

v number <optional>
1

The value, in the range 0 - 1.

Returns
array -

An array containing 360 elements corresponding to the HSV color wheel.

Source code: utils/Color.js (Line 692)

<static> HSVtoRGB(h, s, v, out) → {object}

Converts an HSV (hue, saturation and value) color value to RGB. Conversion forumla from http://en.wikipedia.org/wiki/HSL_color_space. Assumes HSV values are contained in the set [0, 1] and returns r, g and b values in the set [0, 255]. Based on code by Michael Jackson (https://github.com/mjijackson)

Parameters
Name Type Argument Description
h number

The hue, in the range 0 - 1.

s number

The saturation, in the range 0 - 1.

v number

The value, in the range 0 - 1.

out object <optional>

An object into which 3 properties will be created: r, g and b. If not provided a new object will be created.

Returns
object -

An object with the red, green and blue values set in the r, g and b properties.

Source code: utils/Color.js (Line 310)

<static> hueToColor(p, q, t) → {number}

Converts a hue to an RGB color. Based on code by Michael Jackson (https://github.com/mjijackson)

Parameters
Name Type Description
p number
q number
t number
Returns
number -

The color component value.

Source code: utils/Color.js (Line 379)

<static> interpolateColor(color1, color2, steps, currentStep, alpha) → {number}

Interpolates the two given colours based on the supplied step and currentStep properties.

Parameters
Name Type Description
color1 number

The first color value.

color2 number

The second color value.

steps number

The number of steps to run the interpolation over.

currentStep number

The currentStep value. If the interpolation will take 100 steps, a currentStep value of 50 would be half-way between the two.

alpha number

The alpha of the returned color.

Returns
number -

The interpolated color value.

Source code: utils/Color.js (Line 742)

<static> interpolateColorWithRGB(color, r, g, b, steps, currentStep) → {number}

Interpolates the two given colours based on the supplied step and currentStep properties.

Parameters
Name Type Description
color number

The first color value.

r number

The red color value, between 0 and 0xFF (255).

g number

The green color value, between 0 and 0xFF (255).

b number

The blue color value, between 0 and 0xFF (255).

steps number

The number of steps to run the interpolation over.

currentStep number

The currentStep value. If the interpolation will take 100 steps, a currentStep value of 50 would be half-way between the two.

Returns
number -

The interpolated color value.

Source code: utils/Color.js (Line 768)

<static> interpolateRGB(r1, g1, b1, r2, g2, b2, steps, currentStep) → {number}

Interpolates the two given colours based on the supplied step and currentStep properties.

Parameters
Name Type Description
r1 number

The red color value, between 0 and 0xFF (255).

g1 number

The green color value, between 0 and 0xFF (255).

b1 number

The blue color value, between 0 and 0xFF (255).

r2 number

The red color value, between 0 and 0xFF (255).

g2 number

The green color value, between 0 and 0xFF (255).

b2 number

The blue color value, between 0 and 0xFF (255).

steps number

The number of steps to run the interpolation over.

currentStep number

The currentStep value. If the interpolation will take 100 steps, a currentStep value of 50 would be half-way between the two.

Returns
number -

The interpolated color value.

Source code: utils/Color.js (Line 792)

<static> packPixel(r, g, b, a) → {number}

Packs the r, g, b, a components into a single integer, for use with Int32Array. If device is little endian then ABGR order is used. Otherwise RGBA order is used.

Parameters
Name Type Description
r number

The red color component, in the range 0 - 255.

g number

The green color component, in the range 0 - 255.

b number

The blue color component, in the range 0 - 255.

a number

The alpha color component, in the range 0 - 255.

Returns
number -

The packed color as uint32

Author:
  • Matt DesLauriers (@mattdesl)
Source code: utils/Color.js (Line 14)

<static> RGBtoHSL(r, g, b, out) → {object}

Converts an RGB color value to HSL (hue, saturation and lightness). Conversion forumla from http://en.wikipedia.org/wiki/HSL_color_space. Assumes RGB values are contained in the set [0, 255] and returns h, s and l in the set [0, 1]. Based on code by Michael Jackson (https://github.com/mjijackson)

Parameters
Name Type Argument Description
r number

The red color component, in the range 0 - 255.

g number

The green color component, in the range 0 - 255.

b number

The blue color component, in the range 0 - 255.

out object <optional>

An object into which 3 properties will be created, h, s and l. If not provided a new object will be created.

Returns
object -

An object with the hue, saturation and lightness values set in the h, s and l properties.

Source code: utils/Color.js (Line 144)

<static> RGBtoHSV(r, g, b, out) → {object}

Converts an RGB color value to HSV (hue, saturation and value). Conversion forumla from http://en.wikipedia.org/wiki/HSL_color_space. Assumes RGB values are contained in the set [0, 255] and returns h, s and v in the set [0, 1]. Based on code by Michael Jackson (https://github.com/mjijackson)

Parameters
Name Type Argument Description
r number

The red color component, in the range 0 - 255.

g number

The green color component, in the range 0 - 255.

b number

The blue color component, in the range 0 - 255.

out object <optional>

An object into which 3 properties will be created, h, s and v. If not provided a new object will be created.

Returns
object -

An object with the hue, saturation and value set in the h, s and v properties.

Source code: utils/Color.js (Line 254)

<static> RGBtoString(r, g, b, a, prefix) → {string}

Converts the given color values into a string. If prefix was '#' it will be in the format #RRGGBB otherwise 0xAARRGGBB.

Parameters
Name Type Argument Default Description
r number

The red color component, in the range 0 - 255.

g number

The green color component, in the range 0 - 255.

b number

The blue color component, in the range 0 - 255.

a number <optional>
255

The alpha color component, in the range 0 - 255.

prefix string <optional>
'#'

The prefix used in the return string. If '#' it will return #RRGGBB, else 0xAARRGGBB.

Returns
string -

A string containing the color values. If prefix was '#' it will be in the format #RRGGBB otherwise 0xAARRGGBB.

Source code: utils/Color.js (Line 500)

<static> toRGBA(r, g, b, a) → {number}

A utility to convert RGBA components to a 32 bit integer in RRGGBBAA format.

Parameters
Name Type Description
r number

The red color component, in the range 0 - 255.

g number

The green color component, in the range 0 - 255.

b number

The blue color component, in the range 0 - 255.

a number

The alpha color component, in the range 0 - 255.

Returns
number -

A RGBA-packed 32 bit integer

Author:
  • Matt DesLauriers (@mattdesl)
Source code: utils/Color.js (Line 126)

<static> unpackPixel(rgba, out, hsl, hsv) → {object}

Unpacks the r, g, b, a components into the specified color object, or a new object, for use with Int32Array. If little endian, then ABGR order is used when unpacking, otherwise, RGBA order is used. The resulting color object has the r, g, b, a properties which are unrelated to endianness.

Note that the integer is assumed to be packed in the correct endianness. On little-endian the format is 0xAABBGGRR and on big-endian the format is 0xRRGGBBAA. If you want a endian-independent method, use fromRGBA(rgba) and toRGBA(r, g, b, a).

Parameters
Name Type Argument Default Description
rgba number

The integer, packed in endian order by packPixel.

out object <optional>

An object into which 3 properties will be created: r, g and b. If not provided a new object will be created.

hsl boolean <optional>
false

Also convert the rgb values into hsl?

hsv boolean <optional>
false

Also convert the rgb values into hsv?

Returns
object -

An object with the red, green and blue values set in the r, g and b properties.

Author:
  • Matt DesLauriers (@mattdesl)
Source code: utils/Color.js (Line 40)

<static> updateColor(out) → {number}

Takes a color object and updates the rgba property.

Parameters
Name Type Description
out object

The color object to update.

Returns
number -

A native color value integer (format: 0xAARRGGBB).

Source code: utils/Color.js (Line 451)

<static> valueToColor(value, out) → {object}

Converts a value - a "hex" string, a "CSS 'web' string", or a number - into red, green, blue, and alpha components.

The value can be a string (see hexToColor and webToColor for the supported formats) or a packed integer (see getRGB).

An alpha channel is not supported when specifying a hex string.

Parameters
Name Type Argument Description
value string | number

The color expressed as a recognized string format or a packed integer.

out object <optional>

The object to use for the output. If not provided a new object will be created.

Returns
object -

The (out) object with the red, green, blue, and alpha values set as the r/g/b/a properties.

Source code: utils/Color.js (Line 624)

<static> webToColor(web, out) → {object}

Converts a CSS 'web' string into a Phaser Color object.

The web string can be in the format 'rgb(r,g,b)' or 'rgba(r,g,b,a)' where r/g/b are in the range [0..255] and a is in the range [0..1].

Parameters
Name Type Argument Description
web string

The color string in CSS 'web' format.

out object <optional>

An object into which 4 properties will be created: r, g, b and a. If not provided a new object will be created.

Returns
object -

An object with the red, green, blue and alpha values set in the r, g, b and a properties.

Source code: utils/Color.js (Line 592)