started working on character animations (WIP)

src/components/Controls.vue

@@ -28,7 +28,7 @@ function onPointerMove(pointer: Phaser.Input.Pointer) {
     // Convert tile coordinates to world coordinates
     const worldPoint = props.layer.tileToWorldXY(pointer_tile.value.x, pointer_tile.value.y)
     waypoint.value.x = worldPoint.x + config.tile_size.y
-    waypoint.value.y = worldPoint.y + config.tile_size.y
+    waypoint.value.y = worldPoint.y + config.tile_size.y + 15
   } else {
     waypoint.value.visible = false
   }

src/components/screens/Characters.vue

@@ -11,7 +11,7 @@
           </button>
   
           <div class="sprite-container">
-            <img draggable="false" src="/assets/avatar/default/base_right_down.png" />
+            <img draggable="false" src="/assets/avatar/default/0.png" />
           </div>
           <span>Lvl. {{ character.level }}</span>
         </div>

src/components/sprites/Character.vue

@@ -45,6 +45,8 @@ onMounted(() => {
 function setupSelf()
 {
   scene.input.on(Phaser.Input.Events.POINTER_UP, onPointerClick)
+}
+
 function onPointerClick(pointer: Phaser.Input.Pointer) {
   if (!isSelf) return;
 
@@ -76,5 +78,19 @@ function setupSelf()
   if (!tile) return undefined;
   return tile
 }
-}
+
+scene.anims.create({
+  key: 'walk',
+  frames: scene.anims.generateFrameNumbers('walk', {
+    start: 0,
+    end: 4
+  }),
+});
+
+/**
+ * Resources:
+ * https://www.youtube.com/watch?v=9sWrGohw9qo
+ * https://jsfiddle.net/juwalbose/pu0gt7nc/
+ *
+ */
 </script>