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,36 +45,52 @@ onMounted(() => {
 function setupSelf()
 {
   scene.input.on(Phaser.Input.Events.POINTER_UP, onPointerClick)
-  function onPointerClick(pointer: Phaser.Input.Pointer) {
-    if (!isSelf) return;
+}
 
-    const px = scene.cameras.main.worldView.x + pointer.x
-    const py = scene.cameras.main.worldView.y + pointer.y
+function onPointerClick(pointer: Phaser.Input.Pointer) {
+  if (!isSelf) return;
 
-    pointer_tile.value = getTile(px, py, props.layer) as Phaser.Tilemaps.Tile
-    if (pointer_tile.value) {
-      const worldPoint = props.layer.tileToWorldXY(pointer_tile.value.x, pointer_tile.value.y)
-      const position_x = worldPoint.x + config.tile_size.y
-      const position_y = worldPoint.y
-      socket.getConnection.emit('character:move', { position_x, position_y })
-    }
+  const px = scene.cameras.main.worldView.x + pointer.x
+  const py = scene.cameras.main.worldView.y + pointer.y
 
-    //Directions for player sprites + animations
-    if (px < 0 && py > 0) {
-      console.log('down left')
-    } else if (px < 0 && py < 0) {
-      console.log('top left')
-    } else if (px > 0 && py > 0) {
-      console.log('down right')
-    } else if (px > 0 && py < 0) {
-      console.log('top right')
-    }
+  pointer_tile.value = getTile(px, py, props.layer) as Phaser.Tilemaps.Tile
+  if (pointer_tile.value) {
+    const worldPoint = props.layer.tileToWorldXY(pointer_tile.value.x, pointer_tile.value.y)
+    const position_x = worldPoint.x + config.tile_size.y
+    const position_y = worldPoint.y
+    socket.getConnection.emit('character:move', { position_x, position_y })
   }
 
-  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
+  //Directions for player sprites + animations
+  if (px < 0 && py > 0) {
+    console.log('down left')
+  } else if (px < 0 && py < 0) {
+    console.log('top left')
+  } else if (px > 0 && py > 0) {
+    console.log('down right')
+  } else if (px > 0 && py < 0) {
+    console.log('top right')
   }
 }
+
+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>