How to make a graphic gamepad in phaser 3?

Phaser 3
1

Hi everybody!
I’m trying to make one graphic gamepad for mobile devices to play touching this gamepad at the mobile screen.

When I use the keyPad the controls work perfectly:
movePlayerDesktop () { if (this.cursorKeys.left.isDown){ this.player.setVelocityX(-160) this.player.anims.play('left', true) } else if (this.cursorKeys.right.isDown) { this.player.setVelocityX(160) this.player.anims.play('right', true) } else { this.player.setVelocityX(0) this.player.anims.play('turn') } }
My sprite animation works fine and it makes the lateral movement in each case.

But when I use the same animations with the graphic gamepad a can’t see the animation and the event “pointerdown” only takes the initial click. So there is no animation and a movement of only one pixel.
` movePlayerMobile () {
// buttons display
var buttonLeft = this.add.image(0, 0, ‘button’)
var buttonRight = this.add.image(140, 0, ‘button’)
var buttonShoot = this.add.image(1400, 900, ‘button’)

//direction buttons
var directionButtons = this.add.container(50, 900, [ buttonLeft, buttonRight ])
buttonLeft.setInteractive()
buttonRight.setInteractive()

// Shooter
buttonShoot.setInteractive()
// var pointer = this.input.activePointer
// if (pointer.isDown) {
//   this.player.setVelocityX(-160)
//   this.player.anims.play('left', true)
//   console.log('valor de pointer', pointer.id)
// }

buttonLeft.on('pointerdown', () => {
  this.player.setVelocityX(160);
  this.player.anims.play('left', true);
})

buttonLeft.on('pointerup', () => {
  this.player.setVelocityX(0)
  this.player.anims.play('turn')
})

buttonRight.on('pointerdown', () => {
  this.player.setVelocityX(160);
  this.player.anims.play('right', true);
})

buttonRight.on('pointerup', () => {
  this.player.setVelocityX(0)
  this.player.anims.play('turn')
})
buttonShoot.on('pointerdown', () => {
  buttonShoot.setTint(0x44ff44)
  if (this.player.active) {
    this.shootBullet()
  }
})

}`

When I use pointer.isDown it makes the movement but not the animation, and I can`t identify the button i’m at with this method…

Any suggestions?
Thank you in advance.
I’m a complete begginer with Phaser.

2

Never mind! I figured it out!

`
movePlayerMobile () {
//buttons display
var buttonLeft = this.add.image(0, 0, ‘button’)
var buttonRight = this.add.image(140, 0, ‘button’)
var buttonShoot = this.add.image(1400, 900, ‘button’)

    //direction buttons
    var directionButtons = this.add.container(50, 900, [ buttonLeft, buttonRight ])
    buttonLeft.setInteractive()
    buttonRight.setInteractive()
    
    // Shooter
    buttonShoot.setInteractive()

    buttonLeft.on('pointerdown', () => {
      this.cursorKeys.left.isDown = true
    })

    buttonLeft.on('pointerup', () => {
      this.cursorKeys.left.isDown = false
    })

    buttonRight.on('pointerdown', () => {
      this.cursorKeys.right.isDown = true
    })

    buttonRight.on('pointerup', () => {
      this.cursorKeys.right.isDown = false
    })

    buttonShoot.on('pointerdown', () => {
      buttonShoot.setTint(0x44ff44)
      if (this.player.active) {
        this.shootBullet()
      }
    })
  }`

and then I call My MovePlayerDesktop function and everithing works properly.