Static Tilemap Layers now support tile rotation and flipping. Previously this was a feature only for Dynamic Tilemap Layers, but now both have it. Close phaserjs#4037

Author: photonstorm

CHANGELOG.md

@@ -10,6 +10,7 @@
 * `debugShowConvexHulls` is a new Matter Physics debug option that allows you to control if the convex hull of a body is drawn to the debug Graphic. The default is `false`.
 * `debugConvexHullColor` is a new Matter Physics debug option that lets you set the color of the convex hull, if being drawn to the debug Graphic.
 * `debugShowSleeping` is a new Matter Physics debug option that lets you draw sleeping bodies at 50% opacity.
+* Static Tilemap Layers now support tile rotation and flipping. Previously this was a feature only for Dynamic Tilemap Layers, but now both have it. Close #4037 (thanks @thisredone)
 
 ### Updates
 

src/tilemaps/staticlayer/StaticTilemapLayer.js

@@ -10,6 +10,7 @@ var CONST = require('../../const');
 var GameObject = require('../../gameobjects/GameObject');
 var StaticTilemapLayerRender = require('./StaticTilemapLayerRender');
 var TilemapComponents = require('../components');
+var TransformMatrix = require('../../gameobjects/components/TransformMatrix');
 var Utils = require('../../renderer/webgl/Utils');
 
 /**
@@ -301,6 +302,16 @@ var StaticTilemapLayer = new Class({
          */
         this._renderOrder = 0;
 
+        /**
+         * A temporary Transform Matrix, re-used internally during batching.
+         *
+         * @name Phaser.Tilemaps.StaticTilemapLayer#_tempMatrix
+         * @private
+         * @type {Phaser.GameObjects.Components.TransformMatrix}
+         * @since 3.14.0
+         */
+        this._tempMatrix = new TransformMatrix();
+
         this.setAlpha(this.layer.alpha);
         this.setPosition(x, y);
         this.setOrigin();
@@ -527,11 +538,6 @@ var StaticTilemapLayer = new Class({
      */
     batchTile: function (vOffset, tile, tileset, width, height, camera)
     {
-        var tx = tile.pixelX;
-        var ty = tile.pixelY;
-        var txw = tx + tile.width;
-        var tyh = ty + tile.height;
-
         var texCoords = tileset.getTileTextureCoordinates(tile.index);
 
         if (!texCoords)
@@ -544,16 +550,47 @@ var StaticTilemapLayer = new Class({
         var u1 = (texCoords.x + tile.width) / width;
         var v1 = (texCoords.y + tile.height) / height;
 
+        var matrix = this._tempMatrix;
+
+        var tileWidth = tile.width;
+        var tileHeight = tile.height;
+
+        var halfTileWidth = tileWidth / 2;
+        var halfTileHeight = tileHeight / 2;
+
+        var x = -halfTileWidth;
+        var y = -halfTileHeight;
+
+        if (tile.flipX)
+        {
+            tileWidth *= -1;
+            x += tile.width;
+        }
+
+        if (tile.flipY)
+        {
+            tileHeight *= -1;
+            y += tile.height;
+        }
+
+        var xw = x + tileWidth;
+        var yh = y + tileHeight;
+
+        matrix.applyITRS(halfTileWidth + tile.pixelX, halfTileHeight + tile.pixelY, tile.rotation, 1, 1);
+
         var tint = Utils.getTintAppendFloatAlpha(0xffffff, camera.alpha * this.alpha * tile.alpha);
 
-        var tx0 = tx;
-        var ty0 = ty;
-        var tx1 = tx;
-        var ty1 = tyh;
-        var tx2 = txw;
-        var ty2 = tyh;
-        var tx3 = txw;
-        var ty3 = ty;
+        var tx0 = matrix.getX(x, y);
+        var ty0 = matrix.getY(x, y);
+
+        var tx1 = matrix.getX(x, yh);
+        var ty1 = matrix.getY(x, yh);
+
+        var tx2 = matrix.getX(xw, yh);
+        var ty2 = matrix.getY(xw, yh);
+
+        var tx3 = matrix.getX(xw, y);
+        var ty3 = matrix.getY(xw, y);
 
         if (camera.roundPixels)
         {

src/tilemaps/staticlayer/StaticTilemapLayerCanvasRenderer.js

@@ -68,6 +68,8 @@ var StaticTilemapLayerCanvasRenderer = function (renderer, src, interpolationPer
 
     calcMatrix.copyToContext(ctx);
 
+    var alpha = camera.alpha * src.alpha;
+
     ctx.globalAlpha = camera.alpha * src.alpha;
 
     for (var i = 0; i < tileCount; i++)
@@ -78,13 +80,34 @@ var StaticTilemapLayerCanvasRenderer = function (renderer, src, interpolationPer
 
         if (tileTexCoords)
         {
+            var halfWidth = tile.width / 2;
+            var halfHeight = tile.height / 2;
+    
+            ctx.save();
+
+            ctx.translate(tile.pixelX + halfWidth, tile.pixelY + halfHeight);
+
+            if (tile.rotation !== 0)
+            {
+                ctx.rotate(tile.rotation);
+            }
+    
+            if (tile.flipX || tile.flipY)
+            {
+                ctx.scale((tile.flipX) ? -1 : 1, (tile.flipY) ? -1 : 1);
+            }
+
+            ctx.globalAlpha = alpha * tile.alpha;
+    
             ctx.drawImage(
                 image,
                 tileTexCoords.x, tileTexCoords.y,
                 tile.width, tile.height,
-                tile.pixelX, tile.pixelY,
+                -halfWidth, -halfHeight,
                 tile.width, tile.height
             );
+    
+            ctx.restore();
         }
     }