Fixed flip on blitter game object. Added camera scrollFactor to blitter canvas renderer

Author: bitnenfer

src/gameobjects/blitter/BlitterCanvasRenderer.js

@@ -26,21 +26,46 @@ var BlitterCanvasRenderer = function (renderer, src, interpolationPercentage, ca
     renderer.setBlendMode(src.blendMode);
 
     var ca = renderer.currentAlpha;
+    var ctx = renderer.gameContext;
+    var cameraScrollX = src.x - camera.scrollX * src.scrollFactorX;
+    var cameraScrollY = src.y - camera.scrollY * src.scrollFactorY;
 
     //  Render bobs
     for (var i = 0; i < list.length; i++)
     {
         var bob = list[i];
+        var flip = (bob.flipX || bob.flipY);
+        var frame = bob.frame;
+        var cd = frame.canvasData;
+        var dx = frame.x;
+        var dy = frame.y;
+        var fx = 1;
+        var fy = 1;
 
-        if (ca !== bob.alpha)
+        if (!flip)
         {
-            ca = renderer.setAlpha(bob.alpha);
+            renderer.blitImage(dx + bob.x + cameraScrollX, dy + bob.y + cameraScrollY, bob.frame);
         }
+        else
+        {
+            if (bob.flipX)
+            {
+                fx = -1;
+                dx -= cd.dWidth;
+            }
 
-        // var x = src.x + bob.x + frame.x - cameraScrollX + ((frame.width) * (bob.flipX ? 1 : 0));
-        // var y = src.y + bob.y + frame.y - cameraScrollY + ((frame.height) * (bob.flipY ? 1 : 0));
+            if (bob.flipY)
+            {
+                fy = -1;
+                dy -= cd.dHeight;
+            }
 
-        renderer.blitImage(src.x + bob.x, src.y + bob.y, bob.frame, camera);
+            ctx.save();
+            ctx.translate(bob.x + cameraScrollX, bob.y + cameraScrollY);
+            ctx.scale(fx, fy);
+            ctx.drawImage(frame.source.image, cd.sx, cd.sy, cd.sWidth, cd.sHeight, dx, dy, cd.dWidth, cd.dHeight);
+            ctx.restore();
+        }
     }
 };
 

src/renderer/canvas/utils/BlitImage.js

@@ -1,6 +1,6 @@
 
 //  No scaling, anchor, rotation or effects, literally draws the frame directly to the canvas
-var BlitImage = function (dx, dy, frame, camera)
+var BlitImage = function (dx, dy, frame)
 {
     var ctx = this.currentContext;
     var cd = frame.canvasData;
@@ -11,8 +11,8 @@ var BlitImage = function (dx, dy, frame, camera)
         cd.sy,
         cd.sWidth,
         cd.sHeight,
-        dx - camera.scrollX,
-        dy - camera.scrollY,
+        dx,
+        dy,
         cd.dWidth,
         cd.dHeight
     );

src/renderer/webgl/pipelines/TextureTintPipeline.js

@@ -285,8 +285,8 @@ var TextureTintPipeline = new Class({
         var cameraScrollY = camera.scrollY * blitter.scrollFactorY;
         var batchCount = Math.ceil(length / this.maxQuads);
         var batchOffset = 0;
-        var blitterX = blitter.x;
-        var blitterY = blitter.y;
+        var blitterX = blitter.x - cameraScrollX;
+        var blitterY = blitter.y - cameraScrollY;
 
         for (var batchIndex = 0; batchIndex < batchCount; ++batchIndex)
         {
@@ -305,8 +305,8 @@ var TextureTintPipeline = new Class({
                 var flipY = bob.flipY;
                 var width = frame.width * (flipX ? -1.0 : 1.0); 
                 var height = frame.height * (flipY ? -1.0 : 1.0);
-                var x = blitterX + bob.x + frame.x - cameraScrollX + (width * ((flipX) ? 1.0 : 0.0));
-                var y = blitterY + bob.y + frame.y - cameraScrollY + (height * ((flipY) ? 1.0 : 0.0));
+                var x = blitterX + bob.x + frame.x + (frame.width * ((flipX) ? 1.0 : 0.0));
+                var y = blitterY + bob.y + frame.y + (frame.height * ((flipY) ? 1.0 : 0.0));
                 var xw = x + width;                
                 var yh = y + height;
                 var tx0 = x * a + y * c + e;