Character animation

src/components/sprites/Character.vue

@@ -1,13 +1,14 @@
 <template>
-  <Container v-if="props.character">
-    <RoundRectangle :tween="tween" :x="tileToWorldX(props.layer, props.character.position_x, props.character.position_y)" :y="tileToWorldY(props.layer, props.character.position_x, props.character.position_y)" :origin-x="0.5" :origin-y="16" :fillColor="0xffffff" :width="74" :height="8" :radius="4" />
-    <RoundRectangle :tween="tween" :x="tileToWorldX(props.layer, props.character.position_x, props.character.position_y)" :y="tileToWorldY(props.layer, props.character.position_x, props.character.position_y)" :origin-x="0.5" :origin-y="31.5" :fillColor="0x09ad19" :width="70" :height="4" :radius="4" />
+  <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
-      :tween="tween"
       @create="createText"
       :text="props.character.name"
-      :x="tileToWorldX(props.layer, props.character.position_x, props.character.position_y)"
-      :y="tileToWorldY(props.layer, props.character.position_x, props.character.position_y)"
       :origin-x="0.5"
       :origin-y="7.5"
       :style="{
@@ -16,31 +17,23 @@
         fontSize: '14px'
       }"
     />
-    <Container v-if="!props.character.characterType">
-      <Image texture="character" :x="tileToWorldX(props.layer, props.character.position_x, props.character.position_y)" :y="tileToWorldY(props.layer, props.character.position_x, props.character.position_y)" :origin-y="1" />
-    </Container>
-    <Container v-else>
-      <Sprite
-        :tween="tween"
-        :texture="charTexture"
-        :play="props.character.isMoving ? charTexture : undefined"
-        :x="tileToWorldX(props.layer, props.character.position_x, props.character.position_y)"
-        :y="tileToWorldY(props.layer, props.character.position_x, props.character.position_y)"
-        :origin-y="1"
-        :flipX="props.character.rotation === 6 || props.character.rotation === 4"
-        :flipY="false"
-      />
-    </Container>
-
+    <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 config from '@/config'
 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 } from 'vue'
+import { watch, computed, ref, onMounted, onUnmounted } from 'vue'
 
 interface Props {
   layer: Phaser.Tilemaps.TilemapLayer
@@ -51,43 +44,39 @@ const props = withDefaults(defineProps<Props>(), {
   character: undefined
 })
 
-const currentVisualPosition = ref({ x: 0, y: 0 })
+const currentX = ref(0)
+const currentY = ref(0)
+const tween = ref<Phaser.Tweens.Tween | null>(null)
 
-const tween = computed(() => {
-  if (!props.character || !props.layer) return null
+const updatePosition = (x: number, y: number) => {
+  const targetX = tileToWorldX(props.layer, x, y)
+  const targetY = tileToWorldY(props.layer, x, y)
 
-  const { position_x, position_y, isMoving } = props.character
-
-  if (!isMoving) return null
-
-  const targetX = tileToWorldX(props.layer, position_x, position_y)
-  const targetY = tileToWorldY(props.layer, position_x, position_y)
-
-  // Use the current visual position for the starting point
-  const { x: currentX, y: currentY } = currentVisualPosition.value
-
-  const tweenConfig = {
-    x: targetX,
-    y: targetY,
-    duration: 750,
-    ease: 'Power2',
-    repeat: 0,
-    yoyo: false,
-    from: { x: currentX, y: currentY },
-    to: { x: targetX, y: targetY },
-    onComplete: () => {
-      // Update the current visual position when the tween completes
-      currentVisualPosition.value = { x: targetX, y: targetY }
-    }
+  if (tween.value && tween.value.isPlaying()) {
+    tween.value.stop()
   }
 
-  return tweenConfig
-})
+  tween.value = props.layer.scene.tweens.add({
+    targets: { x: currentX.value, y: currentY.value },
+    x: targetX,
+    y: targetY,
+    duration: 200,
+    ease: 'Linear',
+    onUpdate: (tween) => {
+      currentX.value = tween.targets[0].x ?? 0
+      currentY.value = tween.targets[0].y ?? 0
+    },
+  })
+}
+
+watch(() => props.character, (newChar) => {
+  if (newChar) {
+    updatePosition(newChar.position_x, newChar.position_y)
+  }
+}, { immediate: true, deep: true })
 
 const charTexture = computed(() => {
-  console.log('Character texture:', props.character)
   if (!props.character?.characterType?.sprite) {
-    console.log('No character type or sprite found')
     return 'idle_left_down'
   }
 
@@ -104,21 +93,19 @@ const charTexture = computed(() => {
   return `${spriteId}-${action}_left_down` // Default fallback
 })
 
-watch(
-  () => props.character,
-  (newCharacter) => {
-    if (newCharacter) {
-      console.log('Character updated:', newCharacter)
-      console.log('Rotation:', newCharacter.rotation)
-      console.log('Current texture:', charTexture.value)
-    } else {
-      console.log('Character is null or undefined')
-    }
-  },
-  { deep: true }
-)
-
 const createText = (text: Phaser.GameObjects.Text) => {
   text.setLetterSpacing(1.5)
 }
-</script>
+
+onMounted(() => {
+  if (props.character) {
+    updatePosition(props.character.position_x, props.character.position_y)
+  }
+})
+
+onUnmounted(() => {
+  if (tween.value) {
+    tween.value.stop()
+  }
+})
+</script>