new Color()
The Phaser.Color class is a set of static methods that assist in color manipulation and conversion.
- Source - utils/Color.js, line 12
Methods
-
<static> componentToHex(color) → {string}
-
Return a string containing a hex representation of the given color component.
Parameters:
Name Type Description colornumber 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 - 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 rnumber <optional>
0 The red color component, in the range 0 - 255.
gnumber <optional>
0 The green color component, in the range 0 - 255.
bnumber <optional>
0 The blue color component, in the range 0 - 255.
anumber <optional>
1 The alpha color component, in the range 0 - 1.
hnumber <optional>
0 The hue, in the range 0 - 1.
snumber <optional>
0 The saturation, in the range 0 - 1.
lnumber <optional>
0 The lightness, in the range 0 - 1.
vnumber <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.
- Source - 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 rgbanumber An RGBA hex
outobject <optional>
The object to use, optional.
Returns:
object -A color object.
- Source - 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 colornumber 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 - 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 colornumber 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 - 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 colornumber 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 - 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 rnumber The red color component, in the range 0 - 255.
gnumber The green color component, in the range 0 - 255.
bnumber The blue color component, in the range 0 - 255.
Returns:
number -A native color value integer (format: 0xRRGGBB).
- Source - 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 anumber The alpha color component, in the range 0 - 255.
rnumber The red color component, in the range 0 - 255.
gnumber The green color component, in the range 0 - 255.
bnumber The blue color component, in the range 0 - 255.
Returns:
number -A native color value integer (format: 0xAARRGGBB).
- Source - 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 colornumber 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 - 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 minnumber The lowest value to use for the color.
maxnumber The highest value to use for the color.
alphanumber The alpha value of the returning color (default 255 = fully opaque).
Returns:
number -32-bit color value with alpha.
- Source - 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 colornumber 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 - 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 colornumber 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 - utils/Color.js, line 848
-
<static> getWebRGB(color) → {string}
-
Returns a CSS friendly string value from the given color.
Parameters:
Name Type Description colornumber | 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 - 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 hexstring The color string in a hex format.
outobject <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 - utils/Color.js, line 548
-
<static> hexToRGB(hex) → {number}
-
Converts a hex string into an integer color value.
Parameters:
Name Type Description hexstring The hex string to convert. Can be in the short-hand format
#03for#0033ff.Returns:
number -The rgb color value in the format 0xAARRGGBB.
- Source - 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 snumber <optional>
0.5 The saturation, in the range 0 - 1.
lnumber <optional>
0.5 The lightness, in the range 0 - 1.
Returns:
array -An array containing 360 elements corresponding to the HSL color wheel.
- Source - 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 hnumber The hue, in the range 0 - 1.
snumber The saturation, in the range 0 - 1.
lnumber The lightness, in the range 0 - 1.
outobject <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 - 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 snumber <optional>
1 The saturation, in the range 0 - 1.
vnumber <optional>
1 The value, in the range 0 - 1.
Returns:
array -An array containing 360 elements corresponding to the HSV color wheel.
- Source - 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 hnumber The hue, in the range 0 - 1.
snumber The saturation, in the range 0 - 1.
vnumber The value, in the range 0 - 1.
outobject <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 - 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 pnumber qnumber tnumber Returns:
number -The color component value.
- Source - 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 color1number The first color value.
color2number The second color value.
stepsnumber The number of steps to run the interpolation over.
currentStepnumber The currentStep value. If the interpolation will take 100 steps, a currentStep value of 50 would be half-way between the two.
alphanumber The alpha of the returned color.
Returns:
number -The interpolated color value.
- Source - 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 colornumber The first color value.
rnumber The red color value, between 0 and 0xFF (255).
gnumber The green color value, between 0 and 0xFF (255).
bnumber The blue color value, between 0 and 0xFF (255).
stepsnumber The number of steps to run the interpolation over.
currentStepnumber 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 - 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 r1number The red color value, between 0 and 0xFF (255).
g1number The green color value, between 0 and 0xFF (255).
b1number The blue color value, between 0 and 0xFF (255).
r2number The red color value, between 0 and 0xFF (255).
g2number The green color value, between 0 and 0xFF (255).
b2number The blue color value, between 0 and 0xFF (255).
stepsnumber The number of steps to run the interpolation over.
currentStepnumber 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 - 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 rnumber The red color component, in the range 0 - 255.
gnumber The green color component, in the range 0 - 255.
bnumber The blue color component, in the range 0 - 255.
anumber The alpha color component, in the range 0 - 255.
Returns:
number -The packed color as uint32
- Source - 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 rnumber The red color component, in the range 0 - 255.
gnumber The green color component, in the range 0 - 255.
bnumber The blue color component, in the range 0 - 255.
outobject <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 - 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 rnumber The red color component, in the range 0 - 255.
gnumber The green color component, in the range 0 - 255.
bnumber The blue color component, in the range 0 - 255.
outobject <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 - 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
#RRGGBBotherwise0xAARRGGBB.Parameters:
Name Type Argument Default Description rnumber The red color component, in the range 0 - 255.
gnumber The green color component, in the range 0 - 255.
bnumber The blue color component, in the range 0 - 255.
anumber <optional>
255 The alpha color component, in the range 0 - 255.
prefixstring <optional>
'#' The prefix used in the return string. If '#' it will return
#RRGGBB, else0xAARRGGBB.Returns:
string -A string containing the color values. If prefix was '#' it will be in the format
#RRGGBBotherwise0xAARRGGBB.- Source - 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 rnumber The red color component, in the range 0 - 255.
gnumber The green color component, in the range 0 - 255.
bnumber The blue color component, in the range 0 - 255.
anumber The alpha color component, in the range 0 - 255.
Returns:
number -A RGBA-packed 32 bit integer
- Source - 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, aproperties 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 rgbanumber The integer, packed in endian order by packPixel.
outobject <optional>
An object into which 3 properties will be created: r, g and b. If not provided a new object will be created.
hslboolean <optional>
false Also convert the rgb values into hsl?
hsvboolean <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.
- Source - utils/Color.js, line 40
-
<static> updateColor(out) → {number}
-
Takes a color object and updates the rgba property.
Parameters:
Name Type Description outobject The color object to update.
Returns:
number -A native color value integer (format: 0xAARRGGBB).
- Source - 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
hexToColorandwebToColorfor the supported formats) or a packed integer (seegetRGB).An alpha channel is not supported when specifying a hex string.
Parameters:
Name Type Argument Description valuestring | number The color expressed as a recognized string format or a packed integer.
outobject <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 - 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 webstring The color string in CSS 'web' format.
outobject <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 - utils/Color.js, line 592
