diff --git a/public/assets/avatar/default/0.png b/public/assets/avatar/default/0.png new file mode 100644 index 0000000..40cf28d Binary files /dev/null and b/public/assets/avatar/default/0.png differ diff --git a/public/assets/avatar/default/1.png b/public/assets/avatar/default/1.png new file mode 100644 index 0000000..965d5e4 Binary files /dev/null and b/public/assets/avatar/default/1.png differ diff --git a/public/assets/avatar/default/2.png b/public/assets/avatar/default/2.png new file mode 100644 index 0000000..0ac3732 Binary files /dev/null and b/public/assets/avatar/default/2.png differ diff --git a/public/assets/avatar/default/3.png b/public/assets/avatar/default/3.png new file mode 100644 index 0000000..b4c4da6 Binary files /dev/null and b/public/assets/avatar/default/3.png differ diff --git a/public/assets/avatar/default/4.png b/public/assets/avatar/default/4.png new file mode 100644 index 0000000..dbdeb41 Binary files /dev/null and b/public/assets/avatar/default/4.png differ diff --git a/public/assets/avatar/default/anim.png b/public/assets/avatar/default/anim.png new file mode 100644 index 0000000..b8fd4e5 Binary files /dev/null and b/public/assets/avatar/default/anim.png differ diff --git a/public/assets/avatar/default/base_right_down.png b/public/assets/avatar/default/base_right_down.png deleted file mode 100644 index 51637f7..0000000 Binary files a/public/assets/avatar/default/base_right_down.png and /dev/null differ diff --git a/public/assets/avatar/default/yeet.png b/public/assets/avatar/default/yeet.png new file mode 100644 index 0000000..5b876f0 Binary files /dev/null and b/public/assets/avatar/default/yeet.png differ diff --git a/public/assets/waypoint.png b/public/assets/waypoint.png index 7fcd1fb..1468193 100644 Binary files a/public/assets/waypoint.png and b/public/assets/waypoint.png differ diff --git a/src/components/Controls.vue b/src/components/Controls.vue index cbac60e..b8221af 100644 --- a/src/components/Controls.vue +++ b/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 } diff --git a/src/components/screens/Characters.vue b/src/components/screens/Characters.vue index 19bc8ab..4c794b5 100644 --- a/src/components/screens/Characters.vue +++ b/src/components/screens/Characters.vue @@ -11,7 +11,7 @@
- +
Lvl. {{ character.level }} diff --git a/src/components/sprites/Character.vue b/src/components/sprites/Character.vue index 1597756..d06f803 100644 --- a/src/components/sprites/Character.vue +++ b/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/ + * + */