Bugfix/#450 fix height shift iso

src/GridEnginePhaser/GridCharacterPhaser/GridCharacterPhaser.ts

@@ -288,18 +288,19 @@ export class GridCharacterPhaser {
     );
   }
 
-  private getPaddedPixelDepthSprite(sprite: Phaser.GameObjects.Sprite): number {
+  private getPaddedPixelDepthContainer(
+    container: Phaser.GameObjects.Container,
+  ): number {
     return Utils.shiftPad(
-      sprite.y + sprite.displayHeight,
+      // TODO cache height for performance reasons
+      container.y + container.getBounds().height,
       GridTilemapPhaser.Z_INDEX_PADDING,
     );
   }
 
-  private getPaddedPixelDepthContainer(
-    container: Phaser.GameObjects.Container,
-  ): number {
+  private getPaddedPixelDepthSprite(sprite: Phaser.GameObjects.Sprite): number {
     return Utils.shiftPad(
-      container.y + container.getBounds().height,
+      sprite.y + sprite.displayHeight,
       GridTilemapPhaser.Z_INDEX_PADDING,
     );
   }

src/GridEnginePhaser/GridTilemapPhaser/GridTilemapPhaser.test.ts

@@ -138,14 +138,6 @@ describe("GridTilemapPhaser", () => {
     ]);
     expect(tm.layers[1].tilemapLayer.depth).toBe(0.0000049);
     expect(tm.layers[2].tilemapLayer.depth).toBe(0.0000097);
-
-    function dataToIdArr(data: Phaser.Tilemaps.Tile[][]): number[][] {
-      return data.map((row) =>
-        row.map((obj) => {
-          return obj.properties?.id;
-        }),
-      );
-    }
   });
 
   it("should get scaled tile width", () => {
@@ -255,5 +247,59 @@ describe("GridTilemapPhaser", () => {
         new Vector2(scaledTileWidth * 0.5, scaledTileHeight * 0.5),
       );
     });
+
+    it("should consider 'heightShift' layer", () => {
+      tm = createPhaserTilemapStub(
+        new Map([
+          [
+            "lowerCharLayer",
+            [
+              // prettier-ignore
+              "..",
+              "..",
+            ],
+          ],
+          [
+            "heightShiftLayer",
+            [
+              // prettier-ignore
+              "..",
+              "..",
+            ],
+          ],
+        ]),
+      );
+      tm.orientation = Phaser.Tilemaps.Orientation.ISOMETRIC.toString();
+      tm.layers[1].properties = [
+        ...tm.layers[1].properties,
+        {
+          name: "ge_heightShift",
+          value: 1,
+        },
+      ];
+      gridTilemap = new GridTilemapPhaser(tm);
+
+      expect(tm.layers.length).toBe(3);
+      expect(tm.layers[0].name).toEqual("lowerCharLayer");
+      expect(tm.layers[1].name).toEqual("heightShiftLayer#0");
+      expect(tm.layers[2].name).toEqual("heightShiftLayer#1");
+      expect(dataToIdArr(tm.layers[1].data)).toEqual([
+        [0, undefined],
+        [undefined, undefined],
+      ]);
+      expect(dataToIdArr(tm.layers[2].data)).toEqual([
+        [undefined, 1],
+        [2, undefined],
+      ]);
+      expect(tm.layers[1].tilemapLayer.depth).toBe(0.0000025);
+      expect(tm.layers[2].tilemapLayer.depth).toBe(0.0000049);
+    });
   });
 });
+function dataToIdArr(data: Phaser.Tilemaps.Tile[][]): number[][] {
+  return data.map((row) =>
+    row.map((obj) => {
+      return obj.properties?.id;
+    }),
+  );
+}

src/GridEnginePhaser/GridTilemapPhaser/GridTilemapPhaser.ts

@@ -128,10 +128,13 @@ export class GridTilemapPhaser {
       const newLayer = this.copyLayer(layer, row);
       if (newLayer) {
         newLayer.scale = layer.tilemapLayer.scale;
+        const tileHeight = this.isIsometric()
+          ? this.getTileHeight() / 2
+          : this.getTileHeight();
         newLayer.setDepth(
           offset +
             Utils.shiftPad(
-              (row + heightShift) * this.getTileHeight() +
+              (row + heightShift) * tileHeight +
                 makeHigherThanCharWhenOnSameLevel,
               GridTilemapPhaser.Z_INDEX_PADDING,
             ),
@@ -168,8 +171,15 @@ export class GridTilemapPhaser {
     // Somehow phaser does not catch the name through the createBlankLayer
     // method.
     newLayer.name = name;
-    for (let col = 0; col < layerData.width; col++) {
-      newLayer.putTileAt(layerData.data[row][col], col, row);
+    if (this.isIsometric()) {
+      for (let r = row; r >= 0; r--) {
+        const col = row - r;
+        newLayer.putTileAt(layerData.data[r][col], col, r);
+      }
+    } else {
+      for (let col = 0; col < layerData.width; col++) {
+        newLayer.putTileAt(layerData.data[row][col], col, row);
+      }
     }
     return newLayer;
   }