From 6d1b17258bd21ccdf48e5c43da48b2dc458c5d15 Mon Sep 17 00:00:00 2001
From: Michael Hadley <michaelwesthadley@gmail.com>
Date: Tue, 14 Nov 2017 20:45:05 -0600
Subject: [PATCH] Add flip capability to dynamic webgl & canvas tilemap
 renderers

---
 .../DynamicTilemapLayerCanvasRenderer.js          | 15 ++++++++++++++-
 .../DynamicTilemapLayerWebGLRenderer.js           |  7 ++++++-
 .../webgl/renderers/spritebatch/SpriteBatch.js    |  4 ++--
 3 files changed, 22 insertions(+), 4 deletions(-)

diff --git a/v3/src/gameobjects/tilemap/dynamiclayer/DynamicTilemapLayerCanvasRenderer.js b/v3/src/gameobjects/tilemap/dynamiclayer/DynamicTilemapLayerCanvasRenderer.js
index e2f3beb1b..570940787 100644
--- a/v3/src/gameobjects/tilemap/dynamiclayer/DynamicTilemapLayerCanvasRenderer.js
+++ b/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();
diff --git a/v3/src/gameobjects/tilemap/dynamiclayer/DynamicTilemapLayerWebGLRenderer.js b/v3/src/gameobjects/tilemap/dynamiclayer/DynamicTilemapLayerWebGLRenderer.js
index 21469fad1..102de073b 100644
--- a/v3/src/gameobjects/tilemap/dynamiclayer/DynamicTilemapLayerWebGLRenderer.js
+++ b/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
         );
diff --git a/v3/src/renderer/webgl/renderers/spritebatch/SpriteBatch.js b/v3/src/renderer/webgl/renderers/spritebatch/SpriteBatch.js
index 77a9a3ca8..14fb8f9cb 100644
--- a/v3/src/renderer/webgl/renderers/spritebatch/SpriteBatch.js
+++ b/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];