Base container rendering + sprite batching with parent matrix

src/gameobjects/container/Container.js

@@ -0,0 +1,37 @@
+var Class = require('../../utils/Class');
+var Components = require('../components');
+var GameObject = require('../GameObject');
+var Render = require('./ContainerRender');
+
+var Container = new Class({
+
+    Extends: GameObject,
+
+    Mixins: [
+        Components.BlendMode,
+        Components.Transform,
+        Render
+    ],
+
+    initialize:
+
+    function Container(scene, x, y)
+    {
+        GameObject.call(this, scene, 'Container');
+        this.parentContainer = null;
+        this.children = [];
+        this.setPosition(x, y);
+        this.localTransform = new Components.TransformMatrix();
+    },
+
+    add: function (gameObject)
+    {
+        if (this.children.indexOf(gameObject) < 0)
+        {
+            this.children.push(gameObject);
+        }
+    }
+
+});
+
+module.exports = Container;

src/gameobjects/container/ContainerCanvasRenderer.js

@@ -0,0 +1,12 @@
+var GameObject = require('../GameObject');
+
+var ContainerCanvasRenderer = function (renderer, src, interpolationPercentage, camera)
+{
+    if (GameObject.RENDER_MASK !== src.renderFlags || (src.cameraFilter > 0 && (src.cameraFilter & camera._id)))
+    {
+        return;
+    }
+
+};
+
+module.exports = ContainerCanvasRenderer;

src/gameobjects/container/ContainerCreator.js

@@ -0,0 +1,11 @@
+var GetAdvancedValue = require('../../utils/object/GetAdvancedValue');
+var GameObjectCreator = require('../GameObjectCreator');
+var Container = require('./Container');
+
+GameObjectCreator.register('container', function (config)
+{
+    var x = GetAdvancedValue(config, 'x', 0.0);
+    var y = GetAdvancedValue(config, 'y', 0.0);
+    
+    return new Container(this.scene, x, y);
+});

src/gameobjects/container/ContainerFactory.js

@@ -0,0 +1,11 @@
+var Container = require('./Container');
+var GameObjectFactory = require('../GameObjectFactory');
+
+GameObjectFactory.register('container', function (x, y)
+{
+    var container = new Container(this.scene, x, y);
+
+    this.displayList.add(container);
+
+    return container;
+});

src/gameobjects/container/ContainerRender.js

@@ -0,0 +1,19 @@
+var renderWebGL = require('../../utils/NOOP');
+var renderCanvas = require('../../utils/NOOP');
+
+if (WEBGL_RENDERER)
+{
+    renderWebGL = require('./ContainerWebGLRenderer');
+}
+
+if (CANVAS_RENDERER)
+{
+    renderCanvas = require('./ContainerCanvasRenderer');
+}
+
+module.exports = {
+
+    renderWebGL: renderWebGL,
+    renderCanvas: renderCanvas
+
+};

src/gameobjects/container/ContainerWebGLRenderer.js

@@ -0,0 +1,32 @@
+var GameObject = require('../GameObject');
+
+var ContainerWebGLRenderer = function (renderer, container, interpolationPercentage, camera, parentMatrix)
+{
+    if (GameObject.RENDER_MASK !== container.renderFlags || (container.cameraFilter > 0 && (container.cameraFilter & camera._id)))
+    {
+        return;
+    }
+
+    var children = container.children;
+    var transformMatrix = container.localTransform;
+    
+    if (parentMatrix === undefined)
+    {
+        transformMatrix.applyITRS(container.x, container.y, container.rotation, container.scaleX, container.scaleY);
+    }
+    else
+    {
+        transformMatrix.loadIdentity();
+        transformMatrix.multiply(parentMatrix);
+        transformMatrix.translate(container.x, container.y);
+        transformMatrix.rotate(container.rotation);
+        transformMatrix.scale(container.scaleX, container.scaleY);
+    }
+
+    for (var index = 0; index < children.length; ++index)
+    {
+        children[index].renderWebGL(renderer, children[index], interpolationPercentage, camera, transformMatrix);
+    }
+};
+
+module.exports = ContainerWebGLRenderer;

src/gameobjects/image/ImageWebGLRenderer.js

@@ -20,14 +20,14 @@ var GameObject = require('../GameObject');
  * @param {number} interpolationPercentage - Reserved for future use and custom pipelines.
  * @param {Phaser.Cameras.Scene2D.Camera} camera - The Camera that is rendering the Game Object.
  */
-var ImageWebGLRenderer = function (renderer, src, interpolationPercentage, camera)
+var ImageWebGLRenderer = function (renderer, src, interpolationPercentage, camera, parentMatrix)
 {
     if (GameObject.RENDER_MASK !== src.renderFlags || (src.cameraFilter > 0 && (src.cameraFilter & camera._id)))
     {
         return;
     }
     
-    this.pipeline.batchSprite(src, camera);
+    this.pipeline.batchSprite(src, camera, parentMatrix);
 };
 
 module.exports = ImageWebGLRenderer;

src/gameobjects/index.js

@@ -22,6 +22,7 @@ var GameObjects = {
     GameObject: require('./GameObject'),
     BitmapText: require('./bitmaptext/static/BitmapText'),
     Blitter: require('./blitter/Blitter'),
+    Container: require('./container/Container'),
     DynamicBitmapText: require('./bitmaptext/dynamic/DynamicBitmapText'),
     Graphics: require('./graphics/Graphics.js'),
     Group: require('./group/Group'),
@@ -39,6 +40,7 @@ var GameObjects = {
 
     Factories: {
         Blitter: require('./blitter/BlitterFactory'),
+        Container: require('./container/ContainerFactory'),
         DynamicBitmapText: require('./bitmaptext/dynamic/DynamicBitmapTextFactory'),
         Graphics: require('./graphics/GraphicsFactory'),
         Group: require('./group/GroupFactory'),
@@ -56,6 +58,7 @@ var GameObjects = {
 
     Creators: {
         Blitter: require('./blitter/BlitterCreator'),
+        Container: require('./container/ContainerCreator'),
         DynamicBitmapText: require('./bitmaptext/dynamic/DynamicBitmapTextCreator'),
         Graphics: require('./graphics/GraphicsCreator'),
         Group: require('./group/GroupCreator'),

src/renderer/webgl/pipelines/TextureTintPipeline.js

@@ -10,6 +10,7 @@ var ShaderSourceFS = require('../shaders/TextureTint.frag');
 var ShaderSourceVS = require('../shaders/TextureTint.vert');
 var Utils = require('../Utils');
 var WebGLPipeline = require('../WebGLPipeline');
+var IdentityMatrix = new Float32Array([1, 0, 0, 1, 0, 0]);
 
 /**
  * @classdesc
@@ -651,15 +652,26 @@ var TextureTintPipeline = new Class({
      * @param {Phaser.GameObjects.Sprite} sprite - [description]
      * @param {Phaser.Cameras.Scene2D.Camera} camera - [description]
      */
-    batchSprite: function (sprite, camera)
+    batchSprite: function (sprite, camera, parentTransformMatrix)
     {
+        var parentMatrix;
+
+        if (parentTransformMatrix === undefined)
+        {
+            parentMatrix = IdentityMatrix;
+        }
+        else
+        {
+            parentMatrix = parentTransformMatrix.matrix;
+        }
+
         this.renderer.setPipeline(this);
 
         if (this.vertexCount + 6 > this.vertexCapacity)
         {
             this.flush();
         }
-
+        
         var roundPixels = this.renderer.config.roundPixels;
         var getTint = Utils.getTintAppendFloatAlpha;
         var vertexViewF32 = this.vertexViewF32;
@@ -704,12 +716,24 @@ var TextureTintPipeline = new Class({
         var cmd = cameraMatrix[3];
         var cme = cameraMatrix[4];
         var cmf = cameraMatrix[5];
-        var mva = sra * cma + srb * cmc;
-        var mvb = sra * cmb + srb * cmd;
-        var mvc = src * cma + srd * cmc;
-        var mvd = src * cmb + srd * cmd;
-        var mve = sre * cma + srf * cmc + cme;
-        var mvf = sre * cmb + srf * cmd + cmf;
+        var pma = parentMatrix[0];
+        var pmb = parentMatrix[1];
+        var pmc = parentMatrix[2];
+        var pmd = parentMatrix[3];
+        var pme = parentMatrix[4];
+        var pmf = parentMatrix[5];
+        var pca = cma * pma + cmb * pmc;
+        var pcb = cma * pmb + cmb * pmd;
+        var pcc = cmc * pma + cmd * pmc;
+        var pcd = cmc * pmb + cmd * pmd;
+        var pce = cme * pma + cmf * pmc + pme;
+        var pcf = cme * pmb + cmf * pmd + pmf;
+        var mva = sra * pca + srb * pcc;
+        var mvb = sra * pcb + srb * pcd;
+        var mvc = src * pca + srd * pcc;
+        var mvd = src * pcb + srd * pcd;
+        var mve = sre * pca + srf * pcc + pce;
+        var mvf = sre * pcb + srf * pcd + pcf;
         var tx0 = x * mva + y * mvc + mve;
         var ty0 = x * mvb + y * mvd + mvf;
         var tx1 = x * mva + yh * mvc + mve;