Fixed depth sorting inside zone and zoneEditor

src/components/gameMaster/zoneEditor/ZoneEditor.vue

@@ -11,7 +11,12 @@
     <Controls :layer="tiles as TilemapLayer" />
 
     <Container :depth="2">
-      <Image v-for="object in sortedZoneObjects" :key="object.id" v-bind="getObjectImageProps(object)" @pointerup="() => setSelectedZoneObject(object)" />
+      <Image
+        v-for="object in zoneObjects"
+        :depth="calculateIsometricDepth(object.positionX, object.positionY, 0)"
+        :key="object.id" v-bind="getObjectImageProps(object)"
+        @pointerup="() => setSelectedZoneObject(object)"
+      />
     </Container>
 
     <Container :depth="3">
@@ -29,7 +34,15 @@ import { storeToRefs } from 'pinia'
 import { useGameStore } from '@/stores/game'
 import { useZoneEditorStore } from '@/stores/zoneEditor'
 import { useAssetStore } from '@/stores/assets'
-import { placeTile, setAllTiles, sortByDepth, tileToWorldX, tileToWorldY } from '@/services/zone'
+import {
+  calculateIsometricDepth,
+  placeTile,
+  setAllTiles,
+  sortByDepth,
+  sortByIsometricDepth,
+  tileToWorldX,
+  tileToWorldY
+} from '@/services/zone'
 import { ZoneEventTileType, type ZoneObject, type ZoneEventTile, type Zone } from '@/types'
 import { uuidv4 } from '@/utilities'
 import config from '@/config'
@@ -51,7 +64,7 @@ const gameStore = useGameStore()
 const zoneEditorStore = useZoneEditorStore()
 const assetStore = useAssetStore()
 
-const { objectList, zone, selectedTile, selectedObject, selectedZoneObject, eraserMode, drawMode, objectDepth } = storeToRefs(zoneEditorStore)
+const { objectList, zone, selectedTile, selectedObject, selectedZoneObject, eraserMode, drawMode } = storeToRefs(zoneEditorStore)
 
 const zoneTilemap = ref(createTilemap())
 const tiles = ref(createTileLayer())
@@ -59,7 +72,6 @@ const zoneObjects = ref<ZoneObject[]>([])
 const zoneEventTiles = ref<ZoneEventTile[]>([])
 const tileArray = ref(createTileArray())
 
-const sortedZoneObjects = computed(() => sortByDepth(zoneObjects.value, zoneTilemap.value.width))
 const shouldShowTeleportModal = computed(() => zoneEditorStore.tool === 'pencil' && drawMode.value === 'teleport')
 
 function createTilemap() {
@@ -136,7 +148,7 @@ function addZoneObject(tile: Phaser.Tilemaps.Tile) {
     zone: zone.value!,
     objectId: selectedObject.value!.id,
     object: selectedObject.value!,
-    depth: objectDepth.value,
+    depth: 0,
     positionX: tile.x,
     positionY: tile.y
   }
@@ -245,7 +257,7 @@ onBeforeMount(() => {
   }
 
   zoneEventTiles.value = zone.value?.zoneEventTiles ?? []
-  zoneObjects.value = zone.value?.zoneObjects ?? []
+  zoneObjects.value = sortByIsometricDepth(zone.value?.zoneObjects ?? [], zoneTilemap.value.width)
 
   // Center camera
   const centerY = (zoneTilemap.value.height * zoneTilemap.value.tileHeight) / 2

src/components/zone/Characters.vue

@@ -1,10 +1,17 @@
 <template>
-  <Character v-for="item in zoneStore.characters" :key="item.id" :layer="tilemap" :character="item" :depth="1" />
+  <Character
+    v-for="item in zoneStore.characters"
+    :key="item.id"
+    :layer="tilemap"
+    :character="item"
+    :depth="calculateIsometricDepth(item.positionX, item.positionY, 0)"
+  />
 </template>
 
 <script setup lang="ts">
 import Character from '@/components/sprites/Character.vue'
 import { useZoneStore } from '@/stores/zone'
+import { calculateIsometricDepth } from '@/services/zone'
 
 const zoneStore = useZoneStore()
 

src/components/zone/Objects.vue

@@ -1,3 +1,31 @@
-<template></template>
+<template>
+  <Image
+    v-for="object in zoneStore.zone?.zoneObjects"
+    :depth="calculateIsometricDepth(object.positionX, object.positionY, 0)"
+    :key="object.id" v-bind="getObjectImageProps(object)"
+  />
+</template>
 
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import { calculateIsometricDepth, tileToWorldX, tileToWorldY } from '@/services/zone'
+import { Image } from 'phavuer'
+import { useZoneStore } from '@/stores/zone'
+import type { ZoneObject } from '@/types'
+import { storeToRefs } from 'pinia'
+
+const zoneStore = useZoneStore()
+
+const props = defineProps<{
+  tilemap: Phaser.Tilemaps.Tilemap
+}>()
+
+const getObjectImageProps = (object: ZoneObject) => {
+  return {
+    x: tileToWorldX(props.tilemap as any, object.positionX, object.positionY),
+    y: tileToWorldY(props.tilemap as any, object.positionX, object.positionY),
+    texture: object.object.id,
+    originY: Number(object.object.originX),
+    originX: Number(object.object.originY)
+  }
+}
+</script>

src/services/zone.ts

@@ -97,6 +97,22 @@ export const updateZoneTiles = (zoneTilemap: Tilemap, tiles: Phaser.Tilemaps.Til
   return []
 }
 
+export const calculateIsometricDepth = (x: number, y: number, height: number = 0) => {
+  // Adjust these values as needed for your specific isometric projection
+  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;
+    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
 }