noxious/client
3
0
Fork 1
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Depth sort fix attempt

Browse Source
This commit is contained in:
Dennis Postma 2025-02-13 14:50:46 +01:00
parent 16720777c9
commit ddc26a021b
3 changed files with 33 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
package-lock.json generated
View File

@ -1781,9 +1781,9 @@
} }
}, },
"node_modules/@types/node": { "node_modules/@types/node": {
"version": "20.17.17", "version": "20.17.18",
"resolved": "https://registry.npmjs.org/@types/node/-/node-20.17.17.tgz", "resolved": "https://registry.npmjs.org/@types/node/-/node-20.17.18.tgz",
"integrity": "sha512-/WndGO4kIfMicEQLTi/mDANUu/iVUhT7KboZPdEqqHQ4aTS+3qT3U5gIqWDFV+XouorjfgGqvKILJeHhuQgFYg==", "integrity": "sha512-9kS0opXVV3dJ+C7HPhXfDlOdMu4cjJSZhlSxlDK39IxVRxBbuiYjCkLYSO9d5UYqTd4DApxRK9T1xJiTAkfA0w==",
"devOptional": true, "devOptional": true,
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
@ -2880,9 +2880,9 @@
} }
}, },
"node_modules/electron-to-chromium": { "node_modules/electron-to-chromium": {
"version": "1.5.97", "version": "1.5.98",
"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.97.tgz", "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.98.tgz",
"integrity": "sha512-HKLtaH02augM7ZOdYRuO19rWDeY+QSJ1VxnXFa/XDFLf07HvM90pALIJFgrO+UVaajI3+aJMMpojoUTLZyQ7JQ==", "integrity": "sha512-bI/LbtRBxU2GzK7KK5xxFd2y9Lf9XguHooPYbcXWy6wUoT8NMnffsvRhPmSeUHLSDKAEtKuTaEtK4Ms15zkIEA==",
"dev": true, "dev": true,
"license": "ISC" "license": "ISC"
}, },

2
src/components/game/map/partials/PlacedMapObject.vue
View File

@ -61,7 +61,7 @@ function calculateObjectPlacement(mapObj: PlacedMapObject): { x: number; y: numb
const imageProps = computed(() => ({ const imageProps = computed(() => ({
alpha: mapEditor.movingPlacedObject.value?.id == props.placedMapObject.id || mapEditor.selectedMapObject.value?.id == props.placedMapObject.id ? 0.5 : 1, 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, 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), ...calculateObjectPlacement(props.placedMapObject),
flipX: props.placedMapObject.isRotated, flipX: props.placedMapObject.isRotated,
texture: mapObject.value!.id, texture: mapObject.value!.id,

32
src/services/mapService.ts
View File

@ -62,14 +62,34 @@ export function createTileArray(width: number, height: number, tile: string = 'b
return Array.from({ length: height }, () => Array.from({ length: width }, () => tile)) 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) => { export const calculateIsometricDepth = (
const baseDepth = positionX + positionY positionX: number,
if (isCharacter) { positionY: number,
return baseDepth width: number = 0,
} height: number = 0,
return baseDepth + (width + height) / (2 * config.tile_size.width) 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) { async function loadTileTextures(tiles: TileT[], scene: Phaser.Scene) {
// Load each tile into the scene // Load each tile into the scene
for (let tile of tiles) { for (let tile of tiles) {