Add support for "rgba" to Phaser.Stage.backgroundColor

 - backgroundColor now uses valueToColor which supports hex strings, web/rgba strings, and hex numbers.
 - valueToColor normalizes across hexToColor/webToColor/getRGB; see comments
 - hexToColor now documents the prefix being optional and allows the `0x` prefix.
 - webToColor now exctracts an alpha channel if present - as a slight misfeature it will also accept `rgb(..,a)`.

Author: pnstickne

src/core/Stage.js

@@ -293,16 +293,8 @@ Phaser.Stage.prototype.visibilityChange = function (event) {
 */
 Phaser.Stage.prototype.setBackgroundColor = function(backgroundColor)
 {
-    if (typeof backgroundColor === 'string')
-    {
-        var rgb = Phaser.Color.hexToColor(backgroundColor);
-        this._backgroundColor = Phaser.Color.getColor(rgb.r, rgb.g, rgb.b);
-    }
-    else
-    {
-        var rgb = Phaser.Color.getRGB(backgroundColor);
-        this._backgroundColor = backgroundColor;
-    }
+    var rgb = Phaser.Color.valueToColor(backgroundColor);
+    this._backgroundColor = Phaser.Color.getColor(rgb.r, rgb.g, rgb.b);
 
     this.backgroundColorSplit = [ rgb.r / 255, rgb.g / 255, rgb.b / 255 ];
     this.backgroundColorString = Phaser.Color.RGBtoString(rgb.r, rgb.g, rgb.b, 255, '#');

src/utils/Color.js

@@ -548,20 +548,24 @@ Phaser.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 hex string to convert. Can be in the short-hand format `#03f` or `#0033ff`.
+    * @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.
     */
     hexToColor: function (hex, out) {
 
         // Expand shorthand form (e.g. "03F") to full form (e.g. "0033FF")
-        hex = hex.replace(/^#?([a-f\d])([a-f\d])([a-f\d])$/i, function(m, r, g, b) {
+        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 = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+        var result = /^(?:#|0x)?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
 
         if (result)
         {
@@ -588,11 +592,13 @@ Phaser.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 web string in the format: 'rgba(r,g,b,a)'
-    * @param {object} [out] - An object into which 3 properties will be created: 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.
+    * @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.
     */
     webToColor: function (web, out) {
 
@@ -608,12 +614,63 @@ Phaser.Color = {
             out.r = parseInt(result[1], 10);
             out.g = parseInt(result[2], 10);
             out.b = parseInt(result[3], 10);
+            out.a = result[4] !== undefined ? parseFloat(result[4]) : 1;
         }
 
         return out;
 
     },
 
+    /**
+    * Converts a string - either in "hex" or a "CSS 'web' string" into a Phaser Color object.    
+    *
+    * An alpha channel is _not_ supported when specifying a hex string.
+    *
+    * @method Phaser.Color.valueToColor
+    * @static
+    * @param {string|number} value - Can either be a string (see `hexToColor` and `webToColor` for the supported formats) or a number (see `getRGB`).
+    * @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.
+    */
+    valueToColor: function (value, out) {
+
+        //  The behavior is not consistent between hexToColor/webToColor on invalid input.
+        //  This unifies both by returning a new object, but returning null may be better.
+        if (!out)
+        {
+            out = Phaser.Color.createColor();
+        }
+
+        if (typeof value === 'string')
+        {
+            if (value.indexOf('rgb') === 0)
+            {
+                return Phaser.Color.webToColor(value, out);
+            }
+            else
+            {
+                //  `hexToColor` does not support alpha; match `createColor`.
+                out.a = 1;
+                return Phaser.Color.hexToColor(value, out);
+            }
+        }
+        else if (typeof value === 'number')
+        {
+            //  `getRGB` does not take optional object to modify;
+            //  alpha is also adjusted to match `createColor`.
+            var tempColor = Phaser.Color.getRGB(value);
+            out.r = tempColor.r;
+            out.g = tempColor.g;
+            out.b = tempColor.b;
+            out.a = tempColor.a / 255;
+            return out;
+        }
+        else
+        {
+            return out;
+        }
+
+    },
 
     /**
     * Return a string containing a hex representation of the given color component.