noxious/client
6
0
Fork 1
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

started working on character animations (WIP)

Browse Source
This commit is contained in:
Dennis Postma
2024-06-06 23:12:48 +02:00
parent d70e0c443e
commit b2b4f3c60e
12 changed files with 43 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

66
src/components/sprites/Character.vue
View File

@ -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>