Final few Color functions. Game Config now uses Color object for Background Color.

Author: photonstorm

v3/src/boot/Config.js

@@ -8,6 +8,7 @@ var MATH = require('../math');
 var CONST = require('../const');
 var NOOP = require('../utils/NOOP');
 var GetObjectValue = require('../utils/object/GetObjectValue');
+var ValueToColor = require('../graphics/color/ValueToColor');
 
 var defaultBannerColor = [
     '#ff0000',
@@ -58,7 +59,7 @@ var Config = function (config)
     this.pixelArt = GetObjectValue(config, 'pixelArt', false);
     this.transparent = GetObjectValue(config, 'transparent', false);
     this.clearBeforeRender = GetObjectValue(config, 'clearBeforeRender', true);
-    this.backgroundColor = GetObjectValue(config, 'backgroundColor', '#000000');
+    this.backgroundColor = ValueToColor(GetObjectValue(config, 'backgroundColor', 0));
 
     //  Callbacks
     this.preBoot = GetObjectValue(config, 'callbacks.preBoot', NOOP);

v3/src/checksum.js

@@ -1,4 +1,4 @@
 var CHECKSUM = {
-build: '1c054190-ee36-11e6-8010-4ba93e0d034d'
+build: '88f5e960-f031-11e6-8333-5dcb4000555b'
 };
 module.exports = CHECKSUM;

v3/src/graphics/color/Color.js

@@ -9,10 +9,10 @@ var Color = function (red, green, blue, alpha)
     if (alpha === undefined) { alpha = 255; }
 
     //  All private
-    this.r = red;
-    this.g = green;
-    this.b = blue;
-    this.a = alpha;
+    this.r = 0;
+    this.g = 0;
+    this.b = 0;
+    this.a = 255;
 
     this.gl = [ 0.0, 0.0, 0.0, 1.0 ];
 
@@ -22,7 +22,7 @@ var Color = function (red, green, blue, alpha)
 
     this.dirty = true;
 
-    this.update();
+    this.setTo(red, green, blue, alpha);
 };
 
 Color.prototype.contrusctor = Color;

v3/src/graphics/color/HexStringToColor.js

@@ -0,0 +1,39 @@
+var Color = require('./Color');
+
+/**
+* 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.
+*
+* @method Phaser.Color.hexToColor
+* @static
+* @param {string} hex - The color string in a hex format.
+* @param {object} [out] - An object into which 3 properties will be created or set: r, g and b. If not provided a new object will be created.
+* @return {object} An object with the red, green and blue values set in the r, g and b properties.
+*/
+var HexStringToColor = function (hex)
+{
+    var color = new Color();
+
+    // Expand shorthand form (e.g. "03F") to full form (e.g. "0033FF")
+    hex = hex.replace(/^(?:#|0x)?([a-f\d])([a-f\d])([a-f\d])$/i, function(m, r, g, b) {
+        return r + r + g + g + b + b;
+    });
+
+    var result = /^(?:#|0x)?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+
+    if (result)
+    {
+        var r = parseInt(result[1], 16);
+        var g = parseInt(result[2], 16);
+        var b = parseInt(result[3], 16);
+
+        color.setTo(r, g, b);
+    }
+
+    return color;
+};
+
+module.exports = HexStringToColor;

v3/src/graphics/color/IntegerToColor.js

@@ -0,0 +1,11 @@
+var Color = require('./Color');
+var IntegerToRGB = require('./IntegerToRGB');
+
+var IntegerToColor = function (input)
+{
+    var rgb = IntegerToRGB(input);
+
+    return new Color(rgb.r, rgb.g, rgb.b, rgb.a);
+};
+
+module.exports = IntegerToColor;

v3/src/graphics/color/IntegerToRGB.js

@@ -0,0 +1,34 @@
+/**
+* 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)
+*
+* @method Phaser.Color.getRGB
+* @static
+* @param {number} color - Color in RGB (0xRRGGBB) or ARGB format (0xAARRGGBB).
+* @return {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.
+*/
+var IntegerToRGB = function (color)
+{
+    if (color > 16777215)
+    {
+        //  The color value has an alpha component
+        return {
+            a: color >>> 24,
+            r: color >> 16 & 0xFF,
+            g: color >> 8 & 0xFF,
+            b: color & 0xFF
+        };
+    }
+    else
+    {
+        return {
+            a: 255,
+            r: color >> 16 & 0xFF,
+            g: color >> 8 & 0xFF,
+            b: color & 0xFF
+        };
+    }
+};
+
+module.exports = IntegerToRGB;

v3/src/graphics/color/RGBStringToColor.js

@@ -0,0 +1,33 @@
+var Color = require('./Color');
+
+/**
+* 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].
+*
+* @method Phaser.Color.webToColor
+* @static
+* @param {string} web - The color string in CSS 'web' format.
+* @param {object} [out] - An object into which 4 properties will be created: r, g, b and a. If not provided a new object will be created.
+* @return {object} An object with the red, green, blue and alpha values set in the r, g, b and a properties.
+*/
+var RGBStringToColor = function (rgb)
+{
+    var color = new Color();
+
+    var result = /^rgba?\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*(?:,\s*(\d+(?:\.\d+)?))?\s*\)$/.exec(rgb.toLowerCase());
+
+    if (result)
+    {
+        var r = parseInt(result[1], 10);
+        var g = parseInt(result[2], 10);
+        var b = parseInt(result[3], 10);
+        var a = (result[4] !== undefined) ? parseFloat(result[4]) : 1;
+
+        color.setTo(r, g, b, a * 255);
+    }
+
+    return color;
+};
+
+module.exports = RGBStringToColor;

v3/src/graphics/color/ValueToColor.js

@@ -0,0 +1,24 @@
+var RGBStringToColor = require('./RGBStringToColor');
+var HexStringToColor = require('./HexStringToColor');
+var IntegerToColor = require('./IntegerToColor');
+
+var ValueToColor = function (input)
+{
+    if (typeof input === 'string')
+    {
+        if (input.substr(0, 3).toLowerCase() === 'rgb')
+        {
+            return RGBStringToColor(input);
+        }
+        else
+        {
+            return HexStringToColor(input);
+        }
+    }
+    else if (typeof input === 'number')
+    {
+        return IntegerToColor(input);
+    }
+};
+
+module.exports = ValueToColor;

v3/src/graphics/color/index.js

@@ -2,18 +2,23 @@
 
 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.GetColor = require('./GetColor');
+Color.GetColor32 = require('./GetColor32');
+Color.HexStringToColor = require('./HexStringToColor');
 Color.HSLToColor = require('./HSLToColor');
 Color.HSVColorWheel = require('./HSVColorWheel');
 Color.HSVToRGB = require('./HSVToRGB');
+Color.HueToComponent = require('./HueToComponent');
+Color.IntegerToColor = require('./IntegerToColor');
+Color.IntegerToRGB = require('./IntegerToRGB');
+Color.Interpolate = require('./Interpolate');
 Color.RandomRGB = require('./RandomRGB');
+Color.RGBStringToColor = require('./RGBStringToColor');
 Color.RGBToHSV = require('./RGBToHSV');
 Color.RGBToString = require('./RGBToString');
-Color.Interpolate = require('./Interpolate');
+Color.ValueToColor = require('./ValueToColor');
 
 module.exports = Color;

v3/src/graphics/index.js

@@ -0,0 +1,8 @@
+//  Phaser.Graphics
+
+module.exports = {
+
+    BlendModes: require('./blendmodes'),
+    Color: require('./color')
+  
+};