En mi hoja de sprites, tengo dos marcos separados para cuando el personaje no se mueve, uno es para cuando se movía hacia la izquierda y luego se detuvo y el otro para cuando se movía hacia la derecha y luego se detuvo, así que necesito que se encienda en orden de un evento clave. He visto una pregunta muy similar aquí, pero la respuesta no funcionó para mí, decía agregar:
scene.input.keyboard.on('keyup-LEFT', function() { }); pero simplemente rompió mi código, la pantalla se vuelve negra y no pasa nada, intenté agregar ese código en create() y update() Así que lo intenté en su lugar:
this.input.keyboard.on('keyup-LEFT', function() { player.setVelocityX(0); player.anims.play('stopLeft'); }); this.input.keyboard.on('keyup-RIGHT', function() { player.setVelocityX(0); player.anims.play('stopRight'); }); No rompe mi código, pero tampoco pasa nada, también probé player en lugar de scene o this , ( player es una variable a la que está asignado mi sprite), pero eso también rompió mi código, al igual que lo hizo scene . Por cierto, stopLeft y stopRight funcionan bien, porque los probé en eventos normales this.input.keyboard.createCursorKeys() .
La forma más común de implementar el movimiento y/o la entrada del jugador es poner la lógica en la función de update y verificar si las teclas están presionadas/abajo ( isDown ).
Solo usaría this.input.keyboard , para teclas de acceso rápido como 'ESC' o algunas teclas de acceso rápido especiales.
Aquí una breve demostración de trabajo:
(para más detalles echa un vistazo a este ejemplo oficial )
document.body.style = 'margin:0;'; var config = { type: Phaser.AUTO, width: 536, height: 183, physics: { default: 'arcade', arcade: { gravity: { y: 100 } } }, scene: { preload, create, update }, banner: false }; let player; let cursor; let animsKeyText; function preload() { this.load.spritesheet('dude', 'https://labs.phaser.io/src/games/firstgame/assets/dude.png', { frameWidth: 32, frameHeight: 48 }); } function create() { let floor = this.add.rectangle(0, config.height, config.width, 20, 0xcdcdcd) .setOrigin(0, .5); animsKeyText = this.add.text(10, 10, 'current anims-key: ??') this.physics.add.existing(floor, true); player = this.physics.add.sprite(100, 10, 'dude') .setCollideWorldBounds(true); this.anims.create({ key: 'left', frames: this.anims.generateFrameNumbers('dude', { start: 0, end: 3 }), frameRate: 10, repeat: -1 }); this.anims.create({ key: 'right', frames: this.anims.generateFrameNumbers('dude', { start: 5, end: 8 }), frameRate: 10, repeat: -1 }); this.anims.create({ key: 'stop-left', frames: this.anims.generateFrameNumbers('dude', { start: 0, end: 1 }), frameRate: 10, repeat: 0 }); this.anims.create({ key: 'stop-right', frames: this.anims.generateFrameNumbers('dude', { start: 5, end: 6 }), frameRate: 10, repeat: 0 }); this.physics.add.collider(player, floor); cursors = this.input.keyboard.createCursorKeys(); } function update() { if (cursors.left.isDown) { player.setVelocityX(-160); player.anims.play('left', true); } else if (cursors.right.isDown) { player.setVelocityX(160); player.anims.play('right', true); } else { player.setVelocityX(0); if (player.anims && player.anims.currentAnim) { // just to prevent of keys "stop-stop....-right" or so if (player.anims.currentAnim.key.indexOf('stop') == -1) { let newKey = `stop-${player.anims.currentAnim.key}`; player.anims.play(newKey, true); } } } if (player.anims && player.anims.currentAnim) { animsKeyText.setText(`current anims-key: ${player.anims.currentAnim.key}`); } } new Phaser.Game(config); <script src="https://cdn.jsdelivr.net/npm/phaser@3.55.2/dist/phaser.js"></script>