Depth sorting fix for larger objects

src/components/gameMaster/zoneEditor/ZoneEditor.vue

@@ -29,7 +29,7 @@ import { storeToRefs } from 'pinia'
 import { useGameStore } from '@/stores/game'
 import { useZoneEditorStore } from '@/stores/zoneEditor'
 import { useAssetStore } from '@/stores/assets'
-import { calculateIsometricDepth, placeTile, setAllTiles, sortByDepth, sortByIsometricDepth, tileToWorldX, tileToWorldY } from '@/services/zone'
+import { calculateIsometricDepth, placeTile, setAllTiles, sortByIsometricDepth, tileToWorldX, tileToWorldY } from '@/services/zone'
 import { ZoneEventTileType, type ZoneObject, type ZoneEventTile, type Zone } from '@/types'
 import { uuidv4 } from '@/utilities'
 import config from '@/config'

src/components/sprites/Character.vue

@@ -1,5 +1,5 @@
 <template>
-  <Container v-if="props.character" :x="currentX" :y="currentY">
+  <Container :depth="999" v-if="props.character" :x="currentX" :y="currentY">
     <!--    Start chat bubble -->
     <RoundRectangle :origin-x="0.5" :origin-y="7.5" :fillColor="0xffffff" :width="194" :height="21" :radius="5" />
     <Text @create="createText" :text="`This is a chat message 🤯👋`" :origin-x="0.5" :origin-y="10.9" :style="{ fontSize: 13, fontFamily: 'Arial', color: '#000' }" />
@@ -7,6 +7,8 @@
     <Text @create="createText" :text="props.character.name" :origin-x="0.5" :origin-y="9" />
     <RoundRectangle :origin-x="0.5" :origin-y="18.5" :fillColor="0xffffff" :width="74" :height="6" :radius="5" />
     <RoundRectangle :origin-x="0.5" :origin-y="36.4" :fillColor="0x00b3b3" :width="70" :height="3" :radius="5" />
+  </Container>
+  <Container :depth="calculateIsometricDepth(props.character.positionX, props.character.positionY, 28, 94, true)" v-if="props.character" :x="currentX" :y="currentY">
     <Image v-if="!props.character.characterType" texture="character" :origin-y="1" />
     <Sprite v-else :texture="charTexture" :play="props.character.isMoving ? charTexture : undefined" :origin-y="1" :flipX="props.character.rotation === 6 || props.character.rotation === 4" :flipY="false" />
   </Container>
@@ -15,7 +17,7 @@
 <script lang="ts" setup>
 import { Container, Image, RoundRectangle, Sprite, Text } from 'phavuer'
 import { type ExtendedCharacter as CharacterT } from '@/types'
-import { tileToWorldX, tileToWorldY } from '@/services/zone'
+import { calculateIsometricDepth, tileToWorldX, tileToWorldY } from '@/services/zone'
 import { watch, computed, ref, onMounted, onUnmounted } from 'vue'
 import config from '@/config'
 
@@ -86,11 +88,10 @@ const updatePosition = (x: number, y: number) => {
 watch(
   () => props.character,
   (newChar, oldChar) => {
-    if (newChar) {
+    if (!newChar) return
     if (!oldChar || newChar.positionX !== oldChar.positionX || newChar.positionY !== oldChar.positionY) {
       updatePosition(newChar.positionX, newChar.positionY)
     }
-    }
   },
   { immediate: true, deep: true }
 )
@@ -105,14 +106,12 @@ const charTexture = computed(() => {
   const action = props.character.isMoving ? 'walk' : 'idle'
 
   if (rotation === 0 || rotation === 6) {
-    if (config.development) console.log(`${spriteId}-${action}_left_down`)
     return `${spriteId}-${action}_left_up`
   } else if (rotation === 2 || rotation === 4) {
-    if (config.development) console.log(`${spriteId}-${action}_right_down`)
     return `${spriteId}-${action}_right_down`
   }
 
-  return `${spriteId}-${action}_left_down`
+  return `${spriteId}-${action}_left_up`
 })
 
 const createText = (text: Phaser.GameObjects.Text) => {

src/components/zone/Characters.vue

@@ -1,5 +1,5 @@
 <template>
-  <Character v-for="item in zoneStore.characters" :key="item.id" :layer="tilemap" :character="item" :depth="calculateIsometricDepth(item.positionX, item.positionY, 0)" />
+  <Character v-for="item in zoneStore.characters" :key="item.id" :layer="tilemap" :character="item" />
 </template>
 
 <script setup lang="ts">

src/components/zone/Objects.vue

@@ -1,5 +1,5 @@
 <template>
-  <Image v-for="object in zoneStore.zone?.zoneObjects" :depth="calculateIsometricDepth(object.positionX, object.positionY, 0)" :key="object.id" v-bind="getObjectImageProps(object)" />
+  <Image v-for="object in zoneStore.zone?.zoneObjects" :depth="calculateIsometricDepth(object.positionX, object.positionY, object.object.frameWidth, object.object.frameHeight)" :key="object.id" v-bind="getObjectImageProps(object)" />
 </template>
 
 <script setup lang="ts">
@@ -7,7 +7,6 @@ import { calculateIsometricDepth, tileToWorldX, tileToWorldY } from '@/services/
 import { Image } from 'phavuer'
 import { useZoneStore } from '@/stores/zone'
 import type { ZoneObject } from '@/types'
-import { storeToRefs } from 'pinia'
 
 const zoneStore = useZoneStore()
 

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) => {
+export const calculateIsometricDepth = (x: number, y: number, width: number = 0, height: number = 0, isCharacter: boolean = false) => {
-  return new Phaser.Tilemaps.MapData({
+  const baseDepth = x + y
-    width,
+  if (isCharacter) {
-    height,
+    // Increase the offset for characters to ensure they're always on top
-    tileWidth,
+    return baseDepth + 0.9 // @TODO: Fix collision, this is a hack
-    tileHeight,
+  } else {
-    orientation: Phaser.Tilemaps.Orientation.ISOMETRIC,
+    // For objects, use their back bottom corner
-    format: Phaser.Tilemaps.Formats.ARRAY_2D
+    return baseDepth + (width + height) / (2 * config.tile_size.x)
-  })
-}
-
-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 []
-  }
-
-  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
+export const sortByIsometricDepth = <T extends { positionX: number; positionY: number }>(items: T[]) => {
-  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[]) => {
   return [...items].sort((a, b) => {
-    const aHeight = a.object?.height || 0
+    return calculateIsometricDepth(a.positionX, a.positionY, 0, 0) - calculateIsometricDepth(b.positionX, b.positionY, 0, 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)
   })
 }