Depth sorting fix for larger objects

src/services/zone.ts

@@ -2,7 +2,6 @@ import config from '@/config'
 import Tilemap = Phaser.Tilemaps.Tilemap
 import TilemapLayer = Phaser.Tilemaps.TilemapLayer
 import Tileset = Phaser.Tilemaps.Tileset
-import type { Zone } from '@/types'
 
 export function getTile(x: number, y: number, layer: Phaser.Tilemaps.TilemapLayer): Phaser.Tilemaps.Tile | undefined {
   const tile: Phaser.Tilemaps.Tile = layer.getTileAtWorldXY(x, y)
@@ -42,87 +41,19 @@ export function setAllTiles(zone: Tilemap, layer: TilemapLayer, tiles: string[][
   })
 }
 
-export const createZoneData = (width: number, height: number, tileWidth: number, tileHeight: number) => {
-  return new Phaser.Tilemaps.MapData({
-    width,
-    height,
-    tileWidth,
-    tileHeight,
-    orientation: Phaser.Tilemaps.Orientation.ISOMETRIC,
-    format: Phaser.Tilemaps.Formats.ARRAY_2D
-  })
-}
-
-export const createTilesetImages = (zoneTilemap: Tilemap, assets: any[], tileSize: { x: number; y: number }) => {
-  const tilesetImages: Tileset[] = []
-  let tileCount = 1
-
-  assets.forEach((asset) => {
-    if (asset.group !== 'tiles') return
-    tilesetImages.push(zoneTilemap.addTilesetImage(asset.key, asset.key, tileSize.x, tileSize.y, 0, 0, tileCount++) as Tileset)
-  })
-  tilesetImages.push(zoneTilemap.addTilesetImage('blank_tile', 'blank_tile', tileSize.x, tileSize.y, 0, 0, 0) as Tileset)
-
-  return tilesetImages
-}
-
-export const initializeZoneTiles = (zoneTilemap: Tilemap, tiles: Phaser.Tilemaps.TilemapLayer, width: number, height: number) => {
-  const exampleTilesArray = Array.from({ length: width }, () => Array.from({ length: height }, () => 'blank_tile'))
-  exampleTilesArray.forEach((row, y) => row.forEach((tile, x) => placeTile(zoneTilemap, tiles, x, y, 'blank_tile')))
-  return exampleTilesArray
-}
-
-export const updateZoneTiles = (zoneTilemap: Tilemap, tiles: Phaser.Tilemaps.TilemapLayer, zone: Zone) => {
-  if (!zone.tiles) {
-    return []
+export const calculateIsometricDepth = (x: number, y: number, width: number = 0, height: number = 0, isCharacter: boolean = false) => {
+  const baseDepth = x + y
+  if (isCharacter) {
+    // Increase the offset for characters to ensure they're always on top
+    return baseDepth + 0.9 // @TODO: Fix collision, this is a hack
+  } else {
+    // For objects, use their back bottom corner
+    return baseDepth + (width + height) / (2 * config.tile_size.x)
   }
-
-  setAllTiles(zoneTilemap, tiles, zone.tiles)
-  const zoneTiles = zone.tiles
-
-  // Ensure zoneTiles matches the current zone dimensions, filling new spaces with 'blank_tile'
-  for (let y = 0; y < zone.height; y++) {
-    zoneTiles[y] = zoneTiles[y] || [] // Ensure the row exists
-    for (let x = 0; x < zone.width; x++) {
-      zoneTiles[y][x] = zoneTiles[y][x] || 'blank_tile' // Fill missing tiles with 'blank_tile'
-    }
-  }
-
-  // Update the tilemap with any new 'blank_tile' entries
-  zoneTiles.forEach((row: any, y: any) => {
-    row.forEach((tileId: any, x: any) => {
-      placeTile(zoneTilemap, tiles, x, y, tileId)
-    })
-  })
-
-  return zoneTiles
 }
 
-export const calculateIsometricDepth = (x: number, y: number, height: number = 0) => {
-  // const isoX = x - y;
-  const isoY = (x + y) / 2
-  return isoY - height * 0.1 // Subtract height to make taller objects appear behind shorter ones
-}
-
-export const sortByIsometricDepth = <T extends { positionX: number; positionY: number; object?: { height?: number } }>(items: T[]) => {
+export const sortByIsometricDepth = <T extends { positionX: number; positionY: number }>(items: T[]) => {
   return [...items].sort((a, b) => {
-    const aHeight = a.object?.height || 0
-    const bHeight = b.object?.height || 0
-    return calculateIsometricDepth(a.positionX, a.positionY, aHeight) - calculateIsometricDepth(b.positionX, b.positionY, bHeight)
-  })
-}
-
-// Redundant, but left here for reference
-export const calculateDepth = (x: number, y: number, mapWidth: number) => {
-  return y * mapWidth + x
-}
-
-export const sortByDepth = <T extends { positionX: number; positionY: number } | { x: number; y: number }>(items: T[], mapWidth: number) => {
-  return [...items].sort((a, b) => {
-    const aX = 'positionX' in a ? a.positionX : a.x
-    const aY = 'positionY' in a ? a.positionY : a.y
-    const bX = 'positionX' in b ? b.positionX : b.x
-    const bY = 'positionY' in b ? b.positionY : b.y
-    return calculateDepth(aX, aY, mapWidth) - calculateDepth(bX, bY, mapWidth)
+    return calculateIsometricDepth(a.positionX, a.positionY, 0, 0) - calculateIsometricDepth(b.positionX, b.positionY, 0, 0)
   })
 }