From 7ad4164e3a33c635576edc8314d2cee9bcebe64a Mon Sep 17 00:00:00 2001 From: photonstorm Date: Sun, 17 Nov 2013 04:33:16 +0000 Subject: [PATCH] Expanding BitmapData --- README.md | 4 +- examples/wip/bmd2.js | 29 +- examples/wip/bmd3.js | 74 ++ src/gameobjects/BitmapData.js | 987 +++++++++++++++++++++++++-- src/gameobjects/GameObjectFactory.js | 9 +- src/gameobjects/Sprite.js | 12 +- src/utils/Color.js | 69 +- 7 files changed, 1065 insertions(+), 119 deletions(-) create mode 100644 examples/wip/bmd3.js diff --git a/README.md b/README.md index 7646e095..afa31f6d 100644 --- a/README.md +++ b/README.md @@ -57,6 +57,7 @@ Version 1.1.3 - in build * New: Added Group.iterate, a powerful way to count or return children that match a certain criteria. Refactored Group to use iterate, lots of repeated code cut. * New: Added Group.sort. You can now sort the Group based on any given numeric property (x, y, health), finally you can do depth-sorting :) Example created to show. * New: Enhanced renderTexture so it can accept a Phaser.Group object and improved documentation and examples. + * Fixed: Lots of fixes to the TypeScript definitions file (many thanks gltovar) * Fixed: Tilemap commands use specified layer when one given (thanks Izzimach) * Fixed: Mouse.stop now uses the true useCapture, which means the event listeners stop listening correctly (thanks beeglebug) @@ -65,6 +66,7 @@ Version 1.1.3 - in build * Fixed: Group.swap had a hellish to find bug that only manifested when B-A upward swaps occured. Hours of debugging later = bug crushed. * Fixed: Point.rotate asDegrees fixed (thanks BorisKozo) * Fixed: ArcadePhysics.separateTile wasn't returning the value, so the custom process callback wasn't getting called (thanks flameiguana) + * Updated: ArcadePhysics.updateMotion applies the dt to the velocity calculations as well as position now (thanks jcs) * Updated: RequestAnimationFrame now retains the callbackID which is passed to cancelRequestAnimationFrame. * Updated: Button now goes back to over state when setFrames used in action (thanks beeglebug) @@ -72,7 +74,7 @@ Version 1.1.3 - in build * Updated: Tided up the Graphics object (thanks BorisKozo) * Updated: If running in Canvas mode and you have a render function it will save the context and reset the transform before running your render function. * Updated: Sprite will now check the exists property of the Group it is in, if the Group.exists = false the Sprite won't update. -* Updated: Lots of small documentation tweaks across various files such as Pointer. +* Updated: Lots of documentation tweaks across various files such as Pointer and Color. * Updated: If you specify 'null' as a Group parent it will now revert to using the World as the parent (before only 'undefined' worked) diff --git a/examples/wip/bmd2.js b/examples/wip/bmd2.js index c973a226..0dba6b07 100644 --- a/examples/wip/bmd2.js +++ b/examples/wip/bmd2.js @@ -14,33 +14,32 @@ var bmd; function create() { - //game.stage.backgroundColor = '#450034'; + bmd = game.add.bitmapData(800, 600); - bmd = game.add.bitmapData('bob', 800, 600); + console.log('isLittleEndian', bmd.isLittleEndian); + bmd.isLittleEndian = false; + + bmd.beginPath(); + bmd.beginLinearGradientFill(["#ff0000", "#ffff00"], [0, 1], 0, 0, 0, 600); + bmd.rect(0, 0, 800, 600); + bmd.closePath(); + bmd.fill(); + + bmd.refreshBuffer(); - // And apply it to 100 randomly positioned sprites for (var i = 0; i < 100; i++) { - //bmd.setPixel(game.world.randomX, game.world.randomY, 100 + Math.random() * 155, 100 + Math.random() * 155, 255); + bmd.setPixel(game.world.randomX, game.world.randomY, 0, 0, 0); } - bmd.context.fillStyle = '#ffffff'; - bmd.context.fillRect(20,20,16,16); - var d = game.add.sprite(0, 0, bmd); } function update() { - // bmd.context.fillRect(game.world.randomX,game.world.randomY,4,4); - - //console.log('b'); - - - // bmd.setPixel(game.world.randomX, game.world.randomY, 250, 250, 250); - - bmd.setPixel(game.input.x, game.input.y, 255, 255, 255); + bmd.refreshBuffer(); + bmd.setPixel(game.input.x, game.input.y, 0, 0, 0); } diff --git a/examples/wip/bmd3.js b/examples/wip/bmd3.js new file mode 100644 index 00000000..007fd8e3 --- /dev/null +++ b/examples/wip/bmd3.js @@ -0,0 +1,74 @@ + +var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { preload: preload, create: create, update: update, render: render }); + +function preload() { + + game.load.image('atari1', 'assets/sprites/atari130xe.png'); + +} + +var bmd; +var img; + +function create() { + + var canvas = Phaser.Canvas.create(800, 600); + var context = canvas.getContext('2d'); + + context.drawImage(game.cache.getImage('atari1'), 0, 0); + + img = context.getImageData(0, 0, 800, 600); + + var data8 = new Uint8ClampedArray(img.data.buffer); + var data32 = new Uint32Array(img.data.buffer); + + context.drawImage(game.cache.getImage('atari1'), 32, 50); + + img = context.getImageData(0, 0, 800, 600); + + // console.log(data32[y * 800 + x]); + + var alpha = 255; + var blue = 50; + var red = 50; + var green = 100; + + for (var y = 0; y < 100; y++) + { + for (var x = 0; x < 250; x++) + { + // var value = x * y & 0xff; + // console.log(data32[y * 800 + x]); + // data32[((y + 100) * 800) + x] = 0; + // data32[y * 800 + x] = (alpha << 24) | (blue << 16) | (green << 8) | red;; + // data32[y * 800 + x] = (red << 24) | (green << 16) | (blue << 8) | alpha; + data32[y * 800 + (x + 300)] = data32[y * 800 + x]; + } + } + + // if (this.isLittleEndian) + // { + // this.data32[y * this.width + x] = (alpha << 24) | (blue << 16) | (green << 8) | red; + // } + // else + // { + // this.data32[y * this.width + x] = (red << 24) | (green << 16) | (blue << 8) | alpha; + // } + + img.data.set(data8); + context.putImageData(img, 0, 0); + + document.getElementById('phaser-example').appendChild(canvas); + +} + +function update() { + + +} + + +function render() { + + +} diff --git a/src/gameobjects/BitmapData.js b/src/gameobjects/BitmapData.js index d796dd08..2d42c70d 100644 --- a/src/gameobjects/BitmapData.js +++ b/src/gameobjects/BitmapData.js @@ -10,13 +10,11 @@ * @class Phaser.BitmapData * @constructor * @param {Phaser.Game} game - A reference to the currently running game. -* @param {string} [key] - A key the BitmapData will use when added to the Phaser.Cache. If none is given a UUID is generated. * @param {number} [width=256] - The width of the BitmapData in pixels. * @param {number} [height=256] - The height of the BitmapData in pixels. */ -Phaser.BitmapData = function (game, key, width, height) { +Phaser.BitmapData = function (game, width, height) { - if (typeof key === 'undefined') { key = 'bitmapData' . game.rnd.uuid(); } if (typeof width === 'undefined') { width = 256; } if (typeof height === 'undefined') { height = 256; } @@ -25,21 +23,10 @@ Phaser.BitmapData = function (game, key, width, height) { */ this.game = game; - /** - * @property {boolean} exists - If exists = false then the BitmapData isn't updated by the core game loop. - * @default - */ - this.exists = true; - - /** - * @property {Phaser.Group} group - The parent Group of this BitmapData. - */ - this.group = null; - /** * @property {string} name - The name of the BitmapData. */ - this.name = key; + this.name = ''; /** * @property {number} width - The width of the BitmapData in pixels. @@ -58,7 +45,7 @@ Phaser.BitmapData = function (game, key, width, height) { this.canvas = Phaser.Canvas.create(width, height); /** - * @property {HTMLCanvasContextElement} context - The 2d context of the canvas. + * @property {CanvasRenderingContext2D} context - The 2d context of the canvas. * @default */ this.context = this.canvas.getContext('2d'); @@ -69,20 +56,14 @@ Phaser.BitmapData = function (game, key, width, height) { this.imageData = this.context.getImageData(0, 0, width, height); /** - * @property {ArrayBuffer} buffer - A TypedArray storing the canvas image data. - * TODO: = (typeof Float32Array !== 'undefined') ? Float32Array : Array; + * @property {Uint8ClampedArray} data8 - A uint8 clamped view on the buffer. */ - this.buffer = new ArrayBuffer(this.imageData.data.length); + this.data8 = new Uint8ClampedArray(this.imageData.buffer); /** - * @property {Uint8ClampedArray} buffer - A uint8 clamped view on the buffer. + * @property {Uint32Array} data32 - A Uint32 view on the buffer. */ - this.data8 = new Uint8ClampedArray(this.buffer); - - /** - * @property {Uint32Array} buffer - A Uint32 view on the buffer. - */ - this.data32 = new Uint32Array(this.buffer); + this.data32 = new Uint32Array(this.imageData.buffer); // Little or big-endian? this.data32[1] = 0x0a0b0c0d; @@ -121,22 +102,43 @@ Phaser.BitmapData = function (game, key, width, height) { */ this.type = Phaser.BITMAPDATA; - /** - * You can set a globalCompositeOperation that will be applied to this BitmapData. - * This is useful if you wish to apply an effect like 'lighten'. - * If this value is set it will call a canvas context save and restore before and after the render pass, so use it sparingly. - * Set to null to disable. - * @property {string} globalCompositeOperation - * @default - */ - this.globalCompositeOperation = null; - this._dirty = false; } Phaser.BitmapData.prototype = { + /** + * Updates the given Sprite so that it uses this BitmapData as its texture. + * @method Phaser.BitmapData.add + * @param {Phaser.Sprite} sprite - The sprite to apply this texture to. + */ + add: function (sprite) { + + sprite.loadTexture(this); + + }, + + /** + * Given an array of Sprites it will update each of them so that their Textures reference this BitmapData. + * @method Phaser.BitmapData.addTo + * @param {Phaser.Sprite[]} sprites - An array of Sprites to apply this texture to. + */ + addTo: function (sprites) { + + for (var i = 0; i < objects.length; i++) + { + if (objects[i].texture) + { + } + } + + }, + + /** + * Clears the BitmapData. + * @method Phaser.BitmapData.clear + */ clear: function () { this.context.clearRect(0, 0, this.width, this.height); @@ -145,21 +147,28 @@ Phaser.BitmapData.prototype = { }, + refreshBuffer: function () { + + this.imageData = this.context.getImageData(0, 0, this.width, this.height); + this.data8 = new Uint8ClampedArray(this.imageData.buffer); + this.data32 = new Uint32Array(this.imageData.buffer); + + }, + /** - * Sets the color of the given pixel. + * Sets the color of the given pixel to the specified red, green, blue and alpha values. + * @method Phaser.BitmapData.setPixel32 * @param {number} x - The X coordinate of the pixel to be set. * @param {number} y - The Y coordinate of the pixel to be set. - * @param {number} red - The red color value (between 0 and 255) - * @param {number} green - The green color value (between 0 and 255) - * @param {number} blue - The blue color value (between 0 and 255) - * @param {number} alpha - The alpha color value (between 0 and 255) + * @param {number} red - The red color value, between 0 and 0xFF (255). + * @param {number} green - The green color value, between 0 and 0xFF (255). + * @param {number} blue - The blue color value, between 0 and 0xFF (255). + * @param {number} alpha - The alpha color value, between 0 and 0xFF (255). */ setPixel32: function (x, y, red, green, blue, alpha) { if (x >= 0 && x <= this.width && y >= 0 && y <= this.height) { - var value = x * y & 0xff; - if (this.isLittleEndian) { this.data32[y * this.width + x] = (alpha << 24) | (blue << 16) | (green << 8) | red; @@ -179,13 +188,13 @@ Phaser.BitmapData.prototype = { }, /** - * Sets the color of the given pixel. + * Sets the color of the given pixel to the specified red, green and blue values. + * @method Phaser.BitmapData.setPixel * @param {number} x - The X coordinate of the pixel to be set. * @param {number} y - The Y coordinate of the pixel to be set. * @param {number} red - The red color value (between 0 and 255) * @param {number} green - The green color value (between 0 and 255) * @param {number} blue - The blue color value (between 0 and 255) - * @param {number} alpha - The alpha color value (between 0 and 255) */ setPixel: function (x, y, red, green, blue) { @@ -195,50 +204,38 @@ Phaser.BitmapData.prototype = { /** * Get a color of a specific pixel. - * @param x {number} X position of the pixel in this texture. - * @param y {number} Y position of the pixel in this texture. + * @param {number} x - The X coordinate of the pixel to get. + * @param {number} y - The Y coordinate of the pixel to get. * @return {number} A native color value integer (format: 0xRRGGBB) */ getPixel: function (x, y) { if (x >= 0 && x <= this.width && y >= 0 && y <= this.height) { - if (this.isLittleEndian) - { - } - else - { - } + return this.data32[y * this.width + x]; } - //r = imageData.data[0]; - //g = imageData.data[1]; - //b = imageData.data[2]; - //a = imageData.data[3]; - // var imageData = this.context.getImageData(x, y, 1, 1); - - // return Phaser.ColorUtils.getColor(imageData.data[0], imageData.data[1], imageData.data[2]); - }, /** * Get a color of a specific pixel (including alpha value). - * @param x {number} X position of the pixel in this texture. - * @param y {number} Y position of the pixel in this texture. - * @return A native color value integer (format: 0xAARRGGBB) + * @param {number} x - The X coordinate of the pixel to get. + * @param {number} y - The Y coordinate of the pixel to get. + * @return {number} A native color value integer (format: 0xAARRGGBB) */ getPixel32: function (x, y) { - // var imageData = this.context.getImageData(x, y, 1, 1); - - // return Phaser.ColorUtils.getColor32(imageData.data[3], imageData.data[0], imageData.data[1], imageData.data[2]); + if (x >= 0 && x <= this.width && y >= 0 && y <= this.height) + { + return this.data32[y * this.width + x]; + } }, /** * Get pixels in array in a specific Rectangle. * @param rect {Rectangle} The specific Rectangle. - * @returns {array} CanvasPixelArray. + * @return {array} CanvasPixelArray. */ getPixels: function (rect) { @@ -246,11 +243,704 @@ Phaser.BitmapData.prototype = { }, - postUpdate: function () { + /** + * Adds an arc to the path which is centered at (x, y) position with radius r starting at startAngle and ending at endAngle + * going in the given direction by anticlockwise (defaulting to clockwise). + * @method Phaser.BitmapData.arc + * @param {number} x - The x axis of the coordinate for the arc's center + * @param {number} y - The y axis of the coordinate for the arc's center + * @param {number} radius - The arc's radius + * @param {number} startAngle - The starting point, measured from the x axis, from which it will be drawn, expressed in radians. + * @param {number} endAngle - The end arc's angle to which it will be drawn, expressed in radians. + * @param {boolean} [anticlockwise=true] - true draws the arc anticlockwise, otherwise in a clockwise direction. + * @return {Phaser.BitmapData} The BitmapData instance this method was called on. + */ + arc: function (x, y, radius, startAngle, endAngle, anticlockwise) { + + if (typeof anticlockwise === 'undefined') { anticlockwise = false; } + + this._dirty = true; + this.context.arc(x, y, radius, startAngle, endAngle, anticlockwise); + return this; + + }, + + /** + * Adds an arc with the given control points and radius, connected to the previous point by a straight line. + * @method Phaser.BitmapData.arcTo + * @param {number} x1 + * @param {number} y1 + * @param {number} x2 + * @param {number} y2 + * @param {number} radius + * @return {Phaser.BitmapData} The BitmapData instance this method was called on. + */ + arcTo: function (x1, y1, x2, y2, radius) { + + this._dirty = true; + this.context.arcTo(x1, y1, x2, y2, radius); + return this; + + }, + + /** + * Begins a fill with the specified color. This ends the current sub-path. + * @method Phaser.BitmapData.beginFill + * @param {string} color - A CSS compatible color value (ex. "red", "#FF0000", or "rgba(255,0,0,0.5)"). Setting to null will result in no fill. + * @return {Phaser.BitmapData} The BitmapData instance this method was called on. + */ + beginFill: function (color) { + + this.fillStyle(color); + + return this; + + }, + + /** + * Begins a linear gradient fill defined by the line (x0, y0) to (x1, y1). This ends the current sub-path. For + * example, the following code defines a black to white vertical gradient ranging from 20px to 120px, and draws a square to display it: + * + * ```myGraphics.beginLinearGradientFill(["#000","#FFF"], [0, 1], 0, 20, 0, 120).rect(20, 20, 120, 120);``` + * + * @method Phaser.BitmapData.beginLinearGradientFill + * @param {Array} colors - An array of CSS compatible color values. For example, ["#F00","#00F"] would define a gradient drawing from red to blue. + * @param {Array} ratios - An array of gradient positions which correspond to the colors. For example, [0.1, 0.9] would draw the first color to 10% then interpolating to the second color at 90%. + * @param {number} x0 - The position of the first point defining the line that defines the gradient direction and size. + * @param {number} y0 - The position of the first point defining the line that defines the gradient direction and size. + * @param {number} x1 - The position of the second point defining the line that defines the gradient direction and size. + * @param {number} y1 - The position of the second point defining the line that defines the gradient direction and size. + * @return {Phaser.BitmapData} The BitmapData instance this method was called on. + */ + beginLinearGradientFill: function (colors, ratios, x0, y0, x1, y1) { + + var gradient = this.createLinearGradient(x0, y0, x1, y1); + + for (var i = 0, len = colors.length; i < len; i++) + { + gradient.addColorStop(ratios[i], colors[i]); + } + + this.fillStyle(gradient); + + return this; + + }, + + /** + * Begins a linear gradient stroke defined by the line (x0, y0) to (x1, y1). This ends the current sub-path. For + * example, the following code defines a black to white vertical gradient ranging from 20px to 120px, and draws a + * square to display it: + * + * ```myGraphics.setStrokeStyle(10).beginLinearGradientStroke(["#000","#FFF"], [0, 1], 0, 20, 0, 120).drawRect(20, 20, 120, 120);``` + * + * @method Phaser.BitmapData.beginLinearGradientStroke + * @param {Array} colors - An array of CSS compatible color values. For example, ["#F00","#00F"] would define a gradient drawing from red to blue. + * @param {Array} ratios - An array of gradient positions which correspond to the colors. For example, [0.1, 0.9] would draw the first color to 10% then interpolating to the second color at 90%. + * @param {number} x0 - The position of the first point defining the line that defines the gradient direction and size. + * @param {number} y0 - The position of the first point defining the line that defines the gradient direction and size. + * @param {number} x1 - The position of the second point defining the line that defines the gradient direction and size. + * @param {number} y1 - The position of the second point defining the line that defines the gradient direction and size. + * @return {Phaser.BitmapData} The BitmapData instance this method was called on. + */ + beginLinearGradientStroke: function (colors, ratios, x0, y0, x1, y1) { + + var gradient = this.createLinearGradient(x0, y0, x1, y1); + + for (var i = 0, len = colors.length; i < len; i++) + { + gradient.addColorStop(ratios[i], colors[i]); + } + + this.strokeStyle(gradient); + + return this; + + }, + + /** + * Begins a radial gradient stroke. This ends the current sub-path. For example, the following code defines a red to + * blue radial gradient centered at (100, 100), with a radius of 50, and draws a rectangle to display it: + * + * myGraphics.setStrokeStyle(10) + * .beginRadialGradientStroke(["#F00","#00F"], [0, 1], 100, 100, 0, 100, 100, 50) + * .drawRect(50, 90, 150, 110); + * + * @method Phaser.BitmapData.beginRadialGradientStroke + * @param {Array} colors - An array of CSS compatible color values. For example, ["#F00","#00F"] would define a gradient drawing from red to blue. + * @param {Array} ratios - An array of gradient positions which correspond to the colors. For example, [0.1, 0.9] would draw the first color to 10% then interpolating to the second color at 90%. + * @param {number} x0 - Center position of the inner circle that defines the gradient. + * @param {number} y0 - Center position of the inner circle that defines the gradient. + * @param {number} r0 - Radius of the inner circle that defines the gradient. + * @param {number} x1 - Center position of the outer circle that defines the gradient. + * @param {number} y1 - Center position of the outer circle that defines the gradient. + * @param {number} r1 - Radius of the outer circle that defines the gradient. + * @return {Phaser.BitmapData} The BitmapData instance this method was called on. + */ + beginRadialGradientStroke: function (colors, ratios, x0, y0, r0, x1, y1, r1) { + + var gradient = this.createRadialGradient(x0, y0, r0, x1, y1, r1); + + for (var i = 0, len = colors.length; i < len; i++) + { + gradient.addColorStop(ratios[i], colors[i]); + } + + this.strokeStyle(gradient); + + return this; + + }, + + /** + * Starts a new path by resetting the list of sub-paths. Call this method when you want to create a new path. + * @method Phaser.BitmapData.beginPath + * @return {Phaser.BitmapData} The BitmapData instance this method was called on. + */ + beginPath: function () { + + this.context.beginPath(); + return this; + + }, + + /** + * Begins a stroke with the specified color. This ends the current sub-path. + * @method Phaser.BitmapData.beginStroke + * @param {String} color A CSS compatible color value (ex. "#FF0000", "red", or "rgba(255,0,0,0.5)"). Setting to null will result in no stroke. + * @return {Phaser.BitmapData} The BitmapData instance this method was called on. + */ + beginStroke: function (color) { + + this.strokeStyle(color); + return this; + + }, + + /** + * Adds a bezier curve from the current context point to (x, y) using the control points (cp1x, cp1y) and (cp2x, cp2y). + * @method Phaser.BitmapData.bezierCurveTo + * @param {number} cp1x - The x axis of control point 1. + * @param {number} cp1y - The y axis of control point 1. + * @param {number} cp2x - The x axis of control point 2. + * @param {number} cp2y - The y axis of control point 2. + * @param {number} x - The x axis of the ending point. + * @param {number} y - The y axis of the ending point. + * @return {Phaser.BitmapData} The BitmapData instance this method was called on. + */ + bezierCurveTo: function (cp1x, cp1y, cp2x, cp2y, x, y) { + + this._dirty = true; + this.context.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y); + return this; + + }, + + /** + * Draws a circle with the specified radius at (x, y). + * @method Phaser.BitmapData.circle + * @param {number} x - x coordinate center point of circle. + * @param {number} y - y coordinate center point of circle. + * @param {number} radius - Radius of circle in radians. + * @return {Phaser.BitmapData} The BitmapData instance this method was called on. + */ + circle: function (x, y, radius) { + + this.arc(x, y, radius, 0, Math.PI*2); + return this; + + }, + + /** + * Sets all pixels in the rectangle defined by starting point (x, y) and size (width, height) to transparent black. + * @method Phaser.BitmapData.clearRect + * @param {number} x - The x axis of the coordinate for the rectangle starting point. + * @param {number} y - The y axis of the coordinate for the rectangle starting point. + * @param {number} width - The rectangles width. + * @param {number} height - The rectangles height. + * @return {Phaser.BitmapData} The BitmapData instance this method was called on. + */ + clearRect: function (x, y, width, height) { + + this._dirty = true; + this.context.clearRect(x, y, width, height); + return this; + + }, + + /** + * Creates a clipping path from the current sub-paths. Everything drawn after clip() is called appears inside the clipping path only. + * @method Phaser.BitmapData.clip + * @return {Phaser.BitmapData} The BitmapData instance this method was called on. + */ + clip: function (x, y, width, height) { + + this._dirty = true; + this.context.clip(); + return this; + + }, + + /** + * Tries to draw a straight line from the current point to the start. If the shape has already been closed or has only one point, this function does nothing. + * @method Phaser.BitmapData.closePath + * @return {Phaser.BitmapData} The BitmapData instance this method was called on. + */ + closePath: function () { + + this._dirty = true; + this.context.closePath(); + return this; + + }, + + /** + * Creates a linear gradient with defined by an imaginary line which implies the direction of the gradient. + * Once the gradient is created colors can be inserted using the addColorStop method. + * @method Phaser.BitmapData.createLinearGradient + * @param {number} x - The x axis of the coordinate for the gradients starting point. + * @param {number} y - The y axis of the coordinate for the gradients starting point. + * @param {number} width - The width of the gradient. + * @param {number} height - The height of the gradient. + * @return {CanvasGradient} The Linear Gradient. + */ + createLinearGradient: function (x, y, width, height) { + + return this.context.createLinearGradient(x, y, width, height); + + }, + + // createPattern + + /** + * Creates a radial gradient. + * @method Phaser.BitmapData.createRadialGradient + * @param {number} x0 + * @param {number} y0 + * @param {number} r0 + * @param {number} x1 + * @param {number} y1 + * @param {number} r1 + * @return {CanvasGradient} The Radial Gradient. + */ + createRadialGradient: function (x, y, width, height) { + + return this.context.createRadialGradient(x0, y0, r0, x1, y1, r1); + + }, + + // drawImage + // drawSystemFocusRing (?) + + /** + * Draws an ellipse (oval) with a specified width (w) and height (h). + * @method Phaser.BitmapData.ellipse + * @param {number} x - x coordinate center point of ellipse. + * @param {number} y - y coordinate center point of ellipse. + * @param {number} w - height (horizontal diameter) of ellipse. The horizontal radius will be half of this number. + * @param {number} h - width (vertical diameter) of ellipse. The vertical radius will be half of this number. + * @return {Phaser.BitmapData} The BitmapData instance this method was called on. + */ + ellipse: function (x, y, w, h) { + + var k = 0.5522848; + var ox = (w / 2) * k; + var oy = (h / 2) * k; + var xe = x + w; + var ye = y + h; + var xm = x + w / 2; + var ym = y + h / 2; + + this.moveTo(x, ym); + this.bezierCurveTo(x, ym - oy, xm - ox, y, xm, y); + this.bezierCurveTo(xm + ox, y, xe, ym - oy, xe, ym); + this.bezierCurveTo(xe, ym + oy, xm + ox, ye, xm, ye); + this.bezierCurveTo(xm - ox, ye, x, ym + oy, x, ym); + + return this; + + }, + + /** + * Fills the subpaths with the current fill style. + * @method Phaser.BitmapData.fill + * @return {Phaser.BitmapData} The BitmapData instance this method was called on. + */ + fill: function () { + + this._dirty = true; + this.context.fill(); + return this; + + }, + + /** + * Draws a filled rectangle at (x, y) position whose size is determined by width and height. + * @method Phaser.BitmapData.fillRect + * @param {number} x - The x axis of the coordinate for the rectangle starting point. + * @param {number} y - The y axis of the coordinate for the rectangle starting point. + * @param {number} width - The rectangles width. + * @param {number} height - The rectangles height. + * @return {Phaser.BitmapData} The BitmapData instance this method was called on. + */ + fillRect: function (x, y, width, height) { + + this._dirty = true; + this.context.fillRect(x, y, width, height); + return this; + + }, + + /** + * Sets the fill style. + * @method Phaser.BitmapData.fillStyle + * @param {string} color - The fill color value in CSS format: #RRGGBB or rgba(r,g,b,a) + * @return {Phaser.BitmapData} The BitmapData instance this method was called on. + */ + fillStyle: function (color) { + + this.context.fillStyle = color; + return this; + + }, + + // fillText + + /** + * Sets the font. + * @method Phaser.BitmapData.font + * @param {DOMString} font - The font to be used for any text rendering. Default value 10px sans-serif. + * @return {Phaser.BitmapData} The BitmapData instance this method was called on. + */ + font: function (font) { + + this.context.font = font; + return this; + + }, + + /** + * Alpha value that is applied to shapes and images before they are composited onto the canvas. Default 1.0 (opaque). + * @method Phaser.BitmapData.globalAlpha + * @param {number} alpha - Alpha value that is applied to shapes and images before they are composited onto the canvas. Default 1.0 (opaque). + * @return {Phaser.BitmapData} The BitmapData instance this method was called on. + */ + globalAlpha: function (alpha) { + + this.context.globalAlpha = alpha; + return this; + + }, + + /** + * With globalAlpha applied this sets how shapes and images are drawn onto the existing bitmap. Possible values: source-atop, source-in, source-out, + * source-over (default), destination-atop, destination-in, destination-out, destination-over, lighter, darker, copy and xor. + * @method Phaser.BitmapData.globalCompositeOperation + * @param {DOMString} operation - The composite operation to apply. + * @return {Phaser.BitmapData} The BitmapData instance this method was called on. + */ + globalCompositeOperation: function (operation) { + + this.context.globalCompositeOperation = operation; + return this; + + }, + + /** + * Type of endings on the end of lines. Possible values: butt (default), round, square. + * @method Phaser.BitmapData.lineCap + * @param {DOMString} style - Possible values: butt (default), round, square + * @return {Phaser.BitmapData} The BitmapData instance this method was called on. + */ + lineCap: function (style) { + + this.context.lineCap = style; + return this; + + }, + + /** + * Specifies where to start a dasharray on a line. + * @method Phaser.BitmapData.lineDashOffset + * @param {number} offset - Specifies where to start a dasharray on a line. + * @return {Phaser.BitmapData} The BitmapData instance this method was called on. + */ + lineDashOffset: function (offset) { + + this.context.lineDashOffset = offset; + return this; + + }, + + /** + * Defines the type of corners where two lines meet. Possible values: round, bevel, miter (default) + * @method Phaser.BitmapData.lineJoin + * @param {DOMString} join - Possible values: round, bevel, miter (default) + * @return {Phaser.BitmapData} The BitmapData instance this method was called on. + */ + lineJoin: function (join) { + + this.context.lineJoin = join; + return this; + + }, + + /** + * Width of lines. Default 1.0 + * @method Phaser.BitmapData.lineWidth + * @param {number} width - Width of lines. Default 1.0 + * @return {Phaser.BitmapData} The BitmapData instance this method was called on. + */ + lineWidth: function (width) { + + this.context.lineWidth = width; + return this; + + }, + + /** + * Default 10. + * @method Phaser.BitmapData.miterLimit + * @param {number} limit - Default 10. + * @return {Phaser.BitmapData} The BitmapData instance this method was called on. + */ + miterLimit: function (limit) { + + this.context.miterLimit = limit; + return this; + + }, + + // getImageData + // getLineDash + // isPointInPath + // isPointInStroke + + /** + * Connects the last point in the subpath to the x, y coordinates with a straight line. + * @method Phaser.BitmapData.lineTo + * @param {number} x - The x axis of the coordinate for the end of the line. + * @param {number} y - The y axis of the coordinate for the end of the line. + * @return {Phaser.BitmapData} The BitmapData instance this method was called on. + */ + lineTo: function (x, y) { + + this._dirty = true; + this.context.lineTo(x, y); + return this; + + }, + + // measureText + + /** + * Moves the starting point of a new subpath to the (x, y) coordinates. + * @method Phaser.BitmapData.moveTo + * @param {number} x - The x axis of the point. + * @param {number} y - The y axis of the point. + * @return {Phaser.BitmapData} The BitmapData instance this method was called on. + */ + moveTo: function (x, y) { + + this.context.moveTo(x, y); + return this; + + }, + + // putImageData + + /** + * Draws a quadratic curve from the current drawing point to (x, y) using the control point (cpx, cpy). + * @method Phaser.BitmapData.quadraticCurveTo + * @param {Number} cpx - The x axis of the control point. + * @param {Number} cpy - The y axis of the control point. + * @param {Number} x - The x axis of the ending point. + * @param {Number} y - The y axis of the ending point. + * @return {Phaser.BitmapData} The BitmapData instance this method was called on. + */ + quadraticCurveTo: function(cpx, cpy, x, y) { + + this._dirty = true; + this.context.quadraticCurveTo(cpx, cpy, x, y); + return this; + + }, + + /** + * Draws a rectangle at (x, y) position whose size is determined by width and height. + * @method Phaser.BitmapData.rect + * @param {number} x - The x axis of the coordinate for the rectangle starting point. + * @param {number} y - The y axis of the coordinate for the rectangle starting point. + * @param {number} width - The rectangles width. + * @param {number} height - The rectangles height. + * @return {Phaser.BitmapData} The BitmapData instance this method was called on. + */ + rect: function (x, y, width, height) { + + this._dirty = true; + this.context.rect(x, y, width, height); + return this; + + }, + + /** + * Restores the drawing style state to the last element on the 'state stack' saved by save(). + * @method Phaser.BitmapData.restore + * @return {Phaser.BitmapData} The BitmapData instance this method was called on. + */ + restore: function () { + + this._dirty = true; + this.context.restore(); + return this; + + }, + + /** + * Rotates the drawing context values by r radians. + * @method Phaser.BitmapData.rotate + * @param {number} angle - The angle of rotation given in radians. + * @return {Phaser.BitmapData} The BitmapData instance this method was called on. + */ + rotate: function (angle) { + + this._dirty = true; + this.context.rotate(angle); + return this; + + }, + + /** + * Sets the stroke style for the current sub-path. Like all drawing methods, this can be chained, so you can define + * the stroke style and color in a single line of code like so: + * + * ```myGraphics.setStrokeStyle(8,"round").beginStroke("#F00");``` + * + * @method Phaser.BitmapData.setStrokeStyle + * @param {number} thickness - The width of the stroke. + * @param {string|number} [caps=0] - Indicates the type of caps to use at the end of lines. One of butt, round, or square. Defaults to "butt". Also accepts the values 0 (butt), 1 (round), and 2 (square) for use with he tiny API. + * @param {string|number} [joints=0] Specifies the type of joints that should be used where two lines meet. One of bevel, round, or miter. Defaults to "miter". Also accepts the values 0 (miter), 1 (round), and 2 (bevel) for use with the tiny API. + * @param {number} [miterLimit=10] - If joints is set to "miter", then you can specify a miter limit ratio which controls at what point a mitered joint will be clipped. + * @param {boolean} [ignoreScale=false] - If true, the stroke will be drawn at the specified thickness regardless of active transformations. + * @return {Phaser.BitmapData} The BitmapData instance this method was called on. + */ + setStrokeStyle: function (thickness, caps, joints, miterLimit, ignoreScale) { + + if (typeof thickness === 'undefined') { thickness = 1; } + if (typeof caps === 'undefined') { caps = 'butt'; } + if (typeof joints === 'undefined') { joints = 'miter'; } + if (typeof miterLimit === 'undefined') { miterLimit = 10; } + + this.lineWidth(thickness); + this.lineCap(caps); + this.lineJoin(joints); + this.miterLimit(miterLimit); + + return this; + + }, + + /** + * Saves the current drawing style state using a stack so you can revert any change you make to it using restore(). + * @method Phaser.BitmapData.save + * @return {Phaser.BitmapData} The BitmapData instance this method was called on. + */ + save: function () { + + this._dirty = true; + this.context.save(); + return this; + + }, + + /** + * Scales the current drawing context. + * @method Phaser.BitmapData.scale + * @param {number} x + * @param {number} y + * @return {Phaser.BitmapData} The BitmapData instance this method was called on. + */ + scale: function (x, y) { + + this._dirty = true; + this.context.scale(x, y); + return this; + + }, + + /** + * + * @method Phaser.BitmapData.scrollPathIntoView + * @return {Phaser.BitmapData} The BitmapData instance this method was called on. + */ + scrollPathIntoView: function () { + + this._dirty = true; + this.context.scrollPathIntoView(); + return this; + + }, + + // setLineDash + // setTransform + + /** + * Strokes the subpaths with the current stroke style. + * @method Phaser.BitmapData.stroke + * @return {Phaser.BitmapData} The BitmapData instance this method was called on. + */ + stroke: function () { + + this._dirty = true; + this.context.stroke(); + return this; + + }, + + /** + * Paints a rectangle which has a starting point at (x, y) and has a w width and an h height onto the canvas, using the current stroke style. + * @method Phaser.BitmapData.strokeRect + * @param {number} x - The x axis for the starting point of the rectangle. + * @param {number} y - The y axis for the starting point of the rectangle. + * @param {number} width - The rectangles width. + * @param {number} height - The rectangles height. + * @return {Phaser.BitmapData} The BitmapData instance this method was called on. + */ + strokeRect: function () { + + this._dirty = true; + this.context.strokeRect(x, y, width, height); + return this; + + }, + + /** + * Color or style to use for the lines around shapes. Default #000 (black). + * @method Phaser.BitmapData.strokeStyle + * @param {string} style - Color or style to use for the lines around shapes. Default #000 (black). + * @return {Phaser.BitmapData} The BitmapData instance this method was called on. + */ + strokeStyle: function (style) { + + this.context.strokeStyle = style; + return this; + + }, + + // strokeText + // transform + // translate + + /** + * If the game is running in WebGL this will push the texture up to the GPU if it's dirty. + * This is called automatically if the BitmapData is being used by a Sprite, otherwise you need to remember to call it in your render function. + * @method Phaser.BitmapData.render + */ + render: function () { if (this._dirty) { - // Only needed if running in WebGL, otherwise this array will never get cleared down I don't think! + // Only needed if running in WebGL, otherwise this array will never get cleared down if (this.game.renderType == Phaser.WEBGL) { PIXI.texturesToUpdate.push(this.baseTexture); @@ -263,3 +953,160 @@ Phaser.BitmapData.prototype = { } +// EaselJS Tiny API emulation + +/** +* Shortcut to moveTo. +* @method Phaser.BitmapData.prototype.mt +*/ +Phaser.BitmapData.prototype.mt = Phaser.BitmapData.prototype.moveTo; + +/** +* Shortcut to lineTo. +* @method Phaser.BitmapData.prototype.mt +*/ +Phaser.BitmapData.prototype.lt = Phaser.BitmapData.prototype.lineTo; + +/** +* Shortcut to arcTo. +* @method Phaser.BitmapData.prototype.at +*/ +Phaser.BitmapData.prototype.at = Phaser.BitmapData.prototype.arcTo; + +/** +* Shortcut to bezierCurveTo. +* @method Phaser.BitmapData.prototype.bt +*/ +Phaser.BitmapData.prototype.bt = Phaser.BitmapData.prototype.bezierCurveTo; + +/** +* Shortcut to quadraticCurveTo. +* @method Phaser.BitmapData.prototype.qt +*/ +Phaser.BitmapData.prototype.qt = Phaser.BitmapData.prototype.quadraticCurveTo; + +/** +* Shortcut to arc. +* @method Phaser.BitmapData.prototype.a +*/ +Phaser.BitmapData.prototype.a = Phaser.BitmapData.prototype.arc; + +/** +* Shortcut to rect. +* @method Phaser.BitmapData.prototype.r +*/ +Phaser.BitmapData.prototype.r = Phaser.BitmapData.prototype.rect; + +/** +* Shortcut to closePath. +* @method Phaser.BitmapData.prototype.cp +*/ +Phaser.BitmapData.prototype.cp = Phaser.BitmapData.prototype.closePath; + +/** +* Shortcut to clear. +* @method Phaser.BitmapData.prototype.c +*/ +Phaser.BitmapData.prototype.c = Phaser.BitmapData.prototype.clear; + +/** +* Shortcut to beginFill. +* @method Phaser.BitmapData.prototype.f +*/ +Phaser.BitmapData.prototype.f = Phaser.BitmapData.prototype.beginFill; + +/** +* Shortcut to beginLinearGradientFill. +* @method Phaser.BitmapData.prototype.lf +*/ +Phaser.BitmapData.prototype.lf = Phaser.BitmapData.prototype.beginLinearGradientFill; + +/** +* Shortcut to beginRadialGradientFill. +* @method Phaser.BitmapData.prototype.rf +*/ +Phaser.BitmapData.prototype.rf = Phaser.BitmapData.prototype.beginRadialGradientFill; + +/** +* Shortcut to beginBitmapFill. +* @method Phaser.BitmapData.prototype.bf +*/ +//Phaser.BitmapData.prototype.bf = Phaser.BitmapData.prototype.beginBitmapFill; + +/** +* Shortcut to endFill. +* @method Phaser.BitmapData.prototype.ef +*/ +Phaser.BitmapData.prototype.ef = Phaser.BitmapData.prototype.endFill; + +/** +* Shortcut to setStrokeStyle. +* @method Phaser.BitmapData.prototype.ss +*/ +Phaser.BitmapData.prototype.ss = Phaser.BitmapData.prototype.setStrokeStyle; + +/** +* Shortcut to beginStroke. +* @method Phaser.BitmapData.prototype.s +*/ +Phaser.BitmapData.prototype.s = Phaser.BitmapData.prototype.beginStroke; + +/** +* Shortcut to beginLinearGradientStroke. +* @method Phaser.BitmapData.prototype.ls +*/ +Phaser.BitmapData.prototype.ls = Phaser.BitmapData.prototype.beginLinearGradientStroke; + +/** +* Shortcut to beginRadialGradientStroke. +* @method Phaser.BitmapData.prototype.rs +*/ +Phaser.BitmapData.prototype.rs = Phaser.BitmapData.prototype.beginRadialGradientStroke; + +/** +* Shortcut to beginBitmapStroke. +* @method Phaser.BitmapData.prototype.bs +*/ +// Phaser.BitmapData.prototype.bs = Phaser.BitmapData.prototype.beginBitmapStroke; + +/** +* Shortcut to endStroke. +* @method Phaser.BitmapData.prototype.es +*/ +// Phaser.BitmapData.prototype.es = Phaser.BitmapData.prototype.endStroke; + +/** +* Shortcut to rect. +* @method Phaser.BitmapData.prototype.dr +*/ +Phaser.BitmapData.prototype.dr = Phaser.BitmapData.prototype.rect; + +/** +* Shortcut to drawRoundRect. +* @method Phaser.BitmapData.prototype.rr +*/ +// Phaser.BitmapData.prototype.rr = Phaser.BitmapData.prototype.drawRoundRect; + +/** +* Shortcut to drawRoundRectComplex. +* @method Phaser.BitmapData.prototype.rc +*/ +// Phaser.BitmapData.prototype.rc = Phaser.BitmapData.prototype.drawRoundRectComplex; + +/** +* Shortcut to drawCircle. +* @method Phaser.BitmapData.prototype.dc +*/ +Phaser.BitmapData.prototype.dc = Phaser.BitmapData.prototype.circle; + +/** +* Shortcut to drawEllipse. +* @method Phaser.BitmapData.prototype.de +*/ +Phaser.BitmapData.prototype.de = Phaser.BitmapData.prototype.ellipse; + +/** +* Shortcut to drawPolyStar. +* @method Phaser.BitmapData.prototype.dp +*/ +// Phaser.BitmapData.prototype.dp = Phaser.BitmapData.prototype.drawPolyStar; diff --git a/src/gameobjects/GameObjectFactory.js b/src/gameobjects/GameObjectFactory.js index 18f187e7..0b91e0f3 100644 --- a/src/gameobjects/GameObjectFactory.js +++ b/src/gameobjects/GameObjectFactory.js @@ -280,18 +280,13 @@ Phaser.GameObjectFactory.prototype = { * A BitmapData object which can be manipulated and drawn to like a traditional Canvas object and used to texture Sprites. * * @method Phaser.GameObjectFactory#bitmapData - * @param {string} [key] - A key the BitmapData will use when added to the Phaser.Cache. If none is given a UUID is generated. * @param {number} [width=256] - The width of the BitmapData in pixels. * @param {number} [height=256] - The height of the BitmapData in pixels. * @return {Phaser.BitmapData} The newly created BitmapData object. */ - bitmapData: function (key, width, height) { + bitmapData: function (width, height) { - // var bmd = new Phaser.BitmapData(this.game, key, width, height); - - // return this.game.cache.addBitmapData(bmd.name, bmd); - - return this.world.add(new Phaser.BitmapData(this.game, x, y, width, height, tileset, tilemap, layer)); + return new Phaser.BitmapData(this.game, width, height); } diff --git a/src/gameobjects/Sprite.js b/src/gameobjects/Sprite.js index 30c324a1..7b2d9b8f 100644 --- a/src/gameobjects/Sprite.js +++ b/src/gameobjects/Sprite.js @@ -636,6 +636,11 @@ Phaser.Sprite.prototype.resetCrop = function() { */ Phaser.Sprite.prototype.postUpdate = function() { + if (this.key instanceof Phaser.BitmapData && this.key._dirty) + { + this.key.render(); + } + if (this.exists) { // The sprite is positioned in this call, after taking into consideration motion updates and collision @@ -669,7 +674,7 @@ Phaser.Sprite.prototype.postUpdate = function() { * * @method Phaser.Sprite#loadTexture * @memberof Phaser.Sprite -* @param {string|Phaser.RenderTexture|PIXI.Texture} key - This is the image or texture used by the Sprite during rendering. It can be a string which is a reference to the Cache entry, or an instance of a RenderTexture or PIXI.Texture. +* @param {string|Phaser.RenderTexture|Phaser.BitmapData|PIXI.Texture} key - This is the image or texture used by the Sprite during rendering. It can be a string which is a reference to the Cache entry, or an instance of a RenderTexture, BitmapData or PIXI.Texture. * @param {string|number} frame - If this Sprite is using part of a sprite sheet or texture atlas you can specify the exact frame to use by giving a string or numeric index. */ Phaser.Sprite.prototype.loadTexture = function (key, frame) { @@ -680,6 +685,11 @@ Phaser.Sprite.prototype.loadTexture = function (key, frame) { { this.currentFrame = this.game.cache.getTextureFrame(key.name); } + else if (key instanceof Phaser.BitmapData) + { + this.setTexture(key.texture); + this.currentFrame = key.textureFrame; + } else if (key instanceof PIXI.Texture) { this.currentFrame = frame; diff --git a/src/utils/Color.js b/src/utils/Color.js index c7356dfc..fd0809a4 100644 --- a/src/utils/Color.js +++ b/src/utils/Color.js @@ -15,6 +15,7 @@ Phaser.Color = { * Given an alpha and 3 color values this will return an integer representation of it. * * @method Phaser.Color.getColor32 + * @static * @param {number} alpha - The Alpha value (between 0 and 255). * @param {number} red - The Red channel value (between 0 and 255). * @param {number} green - The Green channel value (between 0 and 255). @@ -29,6 +30,7 @@ Phaser.Color = { * Given 3 color values this will return an integer representation of it. * * @method Phaser.Color.getColor + * @static * @param {number} red - The Red channel value (between 0 and 255). * @param {number} green - The Green channel value (between 0 and 255). * @param {number} blue - The Blue channel value (between 0 and 255). @@ -39,17 +41,19 @@ Phaser.Color = { }, /** - * Converts the given hex string into an object containing the RGB values. + * Converts the given hex string into an integer color value. * * @method Phaser.Color.hexToRGB + * @static * @param {string} h - The string hex color to convert. - * @returns {object} An object with 3 properties: r,g and b. + * @returns {number} The rgb color value. */ hexToRGB: function (h) { var hex16 = (h.charAt(0) == "#") ? h.substring(1, 7) : h; - if (hex16.length==3) { + if (hex16.length==3) + { hex16 = hex16.charAt(0) + hex16.charAt(0) + hex16.charAt(1) + hex16.charAt(1) + hex16.charAt(2) + hex16.charAt(2); } @@ -66,6 +70,7 @@ Phaser.Color = { * RGB format information and HSL information. Each section starts on a newline, 3 lines in total. * * @method Phaser.Color.getColorInfo + * @static * @param {number} color - A color value in the format 0xAARRGGBB. * @returns {string} String containing the 3 lines of information. */ @@ -91,6 +96,7 @@ Phaser.Color = { * Return a string representation of the color in the format 0xAARRGGBB. * * @method Phaser.Color.RGBtoHexstring + * @static * @param {number} color - The color to get the string representation for * @returns {string} A string of length 10 characters in the format 0xAARRGGBB */ @@ -106,6 +112,7 @@ Phaser.Color = { * Return a string representation of the color in the format #RRGGBB. * * @method Phaser.Color.RGBtoWebstring + * @static * @param {number} color - The color to get the string representation for. * @returns {string} A string of length 10 characters in the format 0xAARRGGBB. */ @@ -121,6 +128,7 @@ Phaser.Color = { * Return a string containing a hex representation of the given color. * * @method Phaser.Color.colorToHexstring + * @static * @param {number} color - 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, 0 = 00. */ @@ -137,11 +145,12 @@ Phaser.Color = { /** * Interpolates the two given colours based on the supplied step and currentStep properties. * @method Phaser.Color.interpolateColor - * @param {number} color1 - Description. - * @param {number} color2 - Description. - * @param {number} steps - Description. - * @param {number} currentStep - Description. - * @param {number} alpha - Description. + * @static + * @param {number} color1 - The first color value. + * @param {number} color2 - The second color value. + * @param {number} steps - The number of steps to run the interpolation over. + * @param {number} currentStep - The currentStep value. If the interpolation will take 100 steps, a currentStep value of 50 would be half-way between the two. + * @param {number} alpha - The alpha of the returned color. * @returns {number} The interpolated color value. */ interpolateColor: function (color1, color2, steps, currentStep, alpha) { @@ -161,12 +170,13 @@ Phaser.Color = { /** * Interpolates the two given colours based on the supplied step and currentStep properties. * @method Phaser.Color.interpolateColorWithRGB - * @param {number} color - Description. - * @param {number} r - Description. - * @param {number} g - Description. - * @param {number} b - Description. - * @param {number} steps - Description. - * @param {number} currentStep - Description. + * @static + * @param {number} color - The first color value. + * @param {number} r - The red color value, between 0 and 0xFF (255). + * @param {number} g - The green color value, between 0 and 0xFF (255). + * @param {number} b - The blue color value, between 0 and 0xFF (255). + * @param {number} steps - The number of steps to run the interpolation over. + * @param {number} currentStep - 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. */ interpolateColorWithRGB: function (color, r, g, b, steps, currentStep) { @@ -183,14 +193,15 @@ Phaser.Color = { /** * Interpolates the two given colours based on the supplied step and currentStep properties. * @method Phaser.Color.interpolateRGB - * @param {number} r1 - Description. - * @param {number} g1 - Description. - * @param {number} b1 - Description. - * @param {number} r2 - Description. - * @param {number} g2 - Description. - * @param {number} b2 - Description. - * @param {number} steps - Description. - * @param {number} currentStep - Description. + * @static + * @param {number} r1 - The red color value, between 0 and 0xFF (255). + * @param {number} g1 - The green color value, between 0 and 0xFF (255). + * @param {number} b1 - The blue color value, between 0 and 0xFF (255). + * @param {number} r2 - The red color value, between 0 and 0xFF (255). + * @param {number} g2 - The green color value, between 0 and 0xFF (255). + * @param {number} b2 - The blue color value, between 0 and 0xFF (255). + * @param {number} steps - The number of steps to run the interpolation over. + * @param {number} currentStep - 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. */ interpolateRGB: function (r1, g1, b1, r2, g2, b2, steps, currentStep) { @@ -205,10 +216,11 @@ Phaser.Color = { /** * 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

+ * Set the min value to start each channel from the given offset. + * Set the max value to restrict the maximum color used per channel. * * @method Phaser.Color.getRandomColor + * @static * @param {number} min - The lowest value to use for the color. * @param {number} max - The highest value to use for the color. * @param {number} alpha - The alpha value of the returning color (default 255 = fully opaque). @@ -240,9 +252,10 @@ Phaser.Color = { /** * 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)

+ * 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). * @returns {object} An Object with properties: alpha, red, green, blue. */ @@ -260,6 +273,7 @@ Phaser.Color = { /** * Returns a CSS friendly string value from the given color. * @method Phaser.Color.getWebRGB + * @static * @param {number} color * @returns {string}A string in the format: 'rgba(r,g,b,a)' */ @@ -278,6 +292,7 @@ Phaser.Color = { * Given a native color value (in the format 0xAARRGGBB) this will return the Alpha component, as a value between 0 and 255. * * @method Phaser.Color.getAlpha + * @static * @param {number} color - 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)). */ @@ -289,6 +304,7 @@ Phaser.Color = { * Given a native color value (in the format 0xAARRGGBB) this will return the Alpha component as a value between 0 and 1. * * @method Phaser.Color.getAlphaFloat + * @static * @param {number} color - 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)). */ @@ -300,6 +316,7 @@ Phaser.Color = { * Given a native color value (in the format 0xAARRGGBB) this will return the Red component, as a value between 0 and 255. * * @method Phaser.Color.getRed + * @static * @param {number} color 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). */ @@ -311,6 +328,7 @@ Phaser.Color = { * Given a native color value (in the format 0xAARRGGBB) this will return the Green component, as a value between 0 and 255. * * @method Phaser.Color.getGreen + * @static * @param {number} color - 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). */ @@ -322,6 +340,7 @@ Phaser.Color = { * Given a native color value (in the format 0xAARRGGBB) this will return the Blue component, as a value between 0 and 255. * * @method Phaser.Color.getBlue + * @static * @param {number} color - 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). */