The ParticleEmitterManager now has the Transform component. This means you can now set the position, rotation or scale of the Emitter Manager, and it will influence every Emitter it is rendering. The Managers transform is mixed with that of the Camera. This works in both Canvas and WebGL.

Author: photonstorm

CHANGELOG.md

@@ -48,6 +48,7 @@ The process of managing scissors in the WebGLRenderer has been completely rewrit
 * `TextureManager.getBase64` is a new method that will take a texture frame key and return a base64 encoded version of the frame. You can also provide the image type and encoder options.
 * Global Plugins now have a new optional `data` object, the contents of which are passed to the plugins `init` method. This allows users to pass data directly into a plugin when added in the config: `{ key: 'BankPlugin', plugin: BankPluginV3, start: true, data: { gold: 5000 } }` or when adding a plugin via the `install` method (thanks @samme)
 * You can now play animations in reverse! Use the new `Sprite.anims.playReverse` method to play a pre-defined animation in reverse from its starting frame. Or call `Sprite.anims.reverse` to immediately reverse the flow of an already running animation. Animations running in reverse still count towards the repeat total and respect the yoyo flag (thanks @khaleb85)
+* The `ParticleEmitterManager` now has the Transform component. This means you can now set the position, rotation or scale of the Emitter Manager, and it will influence every Emitter it is rendering. The Managers transform is mixed with that of the Camera. This works in both Canvas and WebGL.
 
 ### Updates
 

src/gameobjects/particles/ParticleEmitterManager.js

@@ -24,6 +24,7 @@ var Render = require('./ParticleManagerRender');
  *
  * @extends Phaser.GameObjects.Components.Depth
  * @extends Phaser.GameObjects.Components.Pipeline
+ * @extends Phaser.GameObjects.Components.Transform
  * @extends Phaser.GameObjects.Components.Visible
  *
  * @param {Phaser.Scene} scene - The Scene to which this Emitter Manager belongs.
@@ -38,6 +39,7 @@ var ParticleEmitterManager = new Class({
     Mixins: [
         Components.Depth,
         Components.Pipeline,
+        Components.Transform,
         Components.Visible,
         Render
     ],

src/gameobjects/particles/ParticleManagerCanvasRenderer.js

@@ -29,13 +29,21 @@ var ParticleManagerCanvasRenderer = function (renderer, emitterManager, interpol
         return;
     }
 
+    var camMatrix = renderer._tempMatrix1.copyFrom(camera.matrix);
+    var managerMatrix = renderer._tempMatrix2.applyITRS(emitterManager.x, emitterManager.y, emitterManager.rotation, emitterManager.scaleX, emitterManager.scaleY);
+
+    camMatrix.multiply(managerMatrix);
+
     var ctx = renderer.currentContext;
+    var matrix = camMatrix.matrix;
 
     ctx.save();
 
+    ctx.transform(matrix[0], matrix[1], matrix[2], matrix[3], matrix[4], matrix[5]);
+
     if (parentMatrix !== undefined)
     {
-        var matrix = parentMatrix.matrix;
+        matrix = parentMatrix.matrix;
 
         ctx.transform(matrix[0], matrix[1], matrix[2], matrix[3], matrix[4], matrix[5]);
     }

src/gameobjects/particles/ParticleManagerWebGLRenderer.js

@@ -4,6 +4,8 @@
  * @license      {@link https://github.com/photonstorm/phaser/blob/master/license.txt|MIT License}
  */
 
+ var Utils = require('../../renderer/webgl/Utils');
+
 /**
  * Renders this Game Object with the WebGL Renderer to the given Camera.
  * The object will not render if any of its renderFlags are set or it is being actively filtered out by the Camera.
@@ -34,14 +36,18 @@ var ParticleManagerWebGLRenderer = function (renderer, emitterManager, interpola
     var camMatrix = pipeline._tempMatrix1.copyFrom(camera.matrix);
     var calcMatrix = pipeline._tempMatrix2;
     var particleMatrix = pipeline._tempMatrix3;
+    var managerMatrix = pipeline._tempMatrix4.applyITRS(emitterManager.x, emitterManager.y, emitterManager.rotation, emitterManager.scaleX, emitterManager.scaleY);
+
+    camMatrix.multiply(managerMatrix);
 
     renderer.setPipeline(pipeline);
 
     var roundPixels = camera.roundPixels;
     var texture = emitterManager.defaultFrame.glTexture;
+    var getTint = Utils.getTintAppendFloatAlphaAndSwap;
 
     pipeline.setTexture2D(texture, 0);
-    
+
     for (var e = 0; e < emittersLength; e++)
     {
         var emitter = emitters[e];
@@ -71,19 +77,20 @@ var ParticleManagerWebGLRenderer = function (renderer, emitterManager, interpola
             pipeline.setTexture2D(texture, 0);
         }
 
-        var tintEffect = false;
+        var tintEffect = 0;
 
         for (var i = 0; i < particleCount; i++)
         {
             var particle = particles[i];
 
-            if (particle.alpha <= 0)
+            var alpha = particle.alpha * camera.alpha;
+
+            if (alpha <= 0)
             {
                 continue;
             }
 
             var frame = particle.frame;
-            var color = particle.color;
 
             var x = -(frame.halfWidth);
             var y = -(frame.halfHeight);
@@ -124,7 +131,9 @@ var ParticleManagerWebGLRenderer = function (renderer, emitterManager, interpola
                 ty3 |= 0;
             }
 
-            if (pipeline.batchQuad(tx0, ty0, tx1, ty1, tx2, ty2, tx3, ty3, frame.u0, frame.v0, frame.u1, frame.v1, color, color, color, color, tintEffect))
+            var tint = getTint(particle.tint, alpha);
+
+            if (pipeline.batchQuad(tx0, ty0, tx1, ty1, tx2, ty2, tx3, ty3, frame.u0, frame.v0, frame.u1, frame.v1, tint, tint, tint, tint, tintEffect))
             {
                 pipeline.setTexture2D(texture, 0);
             }