Expanding BitmapData

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)
 
 

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);
 
 }
 

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() {
+
+
+}

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);
 
     }
 

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;

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
-    * <p>Set the min value to start each channel from the given offset.</p>
-    * <p>Set the max value to restrict the maximum color used per channel</p>
+    * 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
     *
-    * <p>Alpha will only be set if it exist in the given color (0xAARRGGBB)</p>
+    * 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).
     */