From 418a161b462ac199c639db4aa70e69bd9c8ef13c Mon Sep 17 00:00:00 2001 From: photonstorm Date: Sun, 2 Mar 2014 20:51:44 +0000 Subject: [PATCH] Testing webgl debug overlay. --- examples/wip/debug.js | 37 ++++++++++++++++++++++++ src/gameobjects/BitmapData.js | 4 +-- src/tilemap/TilemapLayer.js | 1 - src/utils/Debug.js | 54 +++++++++++++++++++++++++++++++++-- 4 files changed, 91 insertions(+), 5 deletions(-) create mode 100644 examples/wip/debug.js diff --git a/examples/wip/debug.js b/examples/wip/debug.js new file mode 100644 index 00000000..bd4cdd5c --- /dev/null +++ b/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); + +} diff --git a/src/gameobjects/BitmapData.js b/src/gameobjects/BitmapData.js index 64ed49a3..eeec03ff 100644 --- a/src/gameobjects/BitmapData.js +++ b/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; diff --git a/src/tilemap/TilemapLayer.js b/src/tilemap/TilemapLayer.js index dc6e7fc7..ad7ef6a1 100644 --- a/src/tilemap/TilemapLayer.js +++ b/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); diff --git a/src/utils/Debug.js b/src/utils/Debug.js index 8ba6da7a..fd301403 100644 --- a/src/utils/Debug.js +++ b/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); + } + }, /**