New Graphics.Color functions (in preparation for doing State background color management)

v3/src/checksum.js

@@ -1,4 +1,4 @@
 var CHECKSUM = {
-build: '13721950-ed9a-11e6-8f4f-afca70274f59'
+build: '1c054190-ee36-11e6-8010-4ba93e0d034d'
 };
 module.exports = CHECKSUM;

v3/src/dom/CanvasPool.js

@@ -87,7 +87,7 @@ var CanvasPool = function ()
 
     /**
     * Gets the first free canvas index from the pool.
-    * 
+    *
     * @static
     * @method Phaser.CanvasPool.getFirst
     * @return {number}

v3/src/graphics/color/CSSToColor.js

@@ -0,0 +1,167 @@
+var Color = require('./Color');
+
+var CSSMap = {
+    aliceblue: [ 240, 248, 245 ],
+    antiquewhite: [ 250, 235, 215 ],
+    aqua: [ 0, 255, 255 ],
+    aquamarine: [ 127, 255, 212 ],
+    azure: [ 240, 255, 255 ],
+    beige: [ 245, 245, 220 ],
+    bisque: [ 255, 228, 196 ],
+    black: [ 0, 0, 0 ],
+    blanchedalmond: [ 255, 235, 205 ],
+    blue: [ 0, 0, 255 ],
+    blueviolet: [ 138, 43, 226 ],
+    brown: [ 165, 42, 42 ],
+    burlywood: [ 222, 184, 35 ],
+    cadetblue: [ 95, 158, 160 ],
+    chartreuse: [ 127, 255, 0 ],
+    chocolate: [ 210, 105, 30 ],
+    coral: [ 255, 127, 80 ],
+    cornflowerblue: [ 100, 149, 237 ],
+    cornsilk: [ 255, 248, 220 ],
+    crimson: [ 220, 20, 60 ],
+    darkblue: [ 0, 0, 139 ],
+    darkcyan: [ 0, 139, 139 ],
+    darkgoldenrod: [ 184, 134, 11 ],
+    darkgray: [ 169, 169, 169 ],
+    darkgreen: [ 0, 100, 0 ],
+    darkgrey: [ 169, 169, 169 ],
+    darkkhaki: [ 189, 183, 107 ],
+    darkmagenta: [ 139, 0, 139 ],
+    darkolivegreen: [ 85, 107, 47 ],
+    darkorange: [ 255, 140, 0 ],
+    darkorchid: [ 153, 50, 204 ],
+    darkred: [ 139, 0, 0 ],
+    darksalmon: [ 233, 150, 122 ],
+    darkseagreen: [ 143, 188, 143 ],
+    darkslateblue: [ 72, 61, 139 ],
+    darkslategray: [ 47, 79, 79 ],
+    darkslategrey: [ 47, 79, 79 ],
+    darkturquoise: [ 0, 206, 209 ],
+    darkviolet: [ 148, 0, 211 ],
+    deeppink: [ 255, 20, 147 ],
+    deepskyblue: [ 0, 191, 255 ],
+    dimgray: [ 105, 105, 105 ],
+    dimgrey: [ 105, 105, 105 ],
+    dodgerblue: [ 30, 144, 255 ],
+    firebrick: [ 178, 34, 34 ],
+    floralwhite: [ 255, 250, 240 ],
+    forestgreen: [ 34, 139, 34 ],
+    fuchsia: [ 255, 0, 255 ],
+    gainsboro: [ 220, 220, 220 ],
+    ghostwhite: [ 248, 248, 255 ],
+    gold: [ 255, 215, 0 ],
+    goldenrod: [ 218, 165, 32 ],
+    gray: [ 128, 128, 128 ],
+    green: [ 0, 128, 0 ],
+    greenyellow: [ 173, 255, 47 ],
+    grey: [ 128, 128, 128 ],
+    honeydew: [ 240, 255, 240 ],
+    hotpink: [ 255, 105, 180 ],
+    indianred: [ 205, 92, 92 ],
+    indigo: [ 75, 0, 130 ],
+    ivory: [ 255, 255, 240 ],
+    khaki: [ 240, 230, 140 ],
+    lavender: [ 230, 230, 250 ],
+    lavenderblush: [ 255, 240, 245 ],
+    lawngreen: [ 124, 252, 0 ],
+    lemonchiffon: [ 255, 250, 205 ],
+    lightblue: [ 173, 216, 230 ],
+    lightcoral: [ 240, 128, 128 ],
+    lightcyan: [ 224, 255, 255 ],
+    lightgoldenrodyellow: [ 250, 250, 210 ],
+    lightgray: [ 211, 211, 211 ],
+    lightgreen: [ 144, 238, 144 ],
+    lightgrey: [ 211, 211, 211 ],
+    lightpink: [ 255, 182, 193 ],
+    lightsalmon: [ 255, 160, 122 ],
+    lightseagreen: [ 32, 178, 170 ],
+    lightskyblue: [ 135, 206, 250 ],
+    lightslategray: [ 119, 136, 153 ],
+    lightslategrey: [ 119, 136, 153 ],
+    lightsteelblue: [ 176, 196, 222 ],
+    lightyellow: [ 255, 255, 224 ],
+    lime: [ 0, 255, 0 ],
+    limegreen: [ 50, 205, 50 ],
+    linen: [ 250, 240, 230 ],
+    maroon: [ 128, 0, 0 ],
+    mediumaquamarine: [ 102, 205, 170 ],
+    mediumblue: [ 0, 0, 205 ],
+    mediumorchid: [ 186, 85, 211 ],
+    mediumpurple: [ 147, 112, 219 ],
+    mediumseagreen: [ 60, 179, 113 ],
+    mediumslateblue: [ 123, 104, 238 ],
+    mediumspringgreen: [ 0, 250, 154 ],
+    mediumturquoise: [ 72, 209, 204 ],
+    mediumvioletred: [ 199, 21, 133 ],
+    midnightblue: [ 25, 25, 112 ],
+    mintcream: [ 245, 255, 250 ],
+    mistyrose: [ 255, 228, 225 ],
+    moccasin: [ 255, 228, 181 ],
+    navajowhite: [ 255, 222, 173 ],
+    navy: [ 0, 0, 128 ],
+    oldlace: [ 253, 245, 230 ],
+    olive: [ 128, 128, 0 ],
+    olivedrab: [ 107, 142, 35 ],
+    orange: [ 255, 165, 0 ],
+    orangered: [ 255, 69, 0 ],
+    orchid: [ 218, 112, 214 ],
+    palegoldenrod: [ 238, 232, 170 ],
+    palegreen: [ 152, 251, 152 ],
+    paleturquoise: [ 175, 238, 238 ],
+    palevioletred: [ 219, 112, 147 ],
+    papayawhip: [ 255, 239, 213 ],
+    peachpuff: [ 255, 218, 185 ],
+    peru: [ 205, 133, 63 ],
+    pink: [ 255, 192, 203 ],
+    plum: [ 221, 160, 221 ],
+    powderblue: [ 176, 224, 230 ],
+    purple: [ 128, 0, 128 ],
+    rebeccapurple: [ 102, 51, 153 ],
+    red: [ 255, 0, 0 ],
+    rosybrown: [ 188, 143, 143 ],
+    royalblue: [ 65, 105, 225 ],
+    saddlebrown: [ 139, 69, 19 ],
+    salmon: [ 250, 128, 114 ],
+    sandybrown: [ 244, 164, 96 ],
+    seagreen: [ 46, 139, 87 ],
+    seashell: [ 255, 245, 238 ],
+    sienna: [ 160, 82, 45 ],
+    silver: [ 192, 192, 129 ],
+    skyblue: [ 135, 206, 235 ],
+    slateblue: [ 106, 90, 205 ],
+    slategray: [ 112, 128, 144 ],
+    slategrey: [ 112, 128, 144 ],
+    snow: [ 255, 250, 250 ],
+    springgreen: [ 0, 255, 127 ],
+    steelblue: [ 70, 130, 180 ],
+    tan: [ 210, 180, 140 ],
+    teal: [ 0, 128, 128 ],
+    thistle: [ 216, 191, 216 ],
+    tomato: [ 255, 99, 71 ],
+    turquoise: [ 64, 224, 208 ],
+    violet: [ 238, 130, 238 ],
+    wheat: [ 245, 222, 179 ],
+    white: [ 255, 255, 255 ],
+    whitesmoke: [ 245, 245, 245 ],
+    yellow: [ 255, 255, 0 ],
+    yellowgreen: [ 154, 205, 50 ]
+};
+
+var CSSToColor = function (name)
+{
+    name = name.toLowerCase();
+
+    var color = new Color();
+    var entry = CSSMap[name];
+
+    if (entry)
+    {
+        color.setTo(entry[0], entry[1], entry[2], 255);
+    }
+
+    return color;
+};
+
+module.exports = CSSToColor;

v3/src/graphics/color/Color.js

@@ -0,0 +1,315 @@
+var GetColor = require('./GetColor');
+var GetColor32 = require('./GetColor32');
+
+var Color = function (red, green, blue, alpha)
+{
+    if (red === undefined) { red = 0; }
+    if (green === undefined) { green = 0; }
+    if (blue === undefined) { blue = 0; }
+    if (alpha === undefined) { alpha = 255; }
+
+    //  All private
+    this.r = red;
+    this.g = green;
+    this.b = blue;
+    this.a = alpha;
+
+    this.gl = [ 0.0, 0.0, 0.0, 1.0 ];
+
+    this._color = 0;
+    this._color32 = 0;
+    this._rgba = '';
+
+    this.dirty = true;
+
+    this.update();
+};
+
+Color.prototype.contrusctor = Color;
+
+Color.prototype = {
+
+    transparent: function ()
+    {
+        this.red = 0;
+        this.green = 0;
+        this.blue = 0;
+        this.alpha = 0;
+
+        return this.update();
+    },
+
+    //  Values are in the range 0 to 255
+    setTo: function (red, green, blue, alpha)
+    {
+        if (alpha === undefined) { alpha = 255; }
+
+        this.red = red;
+        this.green = green;
+        this.blue = blue;
+        this.alpha = alpha;
+
+        return this.update();
+    },
+
+    //  Values are in the range 0 to 1
+    setGLTo: function (red, green, blue, alpha)
+    {
+        if (alpha === undefined) { alpha = 1; }
+
+        this.redGL = red;
+        this.greenGL = green;
+        this.blueGL = blue;
+        this.alphaGL = alpha;
+
+        return this.update();
+    },
+
+    update: function ()
+    {
+        if (!this.dirty)
+        {
+            return this;
+        }
+
+        this.color = GetColor(this.r, this.g, this.b);
+        this.color32 = GetColor32(this.r, this.g, this.b, this.a);
+        this.rgba = 'rgba(' + this.r + ',' + this.g + ',' + this.b + ',' + (255 / this.a) + ')';
+
+        this.dirty = false;
+
+        return this;
+    },
+
+    //  Same as setRGB but performs safety checks on all the values given
+    clone: function ()
+    {
+        return new Color(this.r, this.g, this.b, this.a);
+    }
+
+};
+
+Object.defineProperties(Color.prototype, {
+
+    color: {
+
+        enumerable: true,
+
+        get: function ()
+        {
+            if (this.dirty)
+            {
+                this.update();
+            }
+
+            return this._color;
+        }
+
+    },
+
+    color32: {
+
+        enumerable: true,
+
+        get: function ()
+        {
+            if (this.dirty)
+            {
+                this.update();
+            }
+
+            return this._color32;
+        }
+
+    },
+
+    rgba: {
+
+        enumerable: true,
+
+        get: function ()
+        {
+            if (this.dirty)
+            {
+                this.update();
+            }
+
+            return this._rgba;
+        }
+
+    },
+
+    //  Gets and sets the red value, normalized to the 0 to 1 range
+    redGL: {
+
+        enumerable: true,
+
+        get: function ()
+        {
+            return this.gl[0];
+        },
+
+        set: function (value)
+        {
+            this.gl[0] = Math.min(Math.abs(value), 1);
+
+            this.r = Math.floor(this.gl[0] * 255);
+
+            this.dirty = true;
+        }
+
+    },
+
+    greenGL: {
+
+        enumerable: true,
+
+        get: function ()
+        {
+            return this.gl[1];
+        },
+
+        set: function (value)
+        {
+            this.gl[1] = Math.min(Math.abs(value), 1);
+
+            this.g = Math.floor(this.gl[1] * 255);
+
+            this.dirty = true;
+        }
+
+    },
+
+    blueGL: {
+
+        enumerable: true,
+
+        get: function ()
+        {
+            return this.gl[2];
+        },
+
+        set: function (value)
+        {
+            this.gl[2] = Math.min(Math.abs(value), 1);
+
+            this.b = Math.floor(this.gl[2] * 255);
+
+            this.dirty = true;
+        }
+
+    },
+
+    alphaGL: {
+
+        enumerable: true,
+
+        get: function ()
+        {
+            return this.gl[3];
+        },
+
+        set: function (value)
+        {
+            this.gl[3] = Math.min(Math.abs(value), 1);
+
+            this.a = Math.floor(this.gl[3] * 255);
+
+            this.dirty = true;
+        }
+
+    },
+
+    //  Gets and sets the red value, normalized to the 0 to 255 range
+    red: {
+
+        enumerable: true,
+
+        get: function ()
+        {
+            return this.r;
+        },
+
+        set: function (value)
+        {
+            value = Math.floor(Math.abs(value));
+
+            this.r = Math.min(value, 255);
+
+            this.gl[0] = value / 255;
+
+            this.dirty = true;
+        }
+
+    },
+
+    green: {
+
+        enumerable: true,
+
+        get: function ()
+        {
+            return this.g;
+        },
+
+        set: function (value)
+        {
+            value = Math.floor(Math.abs(value));
+
+            this.g = Math.min(value, 255);
+
+            this.gl[1] = value / 255;
+
+            this.dirty = true;
+        }
+
+    },
+
+    blue: {
+
+        enumerable: true,
+
+        get: function ()
+        {
+            return this.b;
+        },
+
+        set: function (value)
+        {
+            value = Math.floor(Math.abs(value));
+
+            this.b = Math.min(value, 255);
+
+            this.gl[2] = value / 255;
+
+            this.dirty = true;
+        }
+
+    },
+
+    alpha: {
+
+        enumerable: true,
+
+        get: function ()
+        {
+            return this.a;
+        },
+
+        set: function (value)
+        {
+            value = Math.floor(Math.abs(value));
+
+            this.a = Math.min(value, 255);
+
+            this.gl[3] = value / 255;
+
+            this.dirty = true;
+        }
+
+    },
+
+});
+
+
+module.exports = Color;

v3/src/graphics/color/ColorToRGBA.js

@@ -0,0 +1,18 @@
+var ColorToRGBA = function (color)
+{
+    var output = {
+        r: color >> 16 & 0xFF,
+        g: color >> 8 & 0xFF,
+        b: color & 0xFF,
+        a: 255
+    };
+
+    if (color > 16777215)
+    {
+        output.a = color >>> 24;
+    }
+
+    return output;
+};
+
+module.exports = ColorToRGBA;

v3/src/graphics/color/ComponentToHex.js

@@ -0,0 +1,14 @@
+/**
+* Return a string containing a hex representation of the given color component.
+*
+* @param {integer} color - The color channel to get the hex value for, must be a value between 0 and 255.
+* @return {string} A string of length 2 characters, i.e. 255 = ff, 100 = 64.
+*/
+var ComponentToHex = function (color)
+{
+    var hex = color.toString(16);
+
+    return (hex.length === 1) ? '0' + hex : hex;
+};
+
+module.exports = ComponentToHex;

v3/src/graphics/color/GetColor.js

@@ -0,0 +1,15 @@
+/**
+ * Given 3 color values this will return an integer representation of it.
+ *
+ * @method getColor
+ * @param {integer} r - The red color component in the range 0 - 255.
+ * @param {integer} g - The green color component in the range 0 - 255.
+ * @param {integer} b - The blue color component in the range 0 - 255.
+ * @return {integer} A native color value integer (format: 0xRRGGBB).
+ */
+var GetColor = function (red, green, blue)
+{
+    return red << 16 | green << 8 | blue;
+};
+
+module.exports = GetColor;

v3/src/graphics/color/GetColor32.js

@@ -0,0 +1,15 @@
+/**
+ * Given an alpha and 3 color values this will return an integer representation of it.
+ *
+ * @method getColor32
+ * @param {integer} r - The red color component in the range 0 - 255.
+ * @param {integer} g - The green color component in the range 0 - 255.
+ * @param {integer} b - The blue color component in the range 0 - 255.
+ * @return {integer} A native color value integer (format: 0xRRGGBB).
+ */
+var GetColor32 = function (red, green, blue, alpha)
+{
+    return alpha << 24 | red << 16 | green << 8 | blue;
+};
+
+module.exports = GetColor32;

v3/src/graphics/color/HSLToColor.js

@@ -0,0 +1,26 @@
+var Color = require('./Color');
+var HueToComponent = require('./HueToComponent');
+
+var HSLToColor = function (h, s, l)
+{
+    // achromatic by default
+    var r = l;
+    var g = l;
+    var b = l;
+
+    if (s !== 0)
+    {
+        var q = (l < 0.5) ? l * (1 + s) : l + s - l * s;
+        var p = 2 * l - q;
+
+        r = HueToComponent(p, q, h + 1 / 3);
+        g = HueToComponent(p, q, h);
+        b = HueToComponent(p, q, h - 1 / 3);
+    }
+
+    var color = new Color();
+
+    return color.setGLTo(r, g, b, 1);
+};
+
+module.exports = HSLToColor;

v3/src/graphics/color/HSVColorWheel.js

@@ -0,0 +1,27 @@
+var HSVtoRGB = require('./HSVtoRGB');
+
+/**
+* Get HSV color wheel values in an array which will be 360 elements in size.
+*
+* @method Phaser.Color.HSVColorWheel
+* @static
+* @param {number} [s=1] - The saturation, in the range 0 - 1.
+* @param {number} [v=1] - The value, in the range 0 - 1.
+* @return {array} An array containing 360 elements corresponding to the HSV color wheel.
+*/
+var HSVColorWheel = function (s, v)
+{
+    if (s === undefined) { s = 1; }
+    if (v === undefined) { v = 1; }
+
+    var colors = [];
+
+    for (var c = 0; c <= 359; c++)
+    {
+        colors.push(HSVtoRGB(c / 359, s, v));
+    }
+
+    return colors;
+};
+
+module.exports = HSVColorWheel;

v3/src/graphics/color/HSVToRGB.js

@@ -0,0 +1,53 @@
+/**
+ * Converts an HSV (hue, saturation and value) color value to RGB.
+ * Conversion formula 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)
+ *
+ * @method fromHSV
+ * @param {number} h - The hue, in the range 0 - 1.
+ * @param {number} s - The saturation, in the range 0 - 1.
+ * @param {number} v - The value, in the range 0 - 1.
+ * @return {BaseColor} This
+ */
+var HSVToRGB = function (h, s = 1, v = 1)
+{
+    const i = Math.floor(h * 6);
+    const f = h * 6 - i;
+
+    const p = Math.floor((v * (1 - s)) * 255);
+    const q = Math.floor((v * (1 - f * s)) * 255);
+    const t = Math.floor((v * (1 - (1 - f) * s)) * 255);
+
+    v = Math.floor(v *= 255);
+
+    const r = i % 6;
+
+    if (r === 0)
+    {
+        return { r: v, g: t, b: p };
+    }
+    else if (r === 1)
+    {
+        return { r: q, g: v, b: p };
+    }
+    else if (r === 2)
+    {
+        return { r: p, g: v, b: t };
+    }
+    else if (r === 3)
+    {
+        return { r: p, g: q, b: v };
+    }
+    else if (r === 4)
+    {
+        return { r: t, g: p, b: v };
+    }
+    else if (r === 5)
+    {
+        return { r: v, g: p, b: q };
+    }
+    
+};
+
+module.exports = HSVToRGB;

v3/src/graphics/color/HueToComponent.js

@@ -0,0 +1,41 @@
+/**
+* Converts a hue to an RGB color.
+* Based on code by Michael Jackson (https://github.com/mjijackson)
+*
+* @method Lazer.Color.hueToColor
+* @param {number} p
+* @param {number} q
+* @param {number} t
+* @return {number} The color component value.
+*/
+var HueToComponent = function (p, q, t)
+{
+    if (t < 0)
+    {
+        t += 1;
+    }
+
+    if (t > 1)
+    {
+        t -= 1;
+    }
+
+    if (t < 1 / 6)
+    {
+        return p + (q - p) * 6 * t;
+    }
+
+    if (t < 1 / 2)
+    {
+        return q;
+    }
+
+    if (t < 2 / 3)
+    {
+        return p + (q - p) * (2 / 3 - t) * 6;
+    }
+
+    return p;
+};
+
+module.export = HueToComponent;

v3/src/graphics/color/index.js

@@ -0,0 +1,14 @@
+//  Phaser.Graphics.Color
+
+var Color = require('./Color');
+
+Color.GetColor = require('./GetColor');
+Color.GetColor32 = require('./GetColor32');
+Color.ColorToRGBA = require('./ColorToRGBA');
+Color.ComponentToHex = require('./ComponentToHex');
+Color.CSSToColor = require('./CSSToColor');
+Color.HueToComponent = require('./HueToComponent');
+Color.HSLToColor = require('./HSLToColor');
+Color.HSVColorWheel = require('./HSVColorWheel');
+
+module.exports = Color;