added staggered support

Author: svipal

dist/phaser-arcade-physics.js

@@ -22,6 +22,8 @@
     "buildfb": "webpack --config config/webpack.fb.config.js",
     "watchfb": "webpack --config config/webpack.fb.config.js --watch",
     "dist": "webpack --config config/webpack.dist.config.js",
+    "distT": "webpack --config config/webpack.dist.config.js && npm run toT",
+    "toT": "@powershell Copy-Item ./dist/phaser.min.js ../phasertest/phaser.min.js",
     "distfb": "webpack --config config/webpack.fb.dist.config.js",
     "distfull": "npm run dist && npm run distfb",
     "plugin.cam3d": "webpack --config plugins/camera3d/webpack.config.js",

dist/phaser-arcade-physics.min.js

@@ -714,7 +714,6 @@ var Tile = new Class({
             this.pixelX = this.x * this.baseWidth;
             this.pixelY = this.y * this.baseHeight;
 
-            // console.log("orthopix "+this.pixelX+","+this.pixelY)
         }
         else if (this.layer.orientation === 'isometric')
         {
@@ -723,11 +722,12 @@ var Tile = new Class({
             this.pixelX = (this.x - this.y) * this.baseWidth * 0.5;
             this.pixelY = (this.x + this.y) * this.baseHeight * 0.5;
 
-            // console.log("isopix from",this.x, this.y,"to", this.pixelX+","+this.pixelY)
         }
-        else
+        else if (this.layer.orientation === 'staggered')
         {
-            // console.warn("this map orientation is is.layer.orientation)
+            this.pixelX = this.x * this.baseWidth + this.y % 2 * (this.baseWidth / 2);
+            this.pixelY = this.y * (this.baseHeight / 2);
+
         }
 
         // this.pixelY = this.y * this.baseHeight - (this.height - this.baseHeight);

dist/phaser.js

@@ -49,7 +49,7 @@ var CullTiles = function (layer, camera, outputArray, renderOrder)
     var inIsoBounds = function () { return true; };
     if (!tilemapLayer.skipCull && tilemapLayer.scrollFactorX === 1 && tilemapLayer.scrollFactorY === 1)
     {
-        if (layer.orientation === 'orthogonal')
+        if (layer.orientation === 'orthogonal' || layer.orientation === 'staggered')
         {
             //  Camera world view bounds, snapped for scaled tile size
             //  Cull Padding values are given in tiles, not pixels
@@ -62,6 +62,7 @@ var CullTiles = function (layer, camera, outputArray, renderOrder)
             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')
@@ -84,7 +85,7 @@ var CullTiles = function (layer, camera, outputArray, renderOrder)
     var tile;
 
 
-    if (layer.orientation === 'orthogonal')
+    if (layer.orientation === 'orthogonal' || layer.orientation === 'staggered')
     {
 
         if (renderOrder === 0)

dist/phaser.min.js

@@ -43,7 +43,7 @@ var TileToWorldXY = function (tileX, tileY, point, camera, layer)
         point.x = TileToWorldX(tileX, camera, layer, orientation);
         point.y = TileToWorldY(tileY, camera, layer, orientation);
     }
-    else if (orientation === 'isometric')
+    else if (orientation === 'isometric' || orientation === 'staggered')
     {
 
         var layerWorldX = 0;
@@ -59,9 +59,18 @@ var TileToWorldXY = function (tileX, tileY, point, camera, layer)
         }
 
 
-
-        point.x = layerWorldX + (tileX - tileY) * (tileWidth / 2);
-        point.y = layerWorldY + (tileX + tileY) * (tileHeight / 2);
+        if (orientation === 'isometric')
+        {
+            point.x = layerWorldX + (tileX - tileY) * (tileWidth / 2);
+            point.y = layerWorldY + (tileX + tileY) * (tileHeight / 2);
+        }
+        else if (orientation === 'staggered')
+        {
+            // todo
+            point.x = layerWorldX + tileX * tileWidth + tileY % 2 * (tileWidth / 2);
+            point.y = layerWorldY + tileY * (tileHeight / 2);
+        }
+        
 
     }
 

package.json

@@ -36,7 +36,7 @@ var WorldToTileXY = function (worldX, worldY, snapToFloor, point, camera, layer)
         point.x = WorldToTileX(worldX, snapToFloor, camera, layer, orientation);
         point.y = WorldToTileY(worldY, snapToFloor, camera, layer, orientation);
     }
-    else if (orientation === 'isometric')
+    else if (orientation === 'isometric' || orientation === 'staggered')
     {
 
         var tileWidth = layer.baseTileWidth;
@@ -61,18 +61,39 @@ var WorldToTileXY = function (worldX, worldY, snapToFloor, point, camera, layer)
 
             tileWidth *= tilemapLayer.scaleX;
         }
+        
+        if (orientation === 'isometric')
+        {
+            point.x = snapToFloor
+                ? Math.floor((worldX / (tileWidth / 2) + worldY / (tileHeight / 2)) / 2)
+                : ((worldX / (tileWidth / 2) + worldY / (tileHeight / 2)) / 2);
 
-        point.x = snapToFloor
-            ? Math.floor((worldX / (tileWidth / 2) + worldY / (tileHeight / 2)) / 2)
-            : ((worldX / (tileWidth / 2) + worldY / (tileHeight / 2)) / 2);
-
-        point.y = snapToFloor
-            ? Math.floor((worldY / (tileHeight / 2) - worldX / (tileWidth / 2)) / 2)
-            : ((worldY / (tileHeight / 2) - worldX / (tileWidth / 2)) / 2);
+            point.y = snapToFloor
+                ? Math.floor((worldY / (tileHeight / 2) - worldX / (tileWidth / 2)) / 2)
+                : ((worldY / (tileHeight / 2) - worldX / (tileWidth / 2)) / 2);
+        }
+        if (orientation === 'orthogonal')
+        {
+            point.x = snapToFloor
+                ? Math.floor(worldX / tileWidth)
+                : worldX / tileWidth;
+            point.y = snapToFloor
+                ? Math.floor(worldY / tileHeight)
+                : worldY / tileHeight;
+        }
+        else if (orientation === 'staggered')
+        {
+            // implement world to tile staggered
+            point.y = snapToFloor
+                ? Math.floor((worldY / (tileHeight / 2)))
+                : (worldY / (tileHeight / 2));
+            point.x = snapToFloor
+                ? Math.floor((worldX / tileWidth) - (point.y % 2))
+                : (worldX / tileWidth) - (point.y % 2);
+            
+        }
     }
 
-  
-
     return point;
 };
 

src/tilemaps/Tile.js

@@ -92,7 +92,7 @@ var DynamicTilemapLayerCanvasRenderer = function (renderer, src, interpolationPe
             var width = tile.width;
             var height = tile.width;
 
-            if (src.layer.orientation === 'isometric')
+            if (src.layer.orientation === 'isometric' || src.layer.orientation === 'staggered')
             {
                 // we use the tileset width and height because in isometric maps the tileset's height is often different from the tilemap's.
                 width = tileset.tileWidth;