Fix for object depths and proper depths for rotated objects

src/components/game/map/partials/ImageGroup.vue

@@ -12,7 +12,7 @@ import { computed, defineProps, onMounted, onUnmounted } from 'vue'
 const mapEditor = useMapEditorComposable()
 const partitionPoints = [0]
 
-const baseDepth = computed(() => calculateIsometricDepth(props.x!, props.y!))
+let baseDepth = 0
 
 const props = defineProps<{
   obj?: PlacedMapObject
@@ -31,7 +31,7 @@ const createImagePartition = (startX: number, endX: number, depthOffset: number)
 
   img.setOrigin(props.mapObj.originX, props.mapObj.originY)
   img.setCrop(startX, 0, endX, props.mapObj?.frameHeight)
-  img.setDepth(baseDepth.value + depthOffset)
+  img.setDepth(baseDepth + depthOffset)
 
   group.add(img)
 }
@@ -45,8 +45,11 @@ onPreUpdate(() => {
   const isSelected = mapEditor.selectedMapObject.value?.id === props.obj.id
   const isPlacedSelected = mapEditor.selectedPlacedObject.value?.id === props.obj.id
 
+  baseDepth = calculateIsometricDepth(props.obj!.positionX, props.obj!.positionY)
+
   group.setAlpha(isMoving || isSelected ? 0.5 : 1)
   group.setTint(isPlacedSelected ? 0x00ff00 : 0xffffff)
+  group.setDepth(baseDepth)
 
   let orderedImages = group.getChildren()
 
@@ -54,13 +57,25 @@ onPreUpdate(() => {
     const image = child as Phaser.GameObjects.Image
     if (image && props.obj) {
       image.flipX = props.obj.isRotated;
+
       if (props.obj.isRotated) {
-        image.setDepth(baseDepth.value + props.mapObj!.depthOffsets.reverse()[index])
+        var offsetNum = props.mapObj!.depthOffsets.length
+
+        //Could break in case of images with odd partion number
+        //Shifts image over so that it becomes aligned again after flipping
+        if (index < offsetNum/2) {
+          image.x = props.x! - (props.mapObj!.frameWidth/offsetNum)
+        }
+        else {
+          image.x = props.x! + (props.mapObj!.frameWidth/offsetNum)
+        }
+
+        image.setDepth(baseDepth - props.mapObj!.depthOffsets[index])
       }
       else {
-        image.setDepth(baseDepth.value + props.mapObj!.depthOffsets[index])
+        image.x = props.x!
+        image.setDepth(baseDepth + props.mapObj!.depthOffsets[index])
       }
-      image.setCrop()
     }
   })
 })
@@ -68,6 +83,8 @@ onPreUpdate(() => {
 
 // Initial setup
 if (props.mapObj && props.x && props.y) {
+  baseDepth = calculateIsometricDepth(props.obj!.positionX, props.obj!.positionY)
+
   group.setXY(props.x, props.y)
   group.setOrigin(props.mapObj.originX, props.mapObj.originY)
 

src/components/gameMaster/assetManager/partials/mapObject/MapObjectDetails.vue

@@ -114,7 +114,7 @@ if (selectedMapObject.value) {
   mapObjectFrameHeight.value = selectedMapObject.value.frameHeight
 }
 
-const setPartitionDepth = (event: any, idx: number) => mapObjectDepthOffsets.value[idx] = event.target.value
+const setPartitionDepth = (event: any, idx: number) => mapObjectDepthOffsets.value[idx] = Number.parseInt(event.target.value)
 
 async function removeObject() {
   if (!selectedMapObject.value) return

src/components/gameMaster/mapEditor/Map.vue

@@ -179,7 +179,6 @@ function handlePointerMove(pointer: Phaser.Input.Pointer) {
   if (mapEditor.inputMode.value === 'hold' && pointer.isDown) {
     handlePointerDown(pointer)
   }
-  scene.children.depthSort()
 }
 
 function handlePointerUp(pointer: Phaser.Input.Pointer) {
@@ -236,6 +235,10 @@ onUnmounted(() => {
   mapEditor.reset()
 })
 
+setInterval( () => {
+  scene.children.queueDepthSort()
+}, 0.2)
+
 onBeforeUnmount(() => {
   removeEventListener('keydown', handleKeyDown)
 })

src/services/mapService.ts

@@ -62,8 +62,8 @@ 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, pivotPoints: { x: number; y: number }[] = []) => {
+export const calculateIsometricDepth = (positionX: number, positionY: number) => {
-  return Math.max(positionX + positionY)
+  return positionX + positionY
 }
 
 async function loadTileTextures(tiles: TileT[], scene: Phaser.Scene) {