#263 - Updated character movement to pure ts (WIP)

src/components/game/character/Character.vue

@@ -45,12 +45,22 @@ const currentX = ref(0)
 const currentY = ref(0)
 const isometricDepth = ref(1)
 const isInitialPosition = ref(true)
-const tween = ref<Phaser.Tweens.Tween | null>(null)
+const isMoving = ref(false)
+let animationFrame: number | null = null
+const moveSpeed = 5.7
 
 const updateIsometricDepth = (x: number, y: number) => {
   isometricDepth.value = calculateIsometricDepth(x, y, 28, 94, true)
 }
 
+const stopMovement = () => {
+  isMoving.value = false
+  if (animationFrame) {
+    cancelAnimationFrame(animationFrame)
+    animationFrame = null
+  }
+}
+
 const updatePosition = (x: number, y: number, direction: Direction) => {
   const targetX = tileToWorldX(props.tilemap, x, y)
   const targetY = tileToWorldY(props.tilemap, x, y)
@@ -62,41 +72,42 @@ const updatePosition = (x: number, y: number, direction: Direction) => {
     return
   }
 
-  if (tween.value?.isPlaying()) {
+  if (isMoving.value) {
-    tween.value.stop()
+    stopMovement()
   }
 
   const distance = Math.sqrt(Math.pow(targetX - currentX.value, 2) + Math.pow(targetY - currentY.value, 2))
 
-  if (distance >= config.tile_size.x / 1.1) {
+  isMoving.value = true
-    currentX.value = targetX
+  const startTime = performance.now()
-    currentY.value = targetY
+  const startX = currentX.value
-    return
+  const startY = currentY.value
-  }
+  const duration = distance * moveSpeed
 
-  const duration = distance * 5.7
-
-  tween.value = props.tilemap.scene.tweens.add({
-    targets: { x: currentX.value, y: currentY.value },
-    x: targetX,
-    y: targetY,
-    duration,
-    ease: 'Linear',
-    onStart: () => {
   if (direction === Direction.POSITIVE) {
     updateIsometricDepth(x, y)
   }
-    },
+
-    onUpdate: (tween) => {
+  const animate = (currentTime: number) => {
-      currentX.value = tween.targets[0].x
+    if (!isMoving.value) return
-      currentY.value = tween.targets[0].y
+
-    },
+    const elapsed = currentTime - startTime
-    onComplete: () => {
+    const progress = Math.min(elapsed / duration, 1)
+
+    currentX.value = startX + (targetX - startX) * progress
+    currentY.value = startY + (targetY - startY) * progress
+
+    if (progress < 1) {
+      animationFrame = requestAnimationFrame(animate)
+    } else {
+      isMoving.value = false
       if (direction === Direction.NEGATIVE) {
         updateIsometricDepth(x, y)
       }
     }
-  })
+  }
+
+  animationFrame = requestAnimationFrame(animate)
 }
 
 const calcDirection = (oldX: number, oldY: number, newX: number, newY: number): Direction => {
@@ -176,6 +187,6 @@ onMounted(() => {
 })
 
 onUnmounted(() => {
-  tween.value?.stop()
+  stopMovement()
 })
 </script>