How make Virtual button in Phaser 3?

[Scrooler]

Hello! Have 3 virtual button for moving player. 

Use arcade physics. Phaser version: 3.10.0

How to make when holding down button with your finger, the player began to move. What you need to add the condition?

Create:

    this.input.addPointer(2);


    this.jumpBtn = this.add.sprite(650, 950, 'jump').setScale(0.4).setScrollFactor(0).setInteractive();
    this.leftBtn = this.add.sprite(100, 950, 'left').setScale(0.4).setScrollFactor(0).setInteractive();
    this.rightBtn = this.add.sprite(250, 950, 'right').setScale(0.4).setScrollFactor(0).setInteractive();

    this.jumpBtn.on('pointerdown', function (pointer,pointerdown) {

    });

    this.leftBtn.on('pointerdown', function (pointer,pointerdown) {

    });

    this.rightBtn.on('pointerdown', function (pointer,pointerdown) {

    });

function update ()
{

    if (cursors.left.isDown)
    {
        player.setVelocityX(-200);
        player.anims.play('left', true);
    }
    else if (cursors.right.isDown )
    {
        player.setVelocityX(200);
        player.anims.play('right', true);
    }
    else
    {
        player.setVelocityX(0);
        player.anims.play('turn');
    }
    if  (cursors.up.isDown && player.body.touching.down )
    {
        player.setVelocityY(-530);
    }

}

 

[BdR]

Instead of putting the player move/animate logic inside the update() function, I think it's better to abstract it into separate functions. This makes the code easier to maintain but also makes it easier to support different input methods, like both virtual touch buttons and actual keyboard input.

So something like this

// virtual buttons input, to move and jump
this.leftBtn.on('pointerdown',   doGoLeft);
this.rightBtn.on('pointerdown',  doGoRight);
this.jumpBtn.on('pointerdown',   doJump);

// virtual buttons input, release to stop moving
this.leftBtn.on('pointerout',   doStop);
this.rightBtn.on('pointerout',  doStop);

function update ()
{
	// keyboard input
	if (cursors.left.isDown)
	{
		this.doGoLeft();
	}
	else if (cursors.right.isDown )
	{
		this.doGoRight();
	}
	else
	{
		this.doStop();
	}
	if  (cursors.up.isDown)
	{
		this.doJump();
	}
}

function doGoLeft()
{
	player.setVelocityX(-200);
	player.anims.play('left', true);
}

function doGoRight()
{
	player.setVelocityX(200);
	player.anims.play('right', true);
}

function doStop()
{
	player.setVelocityX(0);
	player.anims.play('turn');
}

function doJump()
{
	if (player.body.touching.down) {
		player.setVelocityY(-530);
	}
}