Merge pull request phaserjs#3508 from photonstorm/containers

Merging in Containers branch

Author: photonstorm

src/display/mask/GeometryMask.js

@@ -115,7 +115,7 @@ var GeometryMask = new Class({
 
         renderer.currentContext.save();
 
-        geometryMask.renderCanvas(renderer, geometryMask, 0.0, camera, null, true);
+        geometryMask.renderCanvas(renderer, geometryMask, 0.0, camera, undefined, null, true);
 
         renderer.currentContext.clip();
     },

src/gameobjects/bitmaptext/dynamic/DynamicBitmapTextCanvasRenderer.js

@@ -19,8 +19,9 @@ var GameObject = require('../../GameObject');
  * @param {Phaser.GameObjects.DynamicBitmapText} src - The Game Object being rendered in this call.
  * @param {number} interpolationPercentage - Reserved for future use and custom pipelines.
  * @param {Phaser.Cameras.Scene2D.Camera} camera - The Camera that is rendering the Game Object.
+ * @param {Phaser.GameObjects.Components.TransformMatrix} parentMatrix - This transform matrix is defined if the game object is nested
  */
-var DynamicBitmapTextCanvasRenderer = function (renderer, src, interpolationPercentage, camera)
+var DynamicBitmapTextCanvasRenderer = function (renderer, src, interpolationPercentage, camera, parentMatrix)
 {
     var text = src.text;
     var textLength = text.length;
@@ -89,6 +90,12 @@ var DynamicBitmapTextCanvasRenderer = function (renderer, src, interpolationPerc
 
     ctx.save();
 
+    if (parentMatrix !== undefined)
+    {
+        var matrix = parentMatrix.matrix;
+        ctx.transform(matrix[0], matrix[1], matrix[2], matrix[3], matrix[4], matrix[5]);
+    }
+
     ctx.translate(src.x, src.y);
 
     ctx.rotate(src.rotation);

src/gameobjects/bitmaptext/dynamic/DynamicBitmapTextWebGLRenderer.js

@@ -19,8 +19,9 @@ var GameObject = require('../../GameObject');
  * @param {Phaser.GameObjects.DynamicBitmapText} gameObject - The Game Object being rendered in this call.
  * @param {number} interpolationPercentage - Reserved for future use and custom pipelines.
  * @param {Phaser.Cameras.Scene2D.Camera} camera - The Camera that is rendering the Game Object.
+ * @param {Phaser.GameObjects.Components.TransformMatrix} parentMatrix - This transform matrix is defined if the game object is nested
  */
-var DynamicBitmapTextWebGLRenderer = function (renderer, bitmapText, interpolationPercentage, camera)
+var DynamicBitmapTextWebGLRenderer = function (renderer, bitmapText, interpolationPercentage, camera, parentMatrix)
 {
     var text = bitmapText.text;
     var textLength = text.length;
@@ -30,7 +31,7 @@ var DynamicBitmapTextWebGLRenderer = function (renderer, bitmapText, interpolati
         return;
     }
 
-    this.pipeline.batchDynamicBitmapText(bitmapText, camera);
+    this.pipeline.batchDynamicBitmapText(bitmapText, camera, parentMatrix);
 };
 
 module.exports = DynamicBitmapTextWebGLRenderer;

src/gameobjects/bitmaptext/static/BitmapTextCanvasRenderer.js

@@ -19,8 +19,9 @@ var GameObject = require('../../GameObject');
  * @param {Phaser.GameObjects.BitmapText} src - The Game Object being rendered in this call.
  * @param {number} interpolationPercentage - Reserved for future use and custom pipelines.
  * @param {Phaser.Cameras.Scene2D.Camera} camera - The Camera that is rendering the Game Object.
+ * @param {Phaser.GameObjects.Components.TransformMatrix} parentMatrix - This transform matrix is defined if the game object is nested
  */
-var BitmapTextCanvasRenderer = function (renderer, src, interpolationPercentage, camera)
+var BitmapTextCanvasRenderer = function (renderer, src, interpolationPercentage, camera, parentMatrix)
 {
     var text = src.text;
     var textLength = text.length;
@@ -95,6 +96,12 @@ var BitmapTextCanvasRenderer = function (renderer, src, interpolationPercentage,
 
     ctx.save();
 
+    if (parentMatrix !== undefined)
+    {
+        var matrix = parentMatrix.matrix;
+        ctx.transform(matrix[0], matrix[1], matrix[2], matrix[3], matrix[4], matrix[5]);
+    }
+
     ctx.translate(tx, ty);
 
     ctx.rotate(src.rotation);

src/gameobjects/bitmaptext/static/BitmapTextWebGLRenderer.js

@@ -19,8 +19,9 @@ var GameObject = require('../../GameObject');
  * @param {Phaser.GameObjects.BitmapText} gameObject - The Game Object being rendered in this call.
  * @param {number} interpolationPercentage - Reserved for future use and custom pipelines.
  * @param {Phaser.Cameras.Scene2D.Camera} camera - The Camera that is rendering the Game Object.
+ * @param {Phaser.GameObjects.Components.TransformMatrix} parentMatrix - This transform matrix is defined if the game object is nested
  */
-var BitmapTextWebGLRenderer = function (renderer, gameObject, interpolationPercentage, camera)
+var BitmapTextWebGLRenderer = function (renderer, gameObject, interpolationPercentage, camera, parentMatrix)
 {
     var text = gameObject.text;
     var textLength = text.length;
@@ -30,7 +31,7 @@ var BitmapTextWebGLRenderer = function (renderer, gameObject, interpolationPerce
         return;
     }
 
-    this.pipeline.batchBitmapText(this, camera);
+    this.pipeline.batchBitmapText(this, camera, parentMatrix);
 };
 
 module.exports = BitmapTextWebGLRenderer;

src/gameobjects/blitter/BlitterCanvasRenderer.js

@@ -19,8 +19,9 @@ var GameObject = require('../GameObject');
  * @param {Phaser.GameObjects.Blitter} src - The Game Object being rendered in this call.
  * @param {number} interpolationPercentage - Reserved for future use and custom pipelines.
  * @param {Phaser.Cameras.Scene2D.Camera} camera - The Camera that is rendering the Game Object.
+ * @param {Phaser.GameObjects.Components.TransformMatrix} parentMatrix - This transform matrix is defined if the game object is nested
  */
-var BlitterCanvasRenderer = function (renderer, src, interpolationPercentage, camera)
+var BlitterCanvasRenderer = function (renderer, src, interpolationPercentage, camera, parentMatrix)
 {
     if (GameObject.RENDER_MASK !== src.renderFlags || (src.cameraFilter > 0 && (src.cameraFilter & camera._id)))
     {
@@ -35,6 +36,14 @@ var BlitterCanvasRenderer = function (renderer, src, interpolationPercentage, ca
     var cameraScrollX = src.x - camera.scrollX * src.scrollFactorX;
     var cameraScrollY = src.y - camera.scrollY * src.scrollFactorY;
 
+    ctx.save();
+
+    if (parentMatrix !== undefined)
+    {
+        var matrix = parentMatrix.matrix;
+        ctx.transform(matrix[0], matrix[1], matrix[2], matrix[3], matrix[4], matrix[5]);
+    }
+
     //  Render bobs
     for (var i = 0; i < list.length; i++)
     {
@@ -72,6 +81,8 @@ var BlitterCanvasRenderer = function (renderer, src, interpolationPercentage, ca
             ctx.restore();
         }
     }
+    
+    ctx.restore();
 };
 
 module.exports = BlitterCanvasRenderer;

src/gameobjects/blitter/BlitterWebGLRenderer.js

@@ -19,15 +19,16 @@ var GameObject = require('../GameObject');
  * @param {Phaser.GameObjects.Blitter} gameObject - The Game Object being rendered in this call.
  * @param {number} interpolationPercentage - Reserved for future use and custom pipelines.
  * @param {Phaser.Cameras.Scene2D.Camera} camera - The Camera that is rendering the Game Object.
+ * @param {Phaser.GameObjects.Components.TransformMatrix} parentMatrix - This transform matrix is defined if the game object is nested
  */
-var BlitterWebGLRenderer = function (renderer, gameObject, interpolationPercentage, camera)
+var BlitterWebGLRenderer = function (renderer, gameObject, interpolationPercentage, camera, parentMatrix)
 {
     if (GameObject.RENDER_MASK !== gameObject.renderFlags || (gameObject.cameraFilter > 0 && (gameObject.cameraFilter & camera._id)))
     {
         return;
     }
 
-    this.pipeline.drawBlitter(gameObject, camera);
+    this.pipeline.drawBlitter(gameObject, camera, parentMatrix);
 };
 
 module.exports = BlitterWebGLRenderer;

src/gameobjects/container/Container.js

@@ -0,0 +1,79 @@
+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();
+        this.tempTransformMatrix = new Components.TransformMatrix();
+    },
+
+    add: function (gameObject)
+    {
+        if (gameObject.type === 'Container')
+        {
+            gameObject.parentContainer = this;
+        }
+        if (this.children.indexOf(gameObject) < 0)
+        {
+            this.children.push(gameObject);
+        }
+        return this;
+    },
+
+    remove: function (gameObject)
+    {
+        var index = this.children.indexOf(gameObject);
+        if (index >= 0)
+        {
+            if (gameObject.type === 'Container')
+            {
+                gameObject.parentContainer = null;
+            }
+            this.children.splice(index, 1);
+        }
+        return this;
+    },
+
+    pointToContainer: function (pointSrc, pointDst)
+    {
+        var parent = this.parentContainer;
+        var tempMatrix = this.tempTransformMatrix;
+        
+        if (pointDst === undefined)
+        {
+            pointDst = { x: 0, y: 0 };
+        }
+
+        if (parent !== null)
+        {
+            parent.pointToContainer(pointSrc, pointDst);
+        }
+
+        tempMatrix.loadIdentity();
+        tempMatrix.applyITRS(this.x, this.y, this.rotation, this.scaleX, this.scaleY);
+        tempMatrix.invert();
+        tempMatrix.transformPoint(pointSrc.x, pointSrc.y, pointDst);
+
+        return pointDst;
+    }
+});
+
+module.exports = Container;

src/gameobjects/container/ContainerCanvasRenderer.js

@@ -0,0 +1,32 @@
+var GameObject = require('../GameObject');
+
+var ContainerCanvasRenderer = 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].renderCanvas(renderer, children[index], interpolationPercentage, camera, transformMatrix);
+    }
+};
+
+module.exports = ContainerCanvasRenderer;

src/gameobjects/container/ContainerCreator.js

@@ -0,0 +1,18 @@
+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);
+    var add = GetAdvancedValue(config, 'add', true);
+    var container = new Container(this.scene, x, y);
+
+    if (add)
+    {
+        this.scene.sys.displayList.add(container);
+    }
+    
+    return container;
+});