135 lines
4.3 KiB
Vue
135 lines
4.3 KiB
Vue
<template>
|
|
<Container v-if="props.character" :x="currentX" :y="currentY">
|
|
<!-- Start chat bubble -->
|
|
<!-- <RoundRectangle :origin-x="0.5" :origin-y="7.5" :fillColor="0xffffff" :width="194" :height="21" :radius="5" />-->
|
|
<!-- <Text @create="createText" :text="`This is a chat message 🤯👋`" :origin-x="0.5" :origin-y="10.9" :style="{ fontSize: 13, fontFamily: 'Arial', color: '#000' }" />-->
|
|
<!-- End chat bubble -->
|
|
<Text @create="createText" :text="props.character.name" :origin-x="0.5" :origin-y="9" />
|
|
<RoundRectangle :origin-x="0.5" :origin-y="18.5" :fillColor="0xffffff" :width="74" :height="6" :radius="5" />
|
|
<RoundRectangle :origin-x="0.5" :origin-y="36.4" :fillColor="0x00b3b3" :width="70" :height="3" :radius="5" />
|
|
<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'
|
|
import config from '@/config'
|
|
|
|
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()
|
|
}
|
|
|
|
/**
|
|
* Calculate the distance between the current and target positions
|
|
*/
|
|
const distance = Math.sqrt(Math.pow(targetX - currentX.value, 2) + Math.pow(targetY - currentY.value, 2))
|
|
|
|
/**
|
|
* Teleport: No animation, only if the distance is greater than the tile size / 1.5
|
|
*/
|
|
// if (distance >= config.tile_size.x / 1.5) {
|
|
// // Teleport: No animation
|
|
// currentX.value = targetX
|
|
// currentY.value = targetY
|
|
// }
|
|
|
|
/**
|
|
* Normal movement: Animate
|
|
*/
|
|
if (distance <= config.tile_size.x / 1.5) {
|
|
// Normal movement: Animate
|
|
const duration = distance * 6 // 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.positionX !== oldChar.positionX || newChar.positionY !== oldChar.positionY) {
|
|
updatePosition(newChar.positionX, newChar.positionY)
|
|
}
|
|
}
|
|
},
|
|
{ immediate: true, deep: true }
|
|
)
|
|
|
|
const charTexture = computed(() => {
|
|
if (!props.character?.characterType?.sprite) {
|
|
return 'idle_right_down'
|
|
}
|
|
|
|
const rotation = props.character.rotation
|
|
const spriteId = props.character.characterType.sprite.id
|
|
const action = props.character.isMoving ? 'walk' : 'idle'
|
|
|
|
if (rotation === 0 || rotation === 6) {
|
|
if (config.development) console.log(`${spriteId}-${action}_left_down`)
|
|
return `${spriteId}-${action}_left_up`
|
|
} else if (rotation === 2 || rotation === 4) {
|
|
if (config.development) console.log(`${spriteId}-${action}_right_down`)
|
|
return `${spriteId}-${action}_right_down`
|
|
}
|
|
|
|
return `${spriteId}-${action}_left_down`
|
|
})
|
|
|
|
const createText = (text: Phaser.GameObjects.Text) => {
|
|
text.setFontSize(13)
|
|
text.setFontFamily('Arial')
|
|
}
|
|
|
|
onMounted(() => {
|
|
if (props.character) {
|
|
updatePosition(props.character.positionX, props.character.positionY)
|
|
}
|
|
})
|
|
|
|
onUnmounted(() => {
|
|
if (tween.value) {
|
|
tween.value.stop()
|
|
}
|
|
})
|
|
</script>
|