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,7 +45,9 @@ onMounted(() => {
 function setupSelf()
 {
   scene.input.on(Phaser.Input.Events.POINTER_UP, onPointerClick)
-  function onPointerClick(pointer: Phaser.Input.Pointer) {
+}
+
+function onPointerClick(pointer: Phaser.Input.Pointer) {
   if (!isSelf) return;
 
   const px = scene.cameras.main.worldView.x + pointer.x
@@ -69,12 +71,26 @@ function setupSelf()
   } else if (px > 0 && py < 0) {
     console.log('top right')
   }
-  }
+}
 
-  function getTile(x: number, y: number, layer: Phaser.Tilemaps.TilemapLayer): Phaser.Tilemaps.Tile | undefined {
+function getTile(x: number, y: number, layer: Phaser.Tilemaps.TilemapLayer): Phaser.Tilemaps.Tile | undefined {
   const tile: Phaser.Tilemaps.Tile = layer.getTileAtWorldXY(x, y)
   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>