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 @@ - + @@ -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 }