- Particle Emitter canvas renderer

- Camera Effects resets blend mode to avoid bug when dealing with custom blended game objects

Author: bitnenfer

v3/src/gameobjects/emitter/ParticleEmitterCanvasRenderer.js

@@ -1,6 +1,55 @@
-var ParticleEmitterCanvasRenderer = function (renderer, src, interpolationPercentage, camera)
+var GameObject = require('../GameObject');
+
+var ParticleEmitterCanvasRenderer = function (renderer, emitter, interpolationPercentage, camera)
 {
+    var particles = emitter.alive;
+    var length = particles.length;
+    var ctx = renderer.currentContext;
+    var frame = emitter.frame;
+    var dx = frame.x;
+    var dy = frame.y;
+    var width = frame.width;
+    var height = frame.height;
+    var ox = width * 0.5;
+    var oy = height * 0.5;
+    var lastAlpha = ctx.globalAlpha;
+    var cd = frame.canvasData;
+    var cameraScrollX = camera.scrollX * emitter.scrollFactorX;
+    var cameraScrollY = camera.scrollY * emitter.scrollFactorY;
+
+    if (length === 0 || GameObject.RENDER_MASK !== emitter.renderFlags || (emitter.cameraFilter > 0 && (emitter.cameraFilter & camera._id)))
+    {
+        return;
+    }
+
+    if (renderer.currentBlendMode !== emitter.blendMode)
+    {
+        renderer.currentBlendMode = emitter.blendMode;
+        ctx.globalCompositeOperation = renderer.blendModes[emitter.blendMode];
+    }
+
+    for (var index = 0; index < length; ++index)
+    {
+        var particle = particles[index];
+        var x = -ox;
+        var y = -oy;
+        var scaleX = particle.scaleX;
+        var scaleY = particle.scaleY;
+        var rotation = particle.rotation;
+        var color = particle.color;
+        var alpha = ((color >> 24) & 0xFF) / 255.0;
+
+        ctx.globalAlpha = alpha;
+    
+        ctx.save();
+        ctx.translate(particle.x - cameraScrollX, particle.y - cameraScrollY);
+        ctx.rotate(rotation);
+        ctx.scale(scaleX, scaleY);
+        ctx.drawImage(frame.source.image, cd.sx, cd.sy, cd.sWidth, cd.sHeight, x, y, cd.dWidth, cd.dHeight);
+        ctx.restore();
+    }
 
+    ctx.globalAlpha = lastAlpha;
 };
 
 module.exports = ParticleEmitterCanvasRenderer;

v3/src/renderer/canvas/CanvasRenderer.js

@@ -227,6 +227,8 @@ var CanvasRenderer = new Class({
 
         if (camera._fadeAlpha > 0 || camera._flashAlpha > 0)
         {
+            ctx.globalCompositeOperation = 'source-over';
+            
             // fade rendering
             ctx.fillStyle = 'rgb(' + (camera._fadeRed * 255) + ',' + (camera._fadeGreen * 255) + ',' + (camera._fadeBlue * 255) + ')';
             ctx.globalAlpha = camera._fadeAlpha;

v3/src/renderer/webgl/WebGLRenderer.js

@@ -500,8 +500,7 @@ var WebGLRenderer = new Class({
         if (camera._fadeAlpha > 0 || camera._flashAlpha > 0)
         {
             this.setRenderTarget(null);
-
-            quadBatch.bind();
+            this.setBlendMode(BlendModes.NORMAL);
 
             // fade rendering
             quadBatch.add(

v3/src/renderer/webgl/renderers/particlerenderer/ParticleRenderer.js

@@ -215,6 +215,8 @@ var ParticleRenderer = new Class({
         var tempMatrix = this.tempMatrix;
         var tempMatrixMatrix = tempMatrix.matrix;
         var particleOffset = 0;
+        var cameraScrollX = camera.scrollX * emitter.scrollFactorX;
+        var cameraScrollY = camera.scrollY * emitter.scrollFactorY;
 
         if (length === 0) return;
 
@@ -235,7 +237,7 @@ var ParticleRenderer = new Class({
                 var xw = x + width;
                 var yh = y + height;
 
-                tempMatrix.applyITRS(particle.x, particle.y, rotation, scaleX, scaleY);
+                tempMatrix.applyITRS(particle.x - cameraScrollX, particle.y - cameraScrollY, rotation, scaleX, scaleY);
 
                 var sra = tempMatrixMatrix[0];
                 var srb = tempMatrixMatrix[1];