diff --git a/v3/src/checksum.js b/v3/src/checksum.js index d954c5b87..85d500087 100644 --- a/v3/src/checksum.js +++ b/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; \ No newline at end of file diff --git a/v3/src/dom/CanvasPool.js b/v3/src/dom/CanvasPool.js index fc217fbf8..7a5f048f9 100644 --- a/v3/src/dom/CanvasPool.js +++ b/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} diff --git a/v3/src/graphics/color/CSSToColor.js b/v3/src/graphics/color/CSSToColor.js new file mode 100644 index 000000000..f57a18667 --- /dev/null +++ b/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; diff --git a/v3/src/graphics/color/Color.js b/v3/src/graphics/color/Color.js new file mode 100644 index 000000000..a20236626 --- /dev/null +++ b/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; diff --git a/v3/src/graphics/color/ColorToRGBA.js b/v3/src/graphics/color/ColorToRGBA.js new file mode 100644 index 000000000..dc8821caa --- /dev/null +++ b/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; diff --git a/v3/src/graphics/color/ComponentToHex.js b/v3/src/graphics/color/ComponentToHex.js new file mode 100644 index 000000000..0421a0ecd --- /dev/null +++ b/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; diff --git a/v3/src/graphics/color/GetColor.js b/v3/src/graphics/color/GetColor.js new file mode 100644 index 000000000..41954dc83 --- /dev/null +++ b/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; diff --git a/v3/src/graphics/color/GetColor32.js b/v3/src/graphics/color/GetColor32.js new file mode 100644 index 000000000..00aaa7db7 --- /dev/null +++ b/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; diff --git a/v3/src/graphics/color/HSLToColor.js b/v3/src/graphics/color/HSLToColor.js new file mode 100644 index 000000000..284a79184 --- /dev/null +++ b/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; diff --git a/v3/src/graphics/color/HSVColorWheel.js b/v3/src/graphics/color/HSVColorWheel.js new file mode 100644 index 000000000..6c27ee48e --- /dev/null +++ b/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; diff --git a/v3/src/graphics/color/HSVToRGB.js b/v3/src/graphics/color/HSVToRGB.js new file mode 100644 index 000000000..fc77f0cbf --- /dev/null +++ b/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; diff --git a/v3/src/graphics/color/HueToComponent.js b/v3/src/graphics/color/HueToComponent.js new file mode 100644 index 000000000..7abfc816f --- /dev/null +++ b/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; diff --git a/v3/src/graphics/color/index.js b/v3/src/graphics/color/index.js new file mode 100644 index 000000000..1366e1bb9 --- /dev/null +++ b/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;