# Rex-plugins: VirtualJoyStick + Buttons working together (multi-touch)

**URL:** <https://phaser.discourse.group/t/rex-plugins-virtualjoystick-buttons-working-together-multi-touch/12719>\
**Category:** Phaser 3\
**Created:** [December 29, 2022, 3:14pm UTC](https://phaser.discourse.group/t/rex-plugins-virtualjoystick-buttons-working-together-multi-touch/12719 "2022-12-29T15:14:56Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![stanleyseow](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/stanleyseow/32/1190_2.png) [@stanleyseow](https://phaser.discourse.group/u/stanleyseow)\
**Post date:** [December 29, 2022, 3:14pm UTC](https://phaser.discourse.group/t/rex-plugins-virtualjoystick-buttons-working-together-multi-touch/12719/1 "2022-12-29T15:14:56Z")

</div>

When I pressed spacebar + arrow keys on the keyboard, it shoot projectile  
I would like to support this for touchscreen devices with vJoystick + buttons to do similar functions …

When I added a regular button, it just detect the button press or the vJoystick **but not BOTH together**?

Should I use rex-plugins of [Button - Notes of Phaser 3](https://rexrainbow.github.io/phaser3-rex-notes/docs/site/button/) ??

```javascript
    this.buttonFire = this.add.sprite(600, 400, "buttonFire").setInteractive();
    this.buttonFire.setDepth(1).setScrollFactor(0).setScale(0.5);

    this.buttonFire.on("pointerdown", () => {
      console.log("clicked");
      this.input.keyboard.emit("SPACE");
    });

    this.buttonFire.on("pointerup", (pointer) => {
      console.log("released");
    });

```

Secondly, I am not sure if this works, I also wanna emit the spacebar key when button is pressed

```javascript
this.buttonFire.on('pointerdown', ()=> {
   this.input.keyboard.emit('SPACE')
})

```

---

<div class="post-metadata">

**Author:** ![rexrainbow](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/rexrainbow/32/51_2.png) [@rexrainbow](https://phaser.discourse.group/u/rexrainbow)\
**Post date:** [December 30, 2022, 2:07am UTC](https://phaser.discourse.group/t/rex-plugins-virtualjoystick-buttons-working-together-multi-touch/12719/2 "2022-12-30T02:07:11Z")

</div>

Phaser3 engine support 1 touch pointer by default. Need to add one more touch pointer.

```javascript
scene.input.addPointer(1)

```

[Reference](https://rexrainbow.github.io/phaser3-rex-notes/docs/site/touchevents/#amount-of-active-pointers)

---

<div class="post-metadata">

**Author:** ![stanleyseow](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/stanleyseow/32/1190_2.png) [@stanleyseow](https://phaser.discourse.group/u/stanleyseow)\
**Post date:** [December 30, 2022, 5:06am UTC](https://phaser.discourse.group/t/rex-plugins-virtualjoystick-buttons-working-together-multi-touch/12719/3 "2022-12-30T05:06:38Z")

</div>

Thanks for the **scene.input.addPointer()** , it is now working …

Once I enabled multi touch, the **emit** is not working, I didn’t see the emit method on this, basically I want to trigger the spacebar when a button is touch/clicked…

[https://newdocs.phaser.io/docs/3.55.1/Phaser.Input.Keyboard](https://newdocs.phaser.io/docs/3.55.1/Phaser.Input.Keyboard)

```javascript
this.buttonFire.on('pointerdown', ()=> {
    console.log("Clicked")
   this.input.keyboard.emit('SPACE')
})

```

---

<div class="post-metadata">

**Author:** ![rexrainbow](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/rexrainbow/32/51_2.png) [@rexrainbow](https://phaser.discourse.group/u/rexrainbow)\
**Post date:** [December 30, 2022, 5:10am UTC](https://phaser.discourse.group/t/rex-plugins-virtualjoystick-buttons-working-together-multi-touch/12719/4 "2022-12-30T05:10:06Z")

</div>

Missing `this` (scene instance here) as scope parameter.

```plaintext
this.buttonFire.on('pointerdown', ()=> {
    console.log("Clicked")
   this.input.keyboard.emit('SPACE')
}, this)

```

---

<div class="post-metadata">

**Author:** ![stanleyseow](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/stanleyseow/32/1190_2.png) [@stanleyseow](https://phaser.discourse.group/u/stanleyseow)\
**Post date:** [December 30, 2022, 5:17am UTC](https://phaser.discourse.group/t/rex-plugins-virtualjoystick-buttons-working-together-multi-touch/12719/5 "2022-12-30T05:17:14Z")

</div>

Still not working, this is the entire code … maybe I missed something…

The setTint() is working so I know my button event is triggered… it just didn’t trigger the spacebar

```javascript
 // Add an extra touch pointer
    this.input.addPointer(2);

    this.buttonFire = this.add.sprite(650, 600, "buttonFire");
    this.buttonFire.setDepth(1).setInteractive().setScrollFactor(0).setScale(0.5);

    this.buttonFire.on(
      "pointerdown",
      (pointer) => {
        console.log("clicked");
        this.buttonFire.setTint(0xff0000);
        this.input.keyboard.emit(Phaser.Input.Keyboard.KeyCodes.SPACE);
      },
      this
    );

    this.buttonFire.on(
      "pointerup",
      (pointer) => {
        console.log("released");
        this.buttonFire.setTint(0xffffff);
      },
      this
    );

```

---

<div class="post-metadata">

**Author:** ![quyen-jr](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/quyen-jr/32/7112_2.png) [@quyen-jr](https://phaser.discourse.group/u/quyen-jr)\
**Post date:** [December 30, 2022, 10:34am UTC](https://phaser.discourse.group/t/rex-plugins-virtualjoystick-buttons-working-together-multi-touch/12719/6 "2022-12-30T10:34:15Z")

</div>

Dm me [Redirecting...](https://www.facebook.com/profile.php?id=100088457357311&mibextid=ZbWKwL)  
I can help you

---

<div class="post-metadata">

**Author:** ![stanleyseow](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/stanleyseow/32/1190_2.png) [@stanleyseow](https://phaser.discourse.group/u/stanleyseow)\
**Post date:** [December 30, 2022, 2:28pm UTC](https://phaser.discourse.group/t/rex-plugins-virtualjoystick-buttons-working-together-multi-touch/12719/7 "2022-12-30T14:28:40Z")

</div>

I ended up with 4 arrow keys buttons for touch, easier to press and single touch instead of combo of vJoystick + buttons …

closing this …

 ![Screenshot 2022-12-30 at 10.25.58 PM](https://global.discourse-cdn.com/free1/uploads/phaser1/original/2X/a/a4d6ef23a4dbd219f3ea660697f8c1beff70e455.png)