Removed use of currentBlendMode and currentAlpha

Author: photonstorm

CHANGELOG.md

@@ -79,6 +79,8 @@ The process of managing scissors in the WebGLRenderer has been completely rewrit
 * The WebGLRenderer has a new method `setBlankTexture` which forces it to set the blank texture as the current texture. This is used after drawing a Render Texture to ensure no other object tries to draw to itself.
 * The StaticTilemapLayer has had the following properties and methods added to it: `skipCull`, `tilesDrawn`, `tilesTotal`, `cullPaddingX`, `cullPaddingY`, `cullCallback`, `setSkipCull` and `setCullPadding` as these are all used by the Canvas Static Layer renderer. Static Layers in 3.11 didn't render in Canvas because the cull values were missing, but now render correctly and can also be rendered to other targets, like a Render Texture.
 * The Math.Snap methods `Snap.Floor`, `Snap.Ceil` and `Snap.To` have all gained a new optional boolean argument `divide`. If set the resulting snapped value will be divided by the gap amount before returning. This is handy if you're trying to quickly snap a value into a grid or array location.
+* The `currentBlendMode` property has been removed from the Canvas Renderer and is no longer checked by any class. Blend modes are now set directly on the context to avoid state saving invalidation.
+* The `currentAlpha` property has been removed from the Canvas Renderer and is no longer checked by any class. Alpha values are now set directly on the context to avoid state saving invalidation.
 
 ### Game Config Resolution Specific Bug Fixes
 

src/gameobjects/bitmaptext/dynamic/DynamicBitmapTextCanvasRenderer.js

@@ -66,33 +66,25 @@ var DynamicBitmapTextCanvasRenderer = function (renderer, src, interpolationPerc
     var rotation = 0;
     var scale = (src.fontSize / src.fontData.size);
 
-    //  Alpha
-
     var alpha = camera.alpha * src.alpha;
 
     if (alpha === 0)
     {
         //  Nothing to see, so abort early
         return;
     }
-    else if (renderer.currentAlpha !== alpha)
-    {
-        renderer.currentAlpha = alpha;
-        ctx.globalAlpha = alpha;
-    }
 
     //  Blend Mode
     ctx.globalCompositeOperation = renderer.blendModes[src.blendMode];
 
     //  Alpha
-    ctx.globalAlpha = src.alpha;
+    ctx.globalAlpha = alpha;
 
     ctx.save();
 
-    if (parentMatrix !== undefined)
+    if (parentMatrix)
     {
-        var matrix = parentMatrix.matrix;
-        ctx.transform(matrix[0], matrix[1], matrix[2], matrix[3], matrix[4], matrix[5]);
+        parentMatrix.copyToContext(ctx);
     }
 
     ctx.translate(src.x, src.y);

src/gameobjects/blitter/BlitterCanvasRenderer.js

@@ -28,9 +28,7 @@ var BlitterCanvasRenderer = function (renderer, src, interpolationPercentage, ca
         return;
     }
 
-    var ctx = renderer.gameContext;
-
-    //  Alpha
+    var ctx = renderer.currentContext;
 
     var alpha = camera.alpha * src.alpha;
 
@@ -39,25 +37,18 @@ var BlitterCanvasRenderer = function (renderer, src, interpolationPercentage, ca
         //  Nothing to see, so abort early
         return;
     }
-    else if (renderer.currentAlpha !== alpha)
-    {
-        renderer.currentAlpha = alpha;
-        ctx.globalAlpha = alpha;
-    }
 
     //  Blend Mode
-
-    renderer.setBlendMode(src.blendMode);
+    ctx.globalCompositeOperation = renderer.blendModes[src.blendMode];
 
     var cameraScrollX = src.x - camera.scrollX * src.scrollFactorX;
     var cameraScrollY = src.y - camera.scrollY * src.scrollFactorY;
 
     ctx.save();
 
-    if (parentMatrix !== undefined)
+    if (parentMatrix)
     {
-        var matrix = parentMatrix.matrix;
-        ctx.transform(matrix[0], matrix[1], matrix[2], matrix[3], matrix[4], matrix[5]);
+        parentMatrix.copyToContext(ctx);
     }
 
     //  Render bobs
@@ -78,11 +69,8 @@ var BlitterCanvasRenderer = function (renderer, src, interpolationPercentage, ca
         {
             continue;
         }
-        else if (renderer.currentAlpha !== bobAlpha)
-        {
-            renderer.currentAlpha = bobAlpha;
-            ctx.globalAlpha = bobAlpha;
-        }
+
+        ctx.globalAlpha = bobAlpha;
 
         if (!flip)
         {

src/gameobjects/container/ContainerCanvasRenderer.js

@@ -61,9 +61,14 @@ var ContainerCanvasRenderer = function (renderer, container, interpolationPercen
         var childScrollFactorX = child.scrollFactorX;
         var childScrollFactorY = child.scrollFactorY;
 
+        //  Set new values
         child.setScrollFactor(childScrollFactorX * scrollFactorX, childScrollFactorY * scrollFactorY);
         child.setAlpha(childAlpha * alpha);
+
+        //  Render
         child.renderCanvas(renderer, child, interpolationPercentage, camera, transformMatrix);
+
+        //  Restore old values
         child.setAlpha(childAlpha);
         child.setScrollFactor(childScrollFactorX, childScrollFactorY);
     }

src/gameobjects/graphics/GraphicsCanvasRenderer.js

@@ -91,7 +91,6 @@ var GraphicsCanvasRenderer = function (renderer, src, interpolationPercentage, c
     calcMatrix.copyToContext(ctx);
 
     ctx.fillStyle = '#fff';
-    ctx.globalAlpha = src.alpha;
 
     for (var index = 0; index < commandBufferLength; ++index)
     {

src/gameobjects/text/static/TextCanvasRenderer.js

@@ -28,8 +28,6 @@ var TextCanvasRenderer = function (renderer, src, interpolationPercentage, camer
 
     var ctx = renderer.currentContext;
 
-    //  Alpha
-
     var alpha = camera.alpha * src.alpha;
 
     if (alpha === 0)

src/renderer/canvas/CanvasRenderer.js

@@ -157,26 +157,6 @@ var CanvasRenderer = new Class({
          */
         this.blendModes = GetBlendModes();
 
-        /**
-         * [description]
-         *
-         * @name Phaser.Renderer.Canvas.CanvasRenderer#currentAlpha
-         * @type {number}
-         * @default 1
-         * @since 3.0.0
-         */
-        this.currentAlpha = 1;
-
-        /**
-         * [description]
-         *
-         * @name Phaser.Renderer.Canvas.CanvasRenderer#currentBlendMode
-         * @type {number}
-         * @default 0
-         * @since 3.0.0
-         */
-        this.currentBlendMode = 0;
-
         /**
          * [description]
          *
@@ -346,17 +326,13 @@ var CanvasRenderer = new Class({
      *
      * @param {number} blendMode - [description]
      *
-     * @return {number} [description]
+     * @return {this} [description]
      */
     setBlendMode: function (blendMode)
     {
-        if (this.currentBlendMode !== blendMode)
-        {
-            this.currentContext.globalCompositeOperation = blendMode;
-            this.currentBlendMode = blendMode;
-        }
+        this.currentContext.globalCompositeOperation = blendMode;
 
-        return this.currentBlendMode;
+        return this;
     },
 
     /**
@@ -384,17 +360,13 @@ var CanvasRenderer = new Class({
      *
      * @param {number} alpha - [description]
      *
-     * @return {number} [description]
+     * @return {this} [description]
      */
     setAlpha: function (alpha)
     {
-        if (this.currentAlpha !== alpha)
-        {
-            this.currentContext.globalAlpha = alpha;
-            this.currentAlpha = alpha;
-        }
+        this.currentContext.globalAlpha = alpha;
 
-        return this.currentAlpha;
+        return this;
     },
 
     /**
@@ -461,15 +433,7 @@ var CanvasRenderer = new Class({
 
         ctx.globalAlpha = camera.alpha;
 
-        this.currentAlpha = camera.alpha;
-
-        if (this.currentBlendMode !== 0)
-        {
-            ctx.globalCompositeOperation = 'source-over';
-            this.currentBlendMode = 0;
-        }
-
-        this.currentScaleMode = 0;
+        ctx.globalCompositeOperation = 'source-over';
 
         this.drawCount += list.length;
 
@@ -481,9 +445,7 @@ var CanvasRenderer = new Class({
             ctx.clip();
         }
 
-        var matrix = camera.matrix.matrix;
-
-        ctx.setTransform(matrix[0], matrix[1], matrix[2], matrix[3], matrix[4], matrix[5]);
+        camera.matrix.copyToContext(ctx);
 
         for (var i = 0; i < childCount; i++)
         {
@@ -536,9 +498,6 @@ var CanvasRenderer = new Class({
         ctx.globalAlpha = 1;
         ctx.globalCompositeOperation = 'source-over';
 
-        this.currentAlpha = 1;
-        this.currentBlendMode = 0;
-
         if (this.snapshotCallback)
         {
             this.snapshotCallback(CanvasSnapshot(this.gameCanvas, this.snapshotType, this.snapshotEncoder));