diff --git a/package-lock.json b/package-lock.json index f700e95..3dd649b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1781,9 +1781,9 @@ } }, "node_modules/@types/node": { - "version": "20.17.17", - "resolved": "https://registry.npmjs.org/@types/node/-/node-20.17.17.tgz", - "integrity": "sha512-/WndGO4kIfMicEQLTi/mDANUu/iVUhT7KboZPdEqqHQ4aTS+3qT3U5gIqWDFV+XouorjfgGqvKILJeHhuQgFYg==", + "version": "20.17.18", + "resolved": "https://registry.npmjs.org/@types/node/-/node-20.17.18.tgz", + "integrity": "sha512-9kS0opXVV3dJ+C7HPhXfDlOdMu4cjJSZhlSxlDK39IxVRxBbuiYjCkLYSO9d5UYqTd4DApxRK9T1xJiTAkfA0w==", "devOptional": true, "license": "MIT", "dependencies": { @@ -2880,9 +2880,9 @@ } }, "node_modules/electron-to-chromium": { - "version": "1.5.97", - "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.97.tgz", - "integrity": "sha512-HKLtaH02augM7ZOdYRuO19rWDeY+QSJ1VxnXFa/XDFLf07HvM90pALIJFgrO+UVaajI3+aJMMpojoUTLZyQ7JQ==", + "version": "1.5.98", + "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.98.tgz", + "integrity": "sha512-bI/LbtRBxU2GzK7KK5xxFd2y9Lf9XguHooPYbcXWy6wUoT8NMnffsvRhPmSeUHLSDKAEtKuTaEtK4Ms15zkIEA==", "dev": true, "license": "ISC" }, diff --git a/src/components/game/map/partials/PlacedMapObject.vue b/src/components/game/map/partials/PlacedMapObject.vue index 9e3a4cd..74eeabc 100644 --- a/src/components/game/map/partials/PlacedMapObject.vue +++ b/src/components/game/map/partials/PlacedMapObject.vue @@ -61,7 +61,7 @@ function calculateObjectPlacement(mapObj: PlacedMapObject): { x: number; y: numb const imageProps = computed(() => ({ alpha: mapEditor.movingPlacedObject.value?.id == props.placedMapObject.id || mapEditor.selectedMapObject.value?.id == props.placedMapObject.id ? 0.5 : 1, tint: mapEditor.selectedPlacedObject.value?.id == props.placedMapObject.id ? 0x00ff00 : 0xffffff, - depth: calculateIsometricDepth(props.placedMapObject.positionX, props.placedMapObject.positionY, mapObject.value!.frameWidth, mapObject.value!.frameHeight), + depth: calculateIsometricDepth(props.placedMapObject.positionX, props.placedMapObject.positionY, mapObject.value!.frameWidth, mapObject.value!.frameHeight, mapObject.value!.originX, mapObject.value!.originY), ...calculateObjectPlacement(props.placedMapObject), flipX: props.placedMapObject.isRotated, texture: mapObject.value!.id, diff --git a/src/services/mapService.ts b/src/services/mapService.ts index c07f9ee..8996368 100644 --- a/src/services/mapService.ts +++ b/src/services/mapService.ts @@ -62,14 +62,34 @@ export function createTileArray(width: number, height: number, tile: string = 'b return Array.from({ length: height }, () => Array.from({ length: width }, () => tile)) } -export const calculateIsometricDepth = (positionX: number, positionY: number, width: number = 0, height: number = 0, isCharacter: boolean = false) => { - const baseDepth = positionX + positionY - if (isCharacter) { - return baseDepth - } - return baseDepth + (width + height) / (2 * config.tile_size.width) +export const calculateIsometricDepth = ( + positionX: number, + positionY: number, + width: number = 0, + height: number = 0, + originX: number = 0, + originY: number = 0 +) => { + // Base depth calculation using isometric coordinates + // We multiply by a large number to ensure enough space between layers + const baseDepth = (positionY + positionX) * 1000 + + // Calculate the object's bottom-most point considering its dimensions and origin + const bottomY = positionY + height - (height * originY) + const rightX = positionX + width - (width * originX) + + // Add position-based offset to ensure objects further down and right appear on top + const positionOffset = (bottomY + rightX) * 10 + + // For regular objects, consider their size + // Larger objects should generally appear behind smaller ones at the same position + const sizeOffset = (width + height) * 5 + + // Final depth combines all factors + return baseDepth + positionOffset - sizeOffset } + async function loadTileTextures(tiles: TileT[], scene: Phaser.Scene) { // Load each tile into the scene for (let tile of tiles) {