FrameDebugger now hooked into Canvas Renderer. Better output coming.

src/core/FrameDebugger.js

@@ -33,12 +33,14 @@ Phaser.FrameDebugger = function (game) {
 
 Phaser.FrameDebugger.prototype = {
 
+    //  Called at the start of Game.updateRender
     start: function () {
 
         this.frame = [Date.now()];
 
     },
 
+    //  Called at the end of Game.updateRender
     stop: function () {
 
         this.frame.push(Date.now());
@@ -54,13 +56,33 @@ Phaser.FrameDebugger.prototype = {
 
     },
 
-    finish: function () {
+    cr: function () {
 
-        this.on = false;
+        this.frame.push('Canvas.Render');
 
-        console.log(this.log);
+    },
 
-        debugger;
+    cb: function (mode) {
+
+        this.frame.push('Set Blend Mode', mode);
+
+    },
+
+    cs: function (texture, width, height, res) {
+
+        this.frame.push('Sprite.Render', texture, width, height, res);
+
+    },
+
+    cm: function (mask) {
+
+        this.frame.push('Mask Push', mask);
+
+    },
+
+    cmo: function () {
+
+        this.frame.push('Mask Pop', Date.now());
 
     },
 
@@ -84,6 +106,49 @@ Phaser.FrameDebugger.prototype = {
         this.count = 0;
         this.max = 1;
 
+    },
+
+    //  Called at the end of Game.updateRender if count = max
+    finish: function () {
+
+        this.on = false;
+
+        this.win = window.open('about:blank', 'FrameDebugger');
+
+        //  Add a title and a little css
+        this.win.document.title = 'FrameDebugger Output';
+
+        var head = this.win.document.head.style;
+
+        head.backgroundColor = '#383838';
+        head.fontFamily = 'sans';
+        head.fontSize = '14px';
+        head.color = '#b4b4b4';
+
+        var body = this.win.document.body;
+
+        var h1 = document.createElement('h1');
+        h1.textContent = 'FrameDebugger Output';
+
+        body.appendChild(h1);
+
+        for (var f = 0; f < this.log.length; f++)
+        {
+            var h = document.createElement('p');
+            h.textContent = "Frame " + f;
+            body.appendChild(h);
+
+            for (var i = 0; i < this.log[f].length; i++)
+            {
+                var t = document.createElement('p');
+                t.textContent = this.log[f][i];
+                body.appendChild(t);
+            }
+        }
+
+        // console.log(this.log);
+        // debugger;
+
     }
 
 };

src/pixi/display/Sprite.js

@@ -364,7 +364,7 @@ PIXI.Sprite.prototype._renderWebGL = function(renderSession, matrix)
 PIXI.Sprite.prototype._renderCanvas = function(renderSession, matrix)
 {
     // If the sprite is not visible or the alpha is 0 then no need to render this element
-    if (this.visible === false || this.alpha === 0 || this.renderable === false || this.texture.crop.width <= 0 || this.texture.crop.height <= 0)
+    if (!this.visible || this.alpha === 0 || !this.renderable || this.texture.crop.width <= 0 || this.texture.crop.height <= 0)
     {
         return;
     }
@@ -381,6 +381,8 @@ PIXI.Sprite.prototype._renderCanvas = function(renderSession, matrix)
     {
         renderSession.currentBlendMode = this.blendMode;
         renderSession.context.globalCompositeOperation = PIXI.blendModesCanvas[renderSession.currentBlendMode];
+
+        if (renderSession.fd.on) { renderSession.fd.cb(this.blendMode); }
     }
 
     if (this._mask)
@@ -441,6 +443,11 @@ PIXI.Sprite.prototype._renderCanvas = function(renderSession, matrix)
             var cy = this.texture.crop.y;
             renderSession.context.drawImage(this.texture.baseTexture.source, cx, cy, cw, ch, dx, dy, cw / resolution, ch / resolution);
         }
+
+        // console.log(this.texture.baseTexture.resolution, renderSession.resolution, resolution);
+        // debugger;
+
+        if (renderSession.fd.on) { renderSession.fd.cs(this.texture, cw, ch, resolution); }
     }
 
     for (var i = 0; i < this.children.length; i++)

src/pixi/renderers/canvas/CanvasRenderer.js

@@ -132,6 +132,7 @@ PIXI.CanvasRenderer = function (game) {
      * @type Object
      */
     this.renderSession = {
+        fd: this.game.fd,
         context: this.context,
         maskManager: this.maskManager,
         scaleMode: null,
@@ -159,16 +160,21 @@ PIXI.CanvasRenderer.prototype.constructor = PIXI.CanvasRenderer;
  * @method render
  * @param stage {Stage} the Stage element to be rendered
  */
-PIXI.CanvasRenderer.prototype.render = function(stage)
-{
+PIXI.CanvasRenderer.prototype.render = function (stage) {
+
+    if (this.game.fd.on)
+    {
+        this.game.fd.cr();
+    }
+
     stage.updateTransform();
 
     this.context.setTransform(1, 0, 0, 1, 0, 0);
 
     this.context.globalAlpha = 1;
 
-    this.renderSession.currentBlendMode = PIXI.blendModes.NORMAL;
-    this.context.globalCompositeOperation = PIXI.blendModesCanvas[PIXI.blendModes.NORMAL];
+    this.renderSession.currentBlendMode = 0;
+    this.context.globalCompositeOperation = 'source-over';
 
     if (navigator.isCocoonJS && this.view.screencanvas)
     {
@@ -246,11 +252,12 @@ PIXI.CanvasRenderer.prototype.resize = function(width, height)
  * @param [matrix] {Matrix} Optional matrix to apply to the display object before rendering.
  * @private
  */
-PIXI.CanvasRenderer.prototype.renderDisplayObject = function(displayObject, context, matrix)
-{
+PIXI.CanvasRenderer.prototype.renderDisplayObject = function (displayObject, context, matrix) {
+
     this.renderSession.context = context || this.context;
     this.renderSession.resolution = this.resolution;
     displayObject._renderCanvas(this.renderSession, matrix);
+
 };
 
 /**

src/pixi/renderers/canvas/utils/CanvasMaskManager.js

@@ -21,8 +21,10 @@ PIXI.CanvasMaskManager.prototype.constructor = PIXI.CanvasMaskManager;
  * @param maskData {Object} the maskData that will be pushed
  * @param renderSession {Object} The renderSession whose context will be used for this mask manager.
  */
-PIXI.CanvasMaskManager.prototype.pushMask = function(maskData, renderSession)
-{
+PIXI.CanvasMaskManager.prototype.pushMask = function(maskData, renderSession) {
+
+    if (renderSession.fd.on) { renderSession.fd.cm(maskData); }
+
 	var context = renderSession.context;
 
     context.save();
@@ -55,4 +57,6 @@ PIXI.CanvasMaskManager.prototype.pushMask = function(maskData, renderSession)
 PIXI.CanvasMaskManager.prototype.popMask = function(renderSession)
 {
     renderSession.context.restore();
+
+    if (renderSession.fd.on) { renderSession.fd.cmo(); }
 };