BitmapData.generateTexture will take a snapshot of the BitmapDatas canvas at that moment in time and convert it into an Image, which is then stored in the Phaser image Cache based on the key given. You can then use the new texture for any future sprites or texture based objects.

Author: photonstorm

README.md

@@ -329,6 +329,7 @@ Version 2.4 - "Katar" - in dev
 * BitmapData.moveV(distance) allows you to vertically shift the BitmapData with wrap-around the edges.
 * Text.addStrokeColor works in the same way as `Text.addColor` but allows you to define a color stop for the stroke color instead of the fill color.
 * All Game Objects have a new boolean property called `pendingDestroy`. If you set this to `true` then the object will automatically destroy itself in the *next* logic update, rather than immediately. This is useful for cases when you wish to destroy an object from within one of its own callbacks, such as with buttons or other input events (thanks @alamboley #1748)
+* BitmapData.generateTexture will take a snapshot of the BitmapDatas canvas at that moment in time and convert it into an Image, which is then stored in the Phaser image Cache based on the key given. You can then use the new texture for any future sprites or texture based objects.
 
 ### Updates
 

src/gameobjects/BitmapData.js

@@ -215,14 +215,6 @@ Phaser.BitmapData = function (game, key, width, height) {
     */
     this._swapCanvas = Phaser.Canvas.create(width, height, '', true);
 
-    // http://androidarts.com/palette/16pal.htm
-
-    this.palettes = {
-        'arne': { 0: '#000000', 1: '#9D9D9D', 2: '#FFFFFF', 3: '#BE2633', 4: '#E06F8B', 5: '#493C2B', 6: '#A46422', 7: '#EB8931', 8: '#F7E26B', 9: '#2F484E', A: '#44891A', B: '#A3CE27', C: '#1B2632', D: '#005784', E: '#31A2F2', F: '#B2DCEF' },
-        'jmp': { 0: '#000000', 1: '#191028', 2: '#46af45', 3: '#a1d685', 4: '#453e78', 5: '#7664fe', 6: '#833129', 7: '#9ec2e8', 8: '#dc534b', 9: '#e18d79', A: '#d6b97b', B: '#e9d8a1', C: '#216c4b', D: '#d365c8', E: '#afaab9', F: '#f5f4eb' },
-        'cga': { 0: '#000000', 1: '#2234d1', 2: '#0c7e45', 3: '#44aacc', 4: '#8a3622', 5: '#5c2e78', 6: '#aa5c3d', 7: '#b5b5b5', 8: '#5e606e', 9: '#4c81fb', A: '#6cd947', B: '#7be2f9', C: '#eb8a60', D: '#e23d69', E: '#ffd93f', F: '#fffff' }
-    };
-
 };
 
 Phaser.BitmapData.prototype = {
@@ -351,53 +343,9 @@ Phaser.BitmapData.prototype = {
 
     },
 
-    grid: function (w, h, color) {
-
-        this.context.fillStyle = color;
-
-        for (var y = 0; y < this.height; y += h)
-        {
-            this.context.fillRect(0, y, this.width, 1);
-        }
-
-        for (var x = 0; x < this.width; x += w)
-        {
-            this.context.fillRect(x, 0, 1, this.height);
-        }
-
-    },
-
-    generate: function (data, palette, size) {
-
-        if (typeof palette === 'undefined') { palette = 'arne'; }
-        if (typeof size === 'undefined') { size = 8; }
-
-        var w = data[0].length * size;
-        var h = data.length * size;
-
-        this.resize(w, h);
-
-        //  Draw it
-        for (var y = 0; y < data.length; y++)
-        {
-            var row = data[y];
-
-            for (var x = 0; x < row.length; x++)
-            {
-                var d = row[x];
-
-                if (d !== '.' && d !== ' ')
-                {
-                    this.context.fillStyle = this.palettes[palette][d];
-                    this.context.fillRect(x * size, y * size, size, size);
-                }
-            }
-        }
-
-    },
-
     /**
-    * Updates the given objects so that they use this BitmapData as their texture. This will replace any texture they will currently have set.
+    * Updates the given objects so that they use this BitmapData as their texture.
+    * This will replace any texture they will currently have set.
     *
     * @method Phaser.BitmapData#add
     * @param {Phaser.Sprite|Phaser.Sprite[]|Phaser.Image|Phaser.Image[]} object - Either a single Sprite/Image or an Array of Sprites/Images.
@@ -503,6 +451,42 @@ Phaser.BitmapData.prototype = {
 
     },
 
+    /**
+    * Creates a new Image element by converting this BitmapDatas canvas into a dataURL.
+    *
+    * The image is then stored in the Cache using the key given.
+    *
+    * Finally a PIXI.Texture is created based on the image and returned.
+    *
+    * You can apply the texture to a sprite or any other supporting object by using either the
+    * key or the texture. First call generateTexture:
+    *
+    * `var texture = bitmapdata.generateTexture('ball');`
+    *
+    * Then you can either apply the texture to a sprite:
+    * 
+    * `game.add.sprite(0, 0, texture);`
+    *
+    * or by using the string based key:
+    *
+    * `game.add.sprite(0, 0, 'ball');`
+    *
+    * @method Phaser.BitmapData#generateTexture
+    * @param {string} key - The key which will be used to store the image in the Cache.
+    * @return {PIXI.Texture} The newly generated texture.
+    */
+    generateTexture: function (key) {
+
+        var image = new Image();
+
+        image.src = this.canvas.toDataURL("image/png");
+
+        this.game.cache.addImage(key, '', image);
+
+        return new PIXI.Texture(PIXI.BaseTextureCache[key]);
+
+    },
+
     /**
     * Resizes the BitmapData. This changes the size of the underlying canvas and refreshes the buffer.
     *

src/loader/Cache.js

@@ -535,12 +535,11 @@ Phaser.Cache.prototype = {
 
         this._images[key] = { url: url, data: data };
 
-        this._images[key].frame = new Phaser.Frame(0, 0, 0, data.width, data.height, key, this.game.rnd.uuid());
+        this._images[key].frame = new Phaser.Frame(0, 0, 0, data.width, data.height, key);
         this._images[key].frameData = new Phaser.FrameData();
-        this._images[key].frameData.addFrame(new Phaser.Frame(0, 0, 0, data.width, data.height, url, this.game.rnd.uuid()));
+        this._images[key].frameData.addFrame(new Phaser.Frame(0, 0, 0, data.width, data.height, url));
 
         PIXI.BaseTextureCache[key] = new PIXI.BaseTexture(data);
-        // PIXI.TextureCache[key] = new PIXI.Texture(PIXI.BaseTextureCache[key]);
 
         this._resolveURL(url, this._images[key]);
 

typescript/phaser.d.ts

@@ -253,6 +253,7 @@ declare module Phaser {
         drawGroup(group: Phaser.Group, blendMode?: number, roundPx?: boolean): Phaser.BitmapData;
         extract(destination: Phaser.BitmapData, r: number, g: number, b: number, a?: number, resize?: boolean, r2?: number, g2?: number, b2?: number): Phaser.BitmapData;
         fill(r: number, g: number, b: number, a?: number): Phaser.BitmapData;
+        generateTexture(key: string): PIXI.Texture;
         getBounds(rect?: Phaser.Rectangle): Phaser.Rectangle;
         getFirstPixel(direction: number): { r: number; g: number; b: number; x: number; y: number; };
         getPixel(x: number, y: number, out?: any): number;