fixed dynamic layer rendering

src/tilemaps/components/CullTiles.js

@@ -22,6 +22,7 @@ var SnapCeil = require('../../math/snap/SnapCeil');
  */
 var CullTiles = function (layer, camera, outputArray, renderOrder)
 {
+    
     if (outputArray === undefined) { outputArray = []; }
     if (renderOrder === undefined) { renderOrder = 0; }
 
@@ -44,104 +45,201 @@ var CullTiles = function (layer, camera, outputArray, renderOrder)
     var drawRight = mapWidth;
     var drawTop = 0;
     var drawBottom = mapHeight;
+    var inIsoBounds = function (x,y) { return true;}
+    if (!tilemapLayer.skipCull && tilemapLayer.scrollFactorX === 1 && tilemapLayer.scrollFactorY === 1)  {
+        if (layer.orientation == "orthogonal") {
+            //  Camera world view bounds, snapped for scaled tile size
+            //  Cull Padding values are given in tiles, not pixels
 
-    if (!tilemapLayer.skipCull && tilemapLayer.scrollFactorX === 1 && tilemapLayer.scrollFactorY === 1)
+            var boundsLeft   = SnapFloor(camera.worldView.x - tilemapLayer.x, tileW, 0, true) - tilemapLayer.cullPaddingX;
-    {
+            var boundsRight  = SnapCeil(camera.worldView.right - tilemapLayer.x, tileW, 0, true) + tilemapLayer.cullPaddingX;
-        //  Camera world view bounds, snapped for scaled tile size
+            var boundsTop    = SnapFloor(camera.worldView.y - tilemapLayer.y, tileH, 0, true) - tilemapLayer.cullPaddingY;
-        //  Cull Padding values are given in tiles, not pixels
+            var boundsBottom = SnapCeil(camera.worldView.bottom - tilemapLayer.y, tileH, 0, true) + tilemapLayer.cullPaddingY;
-
-        var boundsLeft = SnapFloor(camera.worldView.x - tilemapLayer.x, tileW, 0, true) - tilemapLayer.cullPaddingX;
-        var boundsRight = SnapCeil(camera.worldView.right - tilemapLayer.x, tileW, 0, true) + tilemapLayer.cullPaddingX;
-        var boundsTop = SnapFloor(camera.worldView.y - tilemapLayer.y, tileH, 0, true) - tilemapLayer.cullPaddingY;
-        var boundsBottom = SnapCeil(camera.worldView.bottom - tilemapLayer.y, tileH, 0, true) + tilemapLayer.cullPaddingY;
-
-        drawLeft = Math.max(0, boundsLeft);
-        drawRight = Math.min(mapWidth, boundsRight);
-        drawTop = Math.max(0, boundsTop);
-        drawBottom = Math.min(mapHeight, boundsBottom);
-    }
 
+            drawLeft = Math.max(0, boundsLeft);
+            drawRight = Math.min(mapWidth, boundsRight);
+            drawTop = Math.max(0, boundsTop);
+            drawBottom = Math.min(mapHeight, boundsBottom);
+        } else if (layer.orientation == "isometric") {
+            inIsoBounds = function (x,y){
+                var pos = tilemapLayer.tileToWorldXY(x,y,undefined,camera)
+                return (pos.x > camera.worldView.x && pos.x < camera.worldView.right) && (pos.y > camera.worldView.y && pos.y <  camera.worldView.bottom) 
+            }
+        }
+    } 
     var x;
     var y;
     var tile;
 
-    if (renderOrder === 0)
-    {
-        //  right-down
 
-        for (y = drawTop; y < drawBottom; y++)
+    if (layer.orientation == "orthogonal") {
+
+        if (renderOrder === 0)
         {
-            for (x = drawLeft; mapData[y] && x < drawRight; x++)
+            //  right-down
+
+            for (y = drawTop; y < drawBottom; y++)
             {
-                tile = mapData[y][x];
+                for (x = drawLeft; mapData[y] && x < drawRight; x++)
-
-                if (!tile || tile.index === -1 || !tile.visible || tile.alpha === 0)
                 {
-                    continue;
+                    tile = mapData[y][x];
-                }
 
-                outputArray.push(tile);
+                    if (!tile || tile.index === -1 || !tile.visible || tile.alpha === 0)
+                    {
+                        continue;
+                    }
+
+                    outputArray.push(tile);
+                }
             }
         }
-    }
+        else if (renderOrder === 1)
-    else if (renderOrder === 1)
-    {
-        //  left-down
-
-        for (y = drawTop; y < drawBottom; y++)
         {
-            for (x = drawRight; mapData[y] && x >= drawLeft; x--)
+            //  left-down
+
+            for (y = drawTop; y < drawBottom; y++)
             {
-                tile = mapData[y][x];
+                for (x = drawRight; mapData[y] && x >= drawLeft; x--)
-
-                if (!tile || tile.index === -1 || !tile.visible || tile.alpha === 0)
                 {
-                    continue;
+                    tile = mapData[y][x];
-                }
 
-                outputArray.push(tile);
+                    if (!tile || tile.index === -1 || !tile.visible || tile.alpha === 0)
+                    {
+                        continue;
+                    }
+
+                    outputArray.push(tile);
+                }
             }
         }
-    }
+        else if (renderOrder === 2)
-    else if (renderOrder === 2)
-    {
-        //  right-up
-
-        for (y = drawBottom; y >= drawTop; y--)
         {
-            for (x = drawLeft; mapData[y] && x < drawRight; x++)
+            //  right-up
+
+            for (y = drawBottom; y >= drawTop; y--)
             {
-                tile = mapData[y][x];
+                for (x = drawLeft; mapData[y] && x < drawRight; x++)
-
-                if (!tile || tile.index === -1 || !tile.visible || tile.alpha === 0)
                 {
-                    continue;
+                    tile = mapData[y][x];
-                }
 
-                outputArray.push(tile);
+                    if (!tile || tile.index === -1 || !tile.visible || tile.alpha === 0)
+                    {
+                        continue;
+                    }
+
+                    outputArray.push(tile);
+                }
             }
         }
-    }
+        else if (renderOrder === 3)
-    else if (renderOrder === 3)
-    {
-        //  left-up
-
-        for (y = drawBottom; y >= drawTop; y--)
         {
-            for (x = drawRight; mapData[y] && x >= drawLeft; x--)
+            //  left-up
+
+            for (y = drawBottom; y >= drawTop; y--)
             {
-                tile = mapData[y][x];
+                for (x = drawRight; mapData[y] && x >= drawLeft; x--)
-
-                if (!tile || tile.index === -1 || !tile.visible || tile.alpha === 0)
                 {
-                    continue;
+                    tile = mapData[y][x];
-                }
 
-                outputArray.push(tile);
+                    if (!tile || tile.index === -1 || !tile.visible || tile.alpha === 0)
+                    {
+                        continue;
+                    }
+
+                    outputArray.push(tile);
+                }
             }
         }
+    } else if (layer.orientation == "isometric") {
+         if (renderOrder === 0)
+        {
+            //  right-down
+
+            for (y = drawTop; y < drawBottom; y++)
+            {
+                for (x = drawLeft; mapData[y] && x < drawRight; x++)
+                {
+                    if (inIsoBounds(x,y)) {
+                        tile = mapData[y][x];
+
+                        if (!tile || tile.index === -1 || !tile.visible || tile.alpha === 0)
+                        {
+                            continue;
+                        }
+    
+                        outputArray.push(tile);
+                    }
+                    
+                }
+            }
+        }
+        else if (renderOrder === 1)
+        {
+            //  left-down
+
+            for (y = drawTop; y < drawBottom; y++)
+            {
+                for (x = drawRight; mapData[y] && x >= drawLeft; x--)
+                {
+                     if (inIsoBounds(x,y)) {
+                        tile = mapData[y][x];
+
+                        if (!tile || tile.index === -1 || !tile.visible || tile.alpha === 0)
+                        {
+                            continue;
+                        }
+    
+                        outputArray.push(tile);
+                    }
+                }
+            }
+        }
+        else if (renderOrder === 2)
+        {
+            //  right-up
+
+            for (y = drawBottom; y >= drawTop; y--)
+            {
+                for (x = drawLeft; mapData[y] && x < drawRight; x++)
+                {
+                     if (inIsoBounds(x,y)) {
+                        tile = mapData[y][x];
+
+                        if (!tile || tile.index === -1 || !tile.visible || tile.alpha === 0)
+                        {
+                            continue;
+                        }
+    
+                        outputArray.push(tile);
+                    }
+                }
+            }
+        }
+        else if (renderOrder === 3)
+        {
+            //  left-up
+
+            for (y = drawBottom; y >= drawTop; y--)
+            {
+                for (x = drawRight; mapData[y] && x >= drawLeft; x--)
+                {
+                     if (inIsoBounds(x,y)) {
+                        tile = mapData[y][x];
+
+                        if (!tile || tile.index === -1 || !tile.visible || tile.alpha === 0)
+                        {
+                            continue;
+                        }
+    
+                        outputArray.push(tile);
+                    }
+                }
+            }
+        }
+
     }
 
+
     tilemapLayer.tilesDrawn = outputArray.length;
     tilemapLayer.tilesTotal = mapWidth * mapHeight;
 

src/tilemaps/components/GetTilesWithinWorldXY.js

@@ -7,6 +7,7 @@
 var GetTilesWithin = require('./GetTilesWithin');
 var WorldToTileX = require('./WorldToTileX');
 var WorldToTileY = require('./WorldToTileY');
+var WorldToTileXY = require('./WorldToTileXY');
 
 /**
  * Gets the tiles in the given rectangular area (in world coordinates) of the layer.

src/tilemaps/components/TileToWorldXY.js

@@ -30,15 +30,35 @@ var TileToWorldXY = function (tileX, tileY, point, camera, layer)
     var orientation = layer.orientation;
     var tileWidth = layer.baseTileWidth;
     var tileHeight = layer.baseTileHeight;
+    var tilemapLayer = layer.tilemapLayer;
 
     if (point === undefined) { point = new Vector2(0, 0); }
 
+    
+
+
+
     if (orientation === "orthogonal") {
         point.x = TileToWorldX(tileX, camera, layer, orientation);
         point.y = TileToWorldY(tileY, camera, layer, orientation);
     } else if (orientation === "isometric") {
-        point.x = (tileX - tileY) * (tileWidth/2);
+
-        point.y = (tileX + tileY) * (tileHeight/2);
+        var layerWorldX = 0;
+        var layerWorldY = 0;
+
+        if (tilemapLayer)
+        {
+            if (camera === undefined) { camera = tilemapLayer.scene.cameras.main; }
+            layerWorldX = tilemapLayer.x + camera.scrollX * (1 - tilemapLayer.scrollFactorX);
+            tileWidth *= tilemapLayer.scaleX;
+            layerWorldY = (tilemapLayer.y + camera.scrollY * (1 - tilemapLayer.scrollFactorY));
+            tileHeight *= tilemapLayer.scaleY;
+        }
+
+
+
+        point.x =  layerWorldX + (tileX - tileY) * (tileWidth/2);
+        point.y =  layerWorldY + (tileX + tileY) * (tileHeight/2);
  
     }
     

src/tilemaps/components/WorldToTileXY.js

@@ -46,8 +46,9 @@ var WorldToTileXY = function (worldX, worldY, snapToFloor, point, camera, layer)
 
             // Find the world position relative to the static or dynamic layer's top left origin,
             // factoring in the camera's vertical scroll
+            // console.log(1,worldY)
             worldY = worldY - (tilemapLayer.y + camera.scrollY * (1 - tilemapLayer.scrollFactorY));
-
+            // console.log(worldY)
             tileHeight *= tilemapLayer.scaleY;
 
             // Find the world position relative to the static or dynamic layer's top left origin,
@@ -62,8 +63,8 @@ var WorldToTileXY = function (worldX, worldY, snapToFloor, point, camera, layer)
             : ((worldX/(tileWidth/2) + worldY/(tileHeight/2))/2);
 
         point.y = snapToFloor   
-            ? Math.floor(worldY/(tileHeight/2) - (worldX/(tileWidth/2))/2) 
+            ? Math.floor((worldY/(tileHeight/2) - worldX/(tileWidth/2))/2) 
-            : (worldY/(tileHeight/2) - (worldX/(tileWidth/2))/2);
+            : ((worldY/(tileHeight/2) - worldX/(tileWidth/2))/2);
     }
 
   

src/tilemaps/dynamiclayer/DynamicTilemapLayerCanvasRenderer.js

@@ -89,8 +89,19 @@ var DynamicTilemapLayerCanvasRenderer = function (renderer, src, interpolationPe
 
         if (tileTexCoords)
         {
-            var halfWidth = tile.width / 2;
+            var width = 0;
-            var halfHeight = tile.height / 2;
+            var height = 0;
+
+            if (src.layer.orientation === "isometric") {
+                // here we use the tileset width and height to fix problems with isometric map types
+                width = tileset.tileWidth;
+                width = tileset.tileHeight;
+            } else {
+               width = tile.width;
+               height = tile.width
+            }
+            halfWidth = width / 2;
+            halfHeight = height / 2;
     
             ctx.save();
 
@@ -107,13 +118,13 @@ var DynamicTilemapLayerCanvasRenderer = function (renderer, src, interpolationPe
             }
     
             ctx.globalAlpha = alpha * tile.alpha;
-    
+            
             ctx.drawImage(
                 image,
                 tileTexCoords.x, tileTexCoords.y,
-                tile.width, tile.height,
+                width, height,
                 -halfWidth, -halfHeight,
-                tile.width, tile.height
+                width, height
             );
     
             ctx.restore();

src/tilemaps/dynamiclayer/DynamicTilemapLayerWebGLRenderer.js

@@ -74,15 +74,29 @@ var DynamicTilemapLayerWebGLRenderer = function (renderer, src, interpolationPer
             {
                 continue;
             }
+            if (src.layer.orientation === "isometric") {
+                // here we use the tileset width and height to fix problems with isometric map types
+            
+                var frameWidth = tileset.tileWidth;
+                var frameHeight = tileset.tileHeight;
+    
+                var frameX = tileTexCoords.x;
+                var frameY = tileTexCoords.y;
+    
+                var tw = tileset.tileWidth * 0.5;
+                var th = tileset.tileHeight * 0.5;
+            } else {
+                var frameWidth = tile.width;
+                var frameHeight = tile.height;
+    
+                var frameX = tileTexCoords.x;
+                var frameY = tileTexCoords.y;
+    
+                var tw = tile.width * 0.5;
+                var th = tile.height * 0.5;
+            }
 
-            var frameWidth = tile.width;
+          
-            var frameHeight = tile.height;
-
-            var frameX = tileTexCoords.x;
-            var frameY = tileTexCoords.y;
-
-            var tw = tile.width * 0.5;
-            var th = tile.height * 0.5;
 
             var tint = getTint(tile.tint, alpha * tile.alpha);
 
@@ -91,7 +105,7 @@ var DynamicTilemapLayerWebGLRenderer = function (renderer, src, interpolationPer
                 texture,
                 texture.width, texture.height,
                 x + ((tw + tile.pixelX) * sx), y + ((th + tile.pixelY) * sy),
-                tile.width, tile.height,
+                frameWidth, frameHeight,
                 sx, sy,
                 tile.rotation,
                 tile.flipX, tile.flipY,