66 lines
2.6 KiB
Vue
66 lines
2.6 KiB
Vue
<template>
|
|
<Image v-if="gameStore.isTextureLoaded(props.placedMapObject.mapObject.id)" v-bind="imageProps" />
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import type { PlacedMapObject, TextureData } from '@/application/types'
|
|
import { loadTexture } from '@/composables/gameComposable'
|
|
import { calculateIsometricDepth, tileToWorldX, tileToWorldY } from '@/composables/mapComposable'
|
|
import { useGameStore } from '@/stores/gameStore'
|
|
import { Image, useScene } from 'phavuer'
|
|
import { computed, onMounted } from 'vue'
|
|
import config from '@/application/config'
|
|
import { useMapEditorComposable } from '@/composables/useMapEditorComposable'
|
|
|
|
const props = defineProps<{
|
|
placedMapObject: PlacedMapObject
|
|
}>()
|
|
|
|
const gameStore = useGameStore()
|
|
const scene = useScene()
|
|
const mapEditor = useMapEditorComposable()
|
|
|
|
const imageProps = computed(() => ({
|
|
alpha: mapEditor.movingPlacedObject.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, props.placedMapObject.mapObject.frameWidth, props.placedMapObject.mapObject.frameHeight),
|
|
...calculateObjectPlacement(props.placedMapObject,false),
|
|
flipX: props.placedMapObject.isRotated,
|
|
texture: props.placedMapObject.mapObject.id,
|
|
originX: props.placedMapObject.mapObject.originX,
|
|
originY: props.placedMapObject.mapObject.originY
|
|
}))
|
|
|
|
function calculateObjectPlacement(mapObj: PlacedMapObject, tileCenterSnap: boolean) : {x: number; y: number} {
|
|
let position : {x: number; y: number}
|
|
if (tileCenterSnap) {
|
|
let halfTileWidth = config.tile_size.width/2
|
|
let halfTileHeight = config.tile_size.height/2
|
|
position = {
|
|
x: Math.ceil((mapObj.positionX-config.tile_size.height)/halfTileWidth) * halfTileWidth,
|
|
y: Math.ceil((mapObj.positionY-config.tile_size.height)/halfTileWidth) * halfTileWidth,
|
|
}
|
|
}
|
|
else {
|
|
position = { x: mapObj.positionX, y: mapObj.positionY }
|
|
}
|
|
return {
|
|
x: position.x-mapObj.mapObject.frameWidth/2,
|
|
y: position.y-mapObj.mapObject.frameHeight/2
|
|
}
|
|
}
|
|
|
|
onMounted(async () => {
|
|
await loadTexture(scene, {
|
|
key: props.placedMapObject.mapObject.id,
|
|
data: '/textures/map_objects/' + props.placedMapObject.mapObject.id + '.png',
|
|
group: 'map_objects',
|
|
updatedAt: props.placedMapObject.mapObject.updatedAt,
|
|
frameWidth: props.placedMapObject.mapObject.frameWidth,
|
|
frameHeight: props.placedMapObject.mapObject.frameHeight
|
|
} as TextureData).catch((error) => {
|
|
console.error('Error loading texture:', error)
|
|
})
|
|
})
|
|
</script>
|