Split depth map object demo

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

@@ -1,22 +1,22 @@
 <template>
-  <Container v-if="mapObject && gameStore.isTextureLoaded(props.placedMapObject.mapObject as string)" v-bind="containerProps">
-    <Image v-bind="imageProps" />
-  </Container>
+  <ImageGroup v-bind="groupProps" v-if="mapObject && gameStore.isTextureLoaded(props.placedMapObject.mapObject as string)">
+  </ImageGroup>
 </template>
 
 <script setup lang="ts">
-import config from '@/application/config'
 import type { MapObject, PlacedMapObject } from '@/application/types'
 import { useMapEditorComposable } from '@/composables/useMapEditorComposable'
 import { calculateIsometricDepth, loadMapObjectTextures, tileToWorldXY } from '@/services/mapService'
 import { MapObjectStorage } from '@/storage/storages'
 import { useGameStore } from '@/stores/gameStore'
-import { Container, Image, Sprite, useScene } from 'phavuer'
-import { computed, onMounted, ref, useTemplateRef, watch } from 'vue'
+import { useScene } from 'phavuer'
+import { computed, onMounted, ref, watch } from 'vue'
 
 import Tilemap = Phaser.Tilemaps.Tilemap
 import TilemapLayer = Phaser.Tilemaps.TilemapLayer
 
+import ImageGroup from '@/components/gameMaster/mapEditor/mapPartials/ImageGroup.vue'
+
 const props = defineProps<{
   placedMapObject: PlacedMapObject
   tileMap: Tilemap
@@ -30,9 +30,11 @@ const mapEditor = useMapEditorComposable()
 
 const mapObject = ref<MapObject>()
 
-const partitionedImages = ref<Phaser.GameObjects.Image[]>([])
-
-const partitionOffsets = [1, -1]
+const groupProps = computed(() => ({
+  ...calculateObjectPlacement(props.placedMapObject),
+  mapObj: mapObject.value,
+  obj: props.placedMapObject,
+}))
 
 async function initialize() {
   if (!props.placedMapObject.mapObject) return
@@ -55,14 +57,6 @@ async function initialize() {
   await loadMapObjectTextures([_mapObject], scene)
 }
 
-function createImagePartition(startX: number, endX: number, depthOffset: number) {
-  let pos = calculateObjectPlacement(props.placedMapObject);
-  const img = scene.add.image(pos.x, pos.y, mapObject.value!.id);
-  img.setCrop(startX, 0, endX, mapObject.value!.frameHeight)
-  img.setDepth(calculateIsometricDepth(props.placedMapObject.positionX, props.placedMapObject.positionY) + depthOffset)
-  return img
-}
-
 function calculateObjectPlacement(mapObj: PlacedMapObject): { x: number; y: number } {
   let position = tileToWorldXY(props.tileMapLayer, mapObj.positionX, mapObj.positionY)
 
@@ -72,22 +66,6 @@ function calculateObjectPlacement(mapObj: PlacedMapObject): { x: number; y: numb
   }
 }
 
-const containerProps = computed(() => ({
-  ...calculateObjectPlacement(props.placedMapObject),
-  width: mapObject.value!.frameWidth,
-  height: mapObject.value!.frameHeight
-}))
-
-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),
-  flipX: props.placedMapObject.isRotated,
-  texture: mapObject.value!.id,
-  originX: mapObject.value!.originX,
-  originY: mapObject.value!.originY
-}))
-
 watch(
   () => mapEditor.refreshMapObject.value,
   async () => {

src/components/gameMaster/mapEditor/mapPartials/ImageGroup.vue

@@ -0,0 +1,59 @@
+<template>
+  <Zone :originX="mapObj!.originX" :originY="mapObj!.originY" :width="mapObj?.frameWidth" :height="mapObj?.frameHeight" :x :y>
+  </Zone>
+</template>
+
+<script lang="ts">
+import { onPreUpdate, refObj, useScene, Zone } from 'phavuer'
+import { calculateIsometricDepth } from '@/services/mapService'
+import { defineComponent, onMounted, onUnmounted, type PropType } from 'vue'
+import type { MapObject, PlacedMapObject } from '@/application/types'
+import { useMapEditorComposable } from '@/composables/useMapEditorComposable'
+import Image = Phaser.GameObjects.Image
+const mapEditor = useMapEditorComposable()
+
+export default defineComponent({
+  components: { Zone },
+  props: {
+    obj: Object as PropType<PlacedMapObject>,
+    mapObj: Object as PropType<MapObject>,
+    x: Number,
+    y: Number
+  },
+
+  setup(props) {
+    const scene = useScene()
+    const group = scene.add.group()
+
+    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)
+
+      group.add(img)
+    }
+
+    onPreUpdate(() => {
+      group.setXY(props.x!, props.y!)
+      group.setAlpha(mapEditor.movingPlacedObject.value?.id == props.obj!.id || mapEditor.selectedMapObject.value?.id == props.obj!.id ? 0.5 : 1)
+      group.setTint(mapEditor.selectedPlacedObject.value?.id == props.obj!.id ? 0x00ff00 : 0xffffff)
+      group.getChildren().forEach((child) => {
+        if (child as Image) {
+          (child as Image).flipX = props.obj!.isRotated
+        }
+      })
+    })
+
+    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)
+
+    onUnmounted(() => {
+      group.destroy(true,true)
+    })
+  }
+})
+
+</script>