Depth editing for map objects

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

@@ -1,5 +1,5 @@
 <template>
-  <Zone :originX="mapObj?.originX" :originY="mapObj?.originY" :width="mapObj?.frameWidth" :height="mapObj?.frameHeight" :x="x" :y="y" />
+  <Zone :depth="baseDepth" :originX="mapObj?.originX" :originY="mapObj?.originY" :width="mapObj?.frameWidth" :height="mapObj?.frameHeight" :x="x" :y="y" />
 </template>
 
 <script setup lang="ts">
@@ -7,9 +7,12 @@ import type { MapObject, PlacedMapObject } from '@/application/types'
 import { useMapEditorComposable } from '@/composables/useMapEditorComposable'
 import { calculateIsometricDepth } from '@/services/mapService'
 import { onPreUpdate, useScene, Zone } from 'phavuer'
-import { defineProps, onUnmounted } from 'vue'
+import { computed, defineProps, onMounted, onUnmounted } from 'vue'
 
 const mapEditor = useMapEditorComposable()
+const partitionPoints = [0]
+
+const baseDepth = computed(() => calculateIsometricDepth(props.x!, props.y!))
 
 const props = defineProps<{
   obj?: PlacedMapObject
@@ -26,9 +29,9 @@ const createImagePartition = (startX: number, endX: number, depthOffset: number)
 
   const img = scene.add.image(0, 0, props.mapObj.id)
 
-  img.setDepth(calculateIsometricDepth(props.obj!.positionX, props.obj!.positionY) + depthOffset)
   img.setOrigin(props.mapObj.originX, props.mapObj.originY)
   img.setCrop(startX, 0, endX, props.mapObj?.frameHeight)
+  img.setDepth(baseDepth.value + depthOffset)
 
   group.add(img)
 }
@@ -45,19 +48,37 @@ onPreUpdate(() => {
   group.setAlpha(isMoving || isSelected ? 0.5 : 1)
   group.setTint(isPlacedSelected ? 0x00ff00 : 0xffffff)
 
-  group.getChildren().forEach((child) => {
+  let orderedImages = group.getChildren()
+
+  orderedImages.forEach((child, index) => {
     const image = child as Phaser.GameObjects.Image
     if (image && props.obj) {
-      image.flipX = props.obj.isRotated
+      image.flipX = props.obj.isRotated;
+      if (props.obj.isRotated) {
+        image.setDepth(baseDepth.value + props.mapObj!.depthOffsets.reverse()[index])
+      }
+      else {
+        image.setDepth(baseDepth.value + props.mapObj!.depthOffsets[index])
+      }
+      image.setCrop()
     }
   })
 })
 
+
 // Initial setup
 if (props.mapObj && props.x && props.y) {
   group.setXY(props.x, props.y)
-  createImagePartition(0, props.mapObj.frameWidth * props.mapObj.originX, -1)
-  createImagePartition(props.mapObj.frameWidth * props.mapObj.originX, props.mapObj.frameWidth, 1)
+  group.setOrigin(props.mapObj.originX, props.mapObj.originY)
+
+  let sliceCount = props.mapObj.depthOffsets.length;
+  for (let j = 1; j <= sliceCount; j++) {
+    partitionPoints.push(j * (props.mapObj.frameWidth/sliceCount))
+  }
+
+  for (let i = 0; i < partitionPoints.length - 1; i++) {
+    createImagePartition(partitionPoints[i], partitionPoints[i+1], props.mapObj.depthOffsets[i])
+  }
 }
 
 onUnmounted(() => {