# How to make a graphic gamepad in phaser 3?

**URL:** https://phaser.discourse.group/t/how-to-make-a-graphic-gamepad-in-phaser-3/5736
**Category:** Phaser 3
**Created:** [April 2, 2020, 11:01am UTC](https://phaser.discourse.group/t/how-to-make-a-graphic-gamepad-in-phaser-3/5736 "2020-04-02T11:01:10Z")
**Posts on this page:** 2
**Page:** 1

<div class="post-metadata">

### Author: ![MariaRoblesSpin](https://avatars.discourse-cdn.com/v4/letter/m/bb73d2/32.png) [@MariaRoblesSpin](https://phaser.discourse.group/u/MariaRoblesSpin)
#### Post date: [April 2, 2020, 11:01am UTC](https://phaser.discourse.group/t/how-to-make-a-graphic-gamepad-in-phaser-3/5736/1 "2020-04-02T11:01:10Z")

</div>

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.

---

<div class="post-metadata">

### Author: ![MariaRoblesSpin](https://avatars.discourse-cdn.com/v4/letter/m/bb73d2/32.png) [@MariaRoblesSpin](https://phaser.discourse.group/u/MariaRoblesSpin)
#### Post date: [April 2, 2020, 2:47pm UTC](https://phaser.discourse.group/t/how-to-make-a-graphic-gamepad-in-phaser-3/5736/2 "2020-04-02T14:47:26Z")

</div>

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.