Search code examples
phaser-frameworkhotkeys

How to create new keys in phaser


I am new in Phaser and I have just working on the first example. My doubt is that when I create new keys I can see the console log output working fine but the actions called are not working.

IT´s a bad use of the creation for the keys?

I have look for an the solution in the documentation but the function createCursorsKeys is not well explained.

Thanks in advance.

    var config = {
        type: Phaser.AUTO,
        width: 800,
        height: 600,
        physics: {
            default: 'arcade'

        },
        scene: {
            preload: preload,
            create: create,
            update: update
         }
    };
    var spaceKey;
    var player;
    var bomb;
    var cursors;
    var score = 0;
    var scoreText;

    var keyA;
    var keyS;
    var keyD;
    var keyW;

    var game = new Phaser.Game(config);

    function preload (){
        this.load.image('sky', 'assets/sky.png');
        this.load.image('star', 'assets/star.png');
        this.load.image('bomb', 'assets/bomb.png');
        this.load.spritesheet('dude', 'assets/link.png', { frameWidth: 78, frameHeight: 78});
    }

    function create (){
        this.add.image(400, 300, 'sky');
        this.add.image(400, 300, 'bomb');

        player = this.physics.add.sprite(100, 450, 'dude');
        bomb = this.physics.add.sprite(100, 250, 'bomb');

        star = this.physics.add.sprite(200, 250, 'star');

        player.setCollideWorldBounds(true);


        this.physics.add.collider(player,bomb);
        this.physics.add.overlap(player,bomb,this.takeCoin, null, this);
        bomb.setImmovable();
        this.physics.add.overlap(player, star, collectStar, null, this);

        this.anims.create({
        key: 'left',
        frames: this.anims.generateFrameNumbers('dude', { start: 21, end: 27 }),
        frameRate: 10,
        repeat: -1
        });

        this.anims.create({
        key: 'turn',
        frames: [ { key: 'dude', frame: 4 } ],
        frameRate: 20
        });

        this.anims.create({
        key: 'right',
        frames: this.anims.generateFrameNumbers('dude', { start: 14, end:20 }),
        frameRate: 10,
        repeat: -1
        });

        this.anims.create({
        key: 'up',
        frames: this.anims.generateFrameNumbers('dude', { start: 7, end: 13 }),
        frameRate: 10,
        repeat: -1
        });

        this.anims.create({
        key: 'down',
        frames: this.anims.generateFrameNumbers('dude', { start: 0, end: 6 }),
        frameRate: 10,
        repeat: -1
        });

        this.anims.create({
        key: 'A',
        frames: this.anims.generateFrameNumbers('dude', { start: 0, end: 1 }),
        frameRate: 10,
        repeat: -1
        });

        cursors = this.input.keyboard.createCursorKeys();


        keyA = this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.A);
        keyS = this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.S);
        keyD = this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.D);
        keyW = this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.W);

        scoreText = this.add.text(16, 16, 'score: 0', { fontSize: '32px', fill: '#000' });



    }

    function update (){  
       if(keyA.isDown) {
            console.log('A key pressed');
            player.setVelocityX(-160);
            player.anims.play('KeyA', true);
        } 

        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 if (cursors.down.isDown){
            player.setVelocityY(160);

            player.anims.play('down', true);
        }
        else if (cursors.up.isDown){
            player.setVelocityY(-160);

            player.anims.play('up', true);
        }
        else{
            player.setVelocityX(0);player.setVelocityY(0);

            player.anims.play('turn');
        }

    }

    function takeCoin(player, bomb) {
        //this.physics.pause();  
        score += 10;
        scoreText.setText('Score: ' + score);
        player.setTint(0xff0000);

    }

    function collectStar (player, star){
      star.disableBody(true, true);
      score += 10;
      scoreText.setText('Score: ' + score);

    }

Solution

  • Well the way I usually create new cursor keys in Phaser 3 is by creating an object in the create function, like so :

    this.keys = this.input.keyboard.addKeys({
        a:  Phaser.Input.Keyboard.KeyCodes.A,
        s:  Phaser.Input.Keyboard.KeyCodes.S,
        d:  Phaser.Input.Keyboard.KeyCodes.D,
        w:  Phaser.Input.Keyboard.KeyCodes.W
    });
    

    then in the update function I call it like this :

    if (this.keys.a.isDown){
        // Whatever you want key A to do when pressed
    }