why is this.input.keyboard.on('keyup-LEFT', function() {}) not working in phaser.js?

Question

In my sprite sheet I have two separate frames for when the character is not moving, one is for when she was moving left and then stopped and the other for when she was moving right and then stopped, so i need it to fire up on sort of a key up event. I've seen very similar question here, but the answer didn't work for me, it said to add:

scene.input.keyboard.on('keyup-LEFT', function() 
{
    
});

but it just broke my code, screen goes black and nothing happens, i tried adding that code in either create() and update() So i tried instead:

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');
});

It doesn't break my code, but also nothing happens, I also tried player instead of scene or this, (player is a variable to which my sprite is assigned), but that also broke my code, just like scene did. BTW, stopLeft and stopRight works fine, because i tested them on normal this.input.keyboard.createCursorKeys() events.

user_1679286 · Answer

The most common way to implement player movement and/or input is, to put the logic in the update function, and check if the keys are pressed/down (isDown).

I would only use this.input.keyboard, for hot-key like 'ESC' or some special hot-keys.

Here a short working demo:
(for more details checkout this official example)

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);

why is this.input.keyboard.on('keyup-LEFT', function() {}) not working in phaser.js?

1 Answers