The default Container Blend Mode is now SKIP_TEST. This allows you to either set a blend mode for a Container, in which case all children use that blend mode. Or, you can set a blend mode on the children and the children will render using their own blend modes, as the Container doesn't have one set. The WebGL and Canvas Renderer functions have also been updated to support this change. Fix #3684

CHANGELOG.md

@@ -170,6 +170,7 @@ The four draw orders are:
 * The RandomDataGenerator will now create a default random seed if you instantiate your own version of the class (instead of using `Phaser.Math.RND`) and don't provide a seed for it (thanks michaeld)
 * The Tilemap `createFromObjects` method will now add custom properties to the Game Objects. It works by checking if the property exists or not, and if not, it sets it in the Game Objects Data Manager (thanks @scalemailted @samme)
 * In Matter.js if you scaled a Body it would only scale correctly once, due to the way Matter handles scaling internally. We now automatically reset the Matter scale before applying the new value, which allows you to keep the Phaser and Matter object scales in sync. Fix #3785 #3951 (thanks @bergben)
+* The default Container Blend Mode is now `SKIP_TEST`. This allows you to either set a blend mode for a Container, in which case all children use that blend mode. Or, you can set a blend mode on the children and the children will render using their own blend modes, as the Container doesn't have one set. The WebGL and Canvas Renderer functions have also been updated to support this change. Fix #3684 (thanks @TadejZupancic)
 
 ### Game Config Resolution Specific Bug Fixes
 

src/gameobjects/container/Container.js

@@ -6,6 +6,7 @@
  */
 
 var ArrayUtils = require('../../utils/array');
+var BlendModes = require('../../renderer/BlendModes');
 var Class = require('../../utils/Class');
 var Components = require('../components');
 var GameObject = require('../GameObject');
@@ -195,6 +196,8 @@ var Container = new Class({
 
         this.clearAlpha();
 
+        this.setBlendMode(BlendModes.SKIP_CHECK);
+
         if (children)
         {
             this.add(children);

src/gameobjects/container/ContainerCanvasRenderer.js

@@ -44,6 +44,14 @@ var ContainerCanvasRenderer = function (renderer, container, interpolationPercen
         transformMatrix.applyITRS(container.x, container.y, container.rotation, container.scaleX, container.scaleY);
     }
 
+    var containerHasBlendMode = (container.blendMode !== -1);
+
+    if (!containerHasBlendMode)
+    {
+        //  If Container is SKIP_TEST then set blend mode to be Normal
+        renderer.setBlendMode(0);
+    }
+
     var alpha = container._alpha;
     var scrollFactorX = container.scrollFactorX;
     var scrollFactorY = container.scrollFactorY;
@@ -58,19 +66,26 @@ var ContainerCanvasRenderer = function (renderer, container, interpolationPercen
         }
 
         var childAlpha = child._alpha;
+        var childBlendMode = child._blendMode;
         var childScrollFactorX = child.scrollFactorX;
         var childScrollFactorY = child.scrollFactorY;
 
-        //  Set new values
+        //  Set parent values
         child.setScrollFactor(childScrollFactorX * scrollFactorX, childScrollFactorY * scrollFactorY);
         child.setAlpha(childAlpha * alpha);
 
+        if (containerHasBlendMode)
+        {
+            child.setBlendMode(container._blendMode);
+        }
+
         //  Render
         child.renderCanvas(renderer, child, interpolationPercentage, camera, transformMatrix);
 
-        //  Restore old values
+        //  Restore original values
         child.setAlpha(childAlpha);
         child.setScrollFactor(childScrollFactorX, childScrollFactorY);
+        child.setBlendMode(childBlendMode);
     }
 };
 

src/gameobjects/container/ContainerWebGLRenderer.js

@@ -44,6 +44,14 @@ var ContainerWebGLRenderer = function (renderer, container, interpolationPercent
         transformMatrix.applyITRS(container.x, container.y, container.rotation, container.scaleX, container.scaleY);
     }
 
+    var containerHasBlendMode = (container.blendMode !== -1);
+
+    if (!containerHasBlendMode)
+    {
+        //  If Container is SKIP_TEST then set blend mode to be Normal
+        renderer.setBlendMode(0);
+    }
+
     var alpha = container._alpha;
     var scrollFactorX = container.scrollFactorX;
     var scrollFactorY = container.scrollFactorY;
@@ -61,9 +69,20 @@ var ContainerWebGLRenderer = function (renderer, container, interpolationPercent
         var childScrollFactorX = child.scrollFactorX;
         var childScrollFactorY = child.scrollFactorY;
 
+        if (!containerHasBlendMode && child.blendMode !== renderer.currentBlendMode)
+        {
+            //  If Container doesn't have its own blend mode, then a child can have one
+            renderer.setBlendMode(child.blendMode);
+        }
+
+        //  Set parent values
         child.setScrollFactor(childScrollFactorX * scrollFactorX, childScrollFactorY * scrollFactorY);
         child.setAlpha(childAlpha * alpha);
+
+        //  Render
         child.renderWebGL(renderer, child, interpolationPercentage, camera, transformMatrix);
+
+        //  Restore original values
         child.setAlpha(childAlpha);
         child.setScrollFactor(childScrollFactorX, childScrollFactorY);
     }