Add flip capability to dynamic webgl & canvas tilemap renderers

Author: mikewesthad

v3/src/gameobjects/tilemap/dynamiclayer/DynamicTilemapLayerCanvasRenderer.js

@@ -31,15 +31,28 @@ var DynamicTilemapLayerCanvasRenderer = function (renderer, gameObject, interpol
         var tileTexCoords = tileset.getTileTextureCoordinates(tile.index);
         if (tileTexCoords === null) { continue; }
 
+        var halfWidth = tile.width / 2;
+        var halfHeight = tile.height / 2;
+
+        ctx.save();
+        ctx.translate(tile.worldX - halfWidth, tile.worldY - halfHeight);
+
+        if (tile.flipX || tile.flipY)
+        {
+            ctx.scale(tile.flipX ? -1 : 1, tile.flipY ? -1 : 1);
+        }
+
         renderer.setAlpha(gameObject.alpha * tile.alpha);
 
         ctx.drawImage(
             image,
             tileTexCoords.x, tileTexCoords.y,
             tile.width, tile.height,
-            tile.worldX, tile.worldY,
+            -halfWidth, -halfHeight,
             tile.width, tile.height
         );
+
+        ctx.restore();
     }
 
     ctx.restore();

v3/src/gameobjects/tilemap/dynamiclayer/DynamicTilemapLayerWebGLRenderer.js

@@ -30,12 +30,17 @@ var DynamicTilemapLayerWebGLRenderer = function (renderer, gameObject, interpola
         var tileTexCoords = tileset.getTileTextureCoordinates(tile.index);
         if (tileTexCoords === null) { continue; }
 
+        var frameWidth = tile.width * (tile.flipX ? -1 : 1);
+        var frameHeight = tile.height * (tile.flipY ? -1 : 1);
+        var frameX = tileTexCoords.x + (tile.flipX ? tile.width : 0);
+        var frameY = tileTexCoords.y + (tile.flipY ? tile.height : 0);
+
         batch.addTileTextureRect(
             texture,
             x + tile.worldX, y + tile.worldY, tile.width, tile.height, alpha * tile.alpha, tile.tint,
             scrollFactorX, scrollFactorY,
             textureWidth, textureHeight,
-            tileTexCoords.x, tileTexCoords.y, tile.width, tile.height,
+            frameX, frameY, frameWidth, frameHeight,
             camera,
             renderTarget
         );

v3/src/renderer/webgl/renderers/spritebatch/SpriteBatch.js

@@ -385,8 +385,8 @@ var SpriteBatch = new Class({
         // Inset UV coordinates by 0.5px to prevent tile bleeding
         var u0 = (rectX + 0.5) / textureWidth;
         var v0 = (rectY + 0.5) / textureHeight;
-        var u1 = (rectX - 0.5 + width) / textureWidth;
-        var v1 = (rectY - 0.5 + height) / textureHeight;
+        var u1 = (rectX - 0.5 + rectW) / textureWidth;
+        var v1 = (rectY - 0.5 + rectH) / textureHeight;
 
         mva = cameraMatrix[0];
         mvb = cameraMatrix[1];