diff --git a/src/components/gameMaster/zoneEditor/ZoneEditor.vue b/src/components/gameMaster/zoneEditor/ZoneEditor.vue
index 8087b30..297c69d 100644
--- a/src/components/gameMaster/zoneEditor/ZoneEditor.vue
+++ b/src/components/gameMaster/zoneEditor/ZoneEditor.vue
@@ -11,7 +11,12 @@
- setSelectedZoneObject(object)" />
+ setSelectedZoneObject(object)"
+ />
@@ -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([])
const zoneEventTiles = ref([])
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
diff --git a/src/components/zone/Characters.vue b/src/components/zone/Characters.vue
index d6288a0..649bb38 100644
--- a/src/components/zone/Characters.vue
+++ b/src/components/zone/Characters.vue
@@ -1,10 +1,17 @@
-
+
+
diff --git a/src/services/zone.ts b/src/services/zone.ts
index 6b3df35..a91d46d 100644
--- a/src/services/zone.ts
+++ b/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 = (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
}