Testing webgl debug overlay.

Author: photonstorm

examples/wip/debug.js

@@ -0,0 +1,37 @@
+
+var game = new Phaser.Game(800, 600, Phaser.AUTO, 'phaser-example', { preload: preload, create: create, update: update, render: render });
+
+var tilesprite;
+var cursors;
+var count = 0;
+
+function preload() {
+
+    game.load.image('starfield', 'assets/misc/starfield.jpg');
+    game.load.spritesheet('mummy', 'assets/sprites/metalslug_mummy37x45.png', 37, 45, 18);
+    game.load.atlas('seacreatures', 'assets/sprites/seacreatures_json.png', 'assets/sprites/seacreatures_json.json');
+
+}
+
+var sprite;
+
+function create() {
+
+    sprite = game.add.tileSprite(0, 0, 800, 600, 'starfield');
+    sprite.autoScroll(0, 200);
+
+    game.add.image(200, 200, 'mummy');
+
+    game.world.scale.set(2);
+
+}
+
+function update() {
+
+}
+
+function render() {
+
+    game.debug.renderText(sprite.frame, 32, 32);
+
+}

src/gameobjects/BitmapData.js

@@ -152,7 +152,6 @@ Phaser.BitmapData.prototype = {
 
         if (width !== this.width || height !== this.height)
         {
-            console.log('bmd resize', width, height);
             this.width = width;
             this.height = height;
             this.canvas.width = width;
@@ -367,7 +366,8 @@ Phaser.BitmapData.prototype = {
             //  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);
+                //  should use the rendersession
+                PIXI.updateWebGLTexture(this.baseTexture, this.game.renderer.gl);
             }
 
             this._dirty = false;

src/tilemap/TilemapLayer.js

@@ -666,7 +666,6 @@ Phaser.TilemapLayer.prototype.render = function () {
         this.renderDebug();
     }
 
-    //  Only needed if running in WebGL, otherwise this array will never get cleared down I don't think!
     if (this.game.renderType === Phaser.WEBGL)
     {
         // PIXI.updateWebGLTexture(this.baseTexture, renderSession.gl);        

src/utils/Debug.js

@@ -20,9 +20,34 @@ Phaser.Utils.Debug = function (game) {
     this.game = game;
 
     /**
-    * @property {Context} context - The canvas context on which to render the debug information.
+    * @property {PIXI.Sprite} sprite - If debugging in WebGL mode we need this.
     */
-    this.context = game.context;
+    this.sprite = null;
+
+    /**
+    * @property {HTMLCanvasElement} canvas - The canvas to which this BitmapData draws.
+    */
+    this.canvas = null;
+
+    /**
+    * @property {PIXI.BaseTexture} baseTexture - Required Pixi var.
+    */
+    this.baseTexture = null;
+    
+    /**
+    * @property {PIXI.Texture} texture - Required Pixi var.
+    */
+    this.texture = null;
+
+    /**
+    * @property {Phaser.Frame} textureFrame - Dimensions of the renderable area.
+    */
+    this.textureFrame = null;
+
+    /**
+    * @property {CanvasRenderingContext2D} context - The 2d context of the canvas.
+    */
+    this.context = null;
 
     /**
     * @property {string} font - The font that the debug information is rendered in.
@@ -63,6 +88,24 @@ Phaser.Utils.Debug = function (game) {
     */
     this.currentAlpha = 1;
 
+    if (this.game.renderType === Phaser.CANVAS)
+    {
+        this.context = this.game.context;
+    }
+    else
+    {
+        this.canvas = Phaser.Canvas.create(this.game.width, this.game.height, '', true);
+        this.context = this.canvas.getContext('2d');
+        this.context.fillStyle = '#ff0000';
+        this.context.fillRect(0,0,400,400);
+        this.baseTexture = new PIXI.BaseTexture(this.canvas);
+        this.texture = new PIXI.Texture(this.baseTexture);
+        this.textureFrame = new Phaser.Frame(0, 0, 0, this.game.width, this.game.height, 'debug', game.rnd.uuid());
+        this.sprite = this.game.make.image(0, 0, this.texture, this.textureFrame);
+
+        this.game.stage.addChild(this.sprite);
+    }
+
 };
 
 Phaser.Utils.Debug.prototype = {
@@ -111,6 +154,13 @@ Phaser.Utils.Debug.prototype = {
         this.context.restore();
         this.context.globalAlpha = this.currentAlpha;
 
+        if (this.sprite)
+        {
+            this.context.fillStyle = '#ff0000';
+            this.context.fillRect(0,0,400,400);
+            PIXI.updateWebGLTexture(this.baseTexture, this.game.renderer.gl);
+        }
+
     },
 
     /**