124 lines
3.4 KiB
Vue
124 lines
3.4 KiB
Vue
<template>
|
|
<Container
|
|
v-if="props.character"
|
|
:x="currentX"
|
|
:y="currentY"
|
|
>
|
|
<RoundRectangle :origin-x="0.5" :origin-y="16" :fillColor="0xffffff" :width="74" :height="8" :radius="4" />
|
|
<RoundRectangle :origin-x="0.5" :origin-y="31.5" :fillColor="0x09ad19" :width="70" :height="4" :radius="4" />
|
|
<Text
|
|
@create="createText"
|
|
:text="props.character.name"
|
|
:origin-x="0.5"
|
|
:origin-y="7.5"
|
|
:style="{
|
|
fontFamily: 'Helvetica, Arial',
|
|
color: '#FFF',
|
|
fontSize: '14px'
|
|
}"
|
|
/>
|
|
<Image v-if="!props.character.characterType" texture="character" :origin-y="1" />
|
|
<Sprite
|
|
v-else
|
|
:texture="charTexture"
|
|
:play="props.character.isMoving ? charTexture : undefined"
|
|
:origin-y="1"
|
|
:flipX="props.character.rotation === 6 || props.character.rotation === 4"
|
|
:flipY="false"
|
|
/>
|
|
</Container>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { Container, Image, RoundRectangle, Sprite, Text } from 'phavuer'
|
|
import { type ExtendedCharacter as CharacterT } from '@/types'
|
|
import { tileToWorldX, tileToWorldY } from '@/services/zone'
|
|
import { watch, computed, ref, onMounted, onUnmounted } from 'vue'
|
|
|
|
interface Props {
|
|
layer: Phaser.Tilemaps.TilemapLayer
|
|
character?: CharacterT
|
|
}
|
|
|
|
const props = withDefaults(defineProps<Props>(), {
|
|
character: undefined
|
|
})
|
|
|
|
const currentX = ref(0)
|
|
const currentY = ref(0)
|
|
const tween = ref<Phaser.Tweens.Tween | null>(null)
|
|
const isInitialPosition = ref(true)
|
|
|
|
const updatePosition = (x: number, y: number) => {
|
|
const targetX = tileToWorldX(props.layer, x, y)
|
|
const targetY = tileToWorldY(props.layer, x, y)
|
|
|
|
if (isInitialPosition.value) {
|
|
currentX.value = targetX
|
|
currentY.value = targetY
|
|
isInitialPosition.value = false
|
|
return
|
|
}
|
|
|
|
if (tween.value && tween.value.isPlaying()) {
|
|
tween.value.stop()
|
|
}
|
|
|
|
const distance = Math.sqrt(Math.pow(targetX - currentX.value, 2) + Math.pow(targetY - currentY.value, 2))
|
|
const duration = distance * 5 // Adjust this multiplier to control overall speed
|
|
|
|
tween.value = props.layer.scene.tweens.add({
|
|
targets: { x: currentX.value, y: currentY.value },
|
|
x: targetX,
|
|
y: targetY,
|
|
duration: duration,
|
|
ease: 'Linear',
|
|
onUpdate: (tween) => {
|
|
currentX.value = tween.targets[0].x ?? 0
|
|
currentY.value = tween.targets[0].y ?? 0
|
|
},
|
|
})
|
|
}
|
|
|
|
watch(() => props.character, (newChar, oldChar) => {
|
|
if (newChar) {
|
|
if (!oldChar || newChar.position_x !== oldChar.position_x || newChar.position_y !== oldChar.position_y) {
|
|
updatePosition(newChar.position_x, newChar.position_y)
|
|
}
|
|
}
|
|
}, { immediate: true, deep: true })
|
|
|
|
const charTexture = computed(() => {
|
|
if (!props.character?.characterType?.sprite) {
|
|
return 'idle_left_down'
|
|
}
|
|
|
|
const rotation = props.character.rotation
|
|
const spriteId = props.character.characterType.sprite.id
|
|
const action = props.character.isMoving ? 'walk' : 'idle'
|
|
|
|
if (rotation === 2 || rotation === 4) {
|
|
return `${spriteId}-${action}_left_down`
|
|
} else if (rotation === 0 || rotation === 6) {
|
|
return `${spriteId}-${action}_right_up`
|
|
}
|
|
|
|
return `${spriteId}-${action}_left_down` // Default fallback
|
|
})
|
|
|
|
const createText = (text: Phaser.GameObjects.Text) => {
|
|
text.setLetterSpacing(1.5)
|
|
}
|
|
|
|
onMounted(() => {
|
|
if (props.character) {
|
|
updatePosition(props.character.position_x, props.character.position_y)
|
|
}
|
|
})
|
|
|
|
onUnmounted(() => {
|
|
if (tween.value) {
|
|
tween.value.stop()
|
|
}
|
|
})
|
|
</script> |