Jump to content

How make Virtual button in Phaser 3?


Scrooler
 Share

Recommended Posts

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

}

 

Link to comment
Share on other sites

  • 3 weeks later...

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

 

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...