The ParticleManagerWebGLRenderer now calculates its transform matrix differently, splitting out the parent matrix and factoring in follow offsets separately. This fixes numerous issues with particle emitters being incorrectly offset when added to Containers. Fix phaserjs#5319 phaserjs#5195 phaserjs#4739 phaserjs#4691

Author: photonstorm

src/gameobjects/particles/Particle.js

@@ -301,11 +301,6 @@ var Particle = new Class({
 
         if (x === undefined)
         {
-            if (emitter.follow)
-            {
-                this.x += emitter.follow.x + emitter.followOffset.x;
-            }
-
             this.x += emitter.x.onEmit(this, 'x');
         }
         else
@@ -315,11 +310,6 @@ var Particle = new Class({
 
         if (y === undefined)
         {
-            if (emitter.follow)
-            {
-                this.y += emitter.follow.y + emitter.followOffset.y;
-            }
-
             this.y += emitter.y.onEmit(this, 'y');
         }
         else

src/gameobjects/particles/ParticleManagerWebGLRenderer.js

@@ -35,9 +35,20 @@ var ParticleManagerWebGLRenderer = function (renderer, emitterManager, camera, p
     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);
+    var managerMatrix = pipeline._tempMatrix4;
 
-    camMatrix.multiply(managerMatrix);
+    if (parentMatrix)
+    {
+        managerMatrix.loadIdentity();
+        managerMatrix.multiply(parentMatrix);
+        managerMatrix.translate(emitterManager.x, emitterManager.y);
+        managerMatrix.rotate(emitterManager.rotation);
+        managerMatrix.scale(emitterManager.scaleX, emitterManager.scaleY);
+    }
+    else
+    {
+        managerMatrix.applyITRS(emitterManager.x, emitterManager.y, emitterManager.rotation, emitterManager.scaleX, emitterManager.scaleY);
+    }
 
     var roundPixels = camera.roundPixels;
     var texture = emitterManager.defaultFrame.glTexture;
@@ -56,23 +67,13 @@ var ParticleManagerWebGLRenderer = function (renderer, emitterManager, camera, p
             continue;
         }
 
-        var scrollX = camera.scrollX * emitter.scrollFactorX;
-        var scrollY = camera.scrollY * emitter.scrollFactorY;
+        var followX = (emitter.follow) ? emitter.follow.x + emitter.followOffset.x : 0;
+        var followY = (emitter.follow) ? emitter.follow.y + emitter.followOffset.y : 0;
 
-        if (parentMatrix)
-        {
-            //  Multiply the camera by the parent matrix
-            camMatrix.multiplyWithOffset(parentMatrix, -scrollX, -scrollY);
+        var scrollFactorX = emitter.scrollFactorX;
+        var scrollFactorY = emitter.scrollFactorY;
 
-            scrollX = 0;
-            scrollY = 0;
-        }
-
-        if (renderer.setBlendMode(emitter.blendMode))
-        {
-            //  Rebind the texture if we've flushed
-            // pipeline.setTexture2D(texture, 0);
-        }
+        renderer.setBlendMode(emitter.blendMode);
 
         if (emitter.mask)
         {
@@ -94,20 +95,26 @@ var ParticleManagerWebGLRenderer = function (renderer, emitterManager, camera, p
                 continue;
             }
 
-            var frame = particle.frame;
+            particleMatrix.applyITRS(particle.x, particle.y, particle.rotation, particle.scaleX, particle.scaleY);
 
-            var x = -(frame.halfWidth);
-            var y = -(frame.halfHeight);
-            var xw = x + frame.width;
-            var yh = y + frame.height;
+            camMatrix.copyFrom(camera.matrix);
 
-            particleMatrix.applyITRS(0, 0, particle.rotation, particle.scaleX, particle.scaleY);
+            camMatrix.multiplyWithOffset(managerMatrix, followX + -camera.scrollX * scrollFactorX, followY + -camera.scrollY * scrollFactorY);
 
-            particleMatrix.e = particle.x - scrollX;
-            particleMatrix.f = particle.y - scrollY;
+            //  Undo the camera scroll
+            particleMatrix.e = particle.x;
+            particleMatrix.f = particle.y;
 
+            //  Multiply by the particle matrix, store result in calcMatrix
             camMatrix.multiply(particleMatrix, calcMatrix);
 
+            var frame = particle.frame;
+
+            var x = -frame.halfWidth;
+            var y = -frame.halfHeight;
+            var xw = x + frame.width;
+            var yh = y + frame.height;
+
             var tx0 = calcMatrix.getX(x, y);
             var ty0 = calcMatrix.getY(x, y);