Blitter Bobs can now have alpha and visible of their own.

Blitter now filters children down to a render list if dirty.
CanvasRenderer resets alpha in postRender.

Author: photonstorm

v3/src/checksum.js

@@ -1,4 +1,4 @@
 var CHECKSUM = {
-build: '1ab7d5b0-f236-11e6-867a-17ae0be84b32'
+build: '08a92a10-f248-11e6-9a33-b97a01ee41c2'
 };
 module.exports = CHECKSUM;

v3/src/components/Children.js

@@ -693,7 +693,7 @@ Object.defineProperties(Children.prototype, {
     },
 
     /**
-    * Returns the the next item (based on the cursor) and advances the cursor.
+    * Returns the next item (based on the cursor) and advances the cursor.
     *
     * @name Phaser.ArraySet#next
     * @property {any} next
@@ -719,7 +719,7 @@ Object.defineProperties(Children.prototype, {
     },
 
     /**
-    * Returns the the previous item (based on the cursor) and retreats the cursor.
+    * Returns the previous item (based on the cursor) and retreats the cursor.
     *
     * @name Phaser.ArraySet#previous
     * @property {any} previous

v3/src/gameobjects/blitter/Blitter.js

@@ -36,6 +36,10 @@ var Blitter = function (state, x, y, key, frame)
     this.type = CONST.BLITTER;
 
     this.children = new Children(this);
+
+    this.renderList = [];
+
+    this.dirty = false;
 };
 
 Blitter.prototype = Object.create(GameObject.prototype);
@@ -60,6 +64,8 @@ Blitter.prototype.create = function (x, y, frame, visible, index)
 
     this.children.addAt(bob, index, false);
 
+    this.dirty = true;
+
     return bob;
 };
 
@@ -103,9 +109,25 @@ Blitter.prototype.createMultiple = function (quantity, frame, visible)
     return bobs;
 };
 
+Blitter.prototype.childCanRender = function (child)
+{
+    return (child.visible && child.alpha > 0);
+};
+
+Blitter.prototype.getRenderList = function ()
+{
+    if (this.dirty)
+    {
+        this.renderList = this.children.list.filter(this.childCanRender, this);
+    }
+
+    return this.renderList;
+};
+
 Blitter.prototype.clear = function ()
 {
     this.children.removeAll();
+    this.dirty = true;
 };
 
 module.exports = Blitter;

v3/src/gameobjects/blitter/BlitterCanvasRenderer.js

@@ -2,31 +2,31 @@
 var BlitterCanvasRenderer = function (renderer, src, interpolationPercentage)
 {
     var worldAlpha = src.color.worldAlpha;
-    var len = src.children.list.length;
+    var list = src.getRenderList();
 
     //  Skip rendering?
 
-    if (src.skipRender || !src.visible || worldAlpha === 0 || len === 0)
+    if (src.skipRender || !src.visible || worldAlpha === 0 || list.length === 0)
     {
         return;
     }
 
     renderer.resetTransform();
     renderer.setBlendMode(src.blendMode);
-    renderer.setAlpha(worldAlpha);
+
+    var ca = renderer.currentAlpha;
 
     //  Render bobs
-    for (var i = 0; i < len; i++)
+    for (var i = 0; i < list.length; i++)
     {
-        var bob = src.children.list[i];
-        var frame = bob.frame;
+        var bob = list[i];
 
-        // if (!bob.visible)
-        // {
-            // continue;
-        // }
+        if (ca !== bob.alpha)
+        {
+            ca = renderer.setAlpha(bob.alpha);
+        }
 
-        renderer.blitImage(bob.x, bob.y, frame);
+        renderer.blitImage(bob.x, bob.y, bob.frame);
     }
 };
 

v3/src/gameobjects/blitter/BlitterWebGLRenderer.js

@@ -1,23 +1,22 @@
 var BlitterWebGLRenderer = function (renderer, src, interpolationPercentage)
 {
     var worldAlpha = src.color.worldAlpha;
-    var len = src.children.list.length - 1;
+    var list = src.getRenderList();
 
     //  Skip rendering?
 
-    if (src.skipRender || !src.visible || worldAlpha === 0 || len === 0)
+    if (src.skipRender || !src.visible || worldAlpha === 0 || list.length === 0)
     {
         return;
     }
 
     //  Render bobs
 
-    for (var i = 0; i <= len; ++i)
+    for (var i = 0; i < list.length; i++)
     {
-        var bob = src.children.list[i];
-        var frame = bob.frame;
+        var bob = list[i];
 
-        renderer.blitterBatch.add(bob.x, bob.y, frame, worldAlpha);
+        renderer.blitterBatch.add(bob.x, bob.y, bob.frame, bob.alpha);
     }
 };
 

v3/src/gameobjects/blitter/Bob.js

@@ -5,17 +5,68 @@ var Bob = function (blitter, x, y, frame, visible)
     this.x = x;
     this.y = y;
     this.frame = frame;
-    this.visible = visible;
     this.data = {};
+
+    this._visible = visible;
+    this._alpha = 1;
 };
 
+Bob.prototype.constructor = Bob;
+
 Bob.prototype = {
+
     reset: function (x, y, frame)
     {
         this.x = x;
         this.y = y;
         this.frame = frame;
+    },
+
+    destroy: function ()
+    {
+        this.parent = undefined;
+        this.frame = undefined;
+        this.data = undefined;
     }
+
 };
 
+Object.defineProperties(Bob.prototype, {
+
+    visible: {
+
+        enumerable: true,
+
+        get: function ()
+        {
+            return this._visible;
+        },
+
+        set: function (value)
+        {
+            this._visible = value;
+            this.parent.dirty = true;
+        }
+
+    },
+
+    alpha: {
+
+        enumerable: true,
+
+        get: function ()
+        {
+            return this._alpha;
+        },
+
+        set: function (value)
+        {
+            this._alpha = value;
+            this.parent.dirty = true;
+        }
+
+    }
+
+});
+
 module.exports = Bob;

v3/src/renderer/canvas/CanvasRenderer.js

@@ -98,6 +98,8 @@ CanvasRenderer.prototype = {
             this.currentContext.globalCompositeOperation = blendMode;
             this.currentBlendMode = blendMode;
         }
+
+        return this.currentBlendMode;
     },
 
     setAlpha: function (alpha)
@@ -107,6 +109,8 @@ CanvasRenderer.prototype = {
             this.currentContext.globalAlpha = alpha;
             this.currentAlpha = alpha;
         }
+
+        return this.currentAlpha;
     },
 
     //  Call at the start of the render loop
@@ -159,7 +163,6 @@ CanvasRenderer.prototype = {
 
         //  If the alpha or blend mode didn't change since the last render, then don't set them again (saves 2 ops)
 
-
         if (this.currentAlpha !== 1)
         {
             ctx.globalAlpha = 1;
@@ -229,6 +232,14 @@ CanvasRenderer.prototype = {
     {
         // console.log('%c render end ', 'color: #ffffff; background: #ff0000;');
 
+        var ctx = this.gameContext;
+
+        ctx.globalAlpha = 1;
+        ctx.globalCompositeOperation = 'source-over';
+
+        this.currentAlpha = 1;
+        this.currentBlendMode = 0;
+
         //  Add Post-render hook
     },