102 lines
3.1 KiB
Vue
102 lines
3.1 KiB
Vue
<template>
|
|
<Zone :depth="baseDepth" :originX="mapObj?.originX" :originY="mapObj?.originY" :width="mapObj?.frameWidth" :height="mapObj?.frameHeight" :x="x" :y="y" />
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import type { MapObject, PlacedMapObject } from '@/application/types'
|
|
import { useMapEditorComposable } from '@/composables/useMapEditorComposable'
|
|
import { calculateIsometricDepth } from '@/services/mapService'
|
|
import { onPreUpdate, useScene, Zone } from 'phavuer'
|
|
import { computed, defineProps, onMounted, onUnmounted } from 'vue'
|
|
|
|
const mapEditor = useMapEditorComposable()
|
|
const partitionPoints = [0]
|
|
|
|
let baseDepth = 0
|
|
|
|
const props = defineProps<{
|
|
obj?: PlacedMapObject
|
|
mapObj?: MapObject
|
|
x?: number
|
|
y?: number
|
|
}>()
|
|
|
|
const scene = useScene()
|
|
const group = scene.add.group()
|
|
|
|
const createImagePartition = (startX: number, endX: number, depthOffset: number) => {
|
|
if (!props.mapObj?.id) return
|
|
|
|
const img = scene.add.image(0, 0, props.mapObj.id)
|
|
|
|
img.setOrigin(props.mapObj.originX, props.mapObj.originY)
|
|
img.setCrop(startX, 0, endX, props.mapObj?.frameHeight)
|
|
img.setDepth(baseDepth + depthOffset)
|
|
|
|
group.add(img)
|
|
}
|
|
|
|
onPreUpdate(() => {
|
|
if (!props.obj || !props.x || !props.y) return
|
|
|
|
group.setXY(props.x, props.y)
|
|
|
|
const isMoving = mapEditor.movingPlacedObject.value?.id === props.obj.id
|
|
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()
|
|
|
|
orderedImages.forEach((child, index) => {
|
|
const image = child as Phaser.GameObjects.Image
|
|
if (image && props.obj) {
|
|
image.flipX = props.obj.isRotated
|
|
|
|
if (props.obj.isRotated) {
|
|
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.x = props.x!
|
|
image.setDepth(baseDepth + props.mapObj!.depthOffsets[index])
|
|
}
|
|
}
|
|
})
|
|
})
|
|
|
|
// 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)
|
|
|
|
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(() => {
|
|
group.destroy(true, true)
|
|
})
|
|
</script>
|