rexrainbow / phaser3-rex-notes

Notes of phaser3 engine
MIT License
1.21k stars 260 forks source link

[VirtualJoystick] Can VirtualJoystick and Button coexist? #288

Closed desmofab closed 2 years ago

desmofab commented 2 years ago

Hi, first of all thanks for all these amazing plugins and for all the time spent on them, I really appreciate that. I've a just a simple question about VirtualJoystick plugin: Using Phaser3, I was trying to implement a virtualjoystick plugin (player move), and a simple fire button. They actually work like a charm, but only if I press one of them individually. When playing on a mobile device, if I keep the joystick pressed (because of moving), the fire button doesn't work. I've to release the thumb on virtualjoystick before, either the joystick or the button I mean. Trying to debug using devtools on Chrome, it seems that the click event on the button, doesn't fire at all if you are moving the joystick. I've already set activePointers to 2 (but also 3,4...) in game config, and also tried setInteractive() with no luck.

This is my code:

import Button from 'phaser3-rex-plugins/plugins/button.js';
import VirtualJoystick from 'phaser3-rex-plugins/plugins/virtualjoystick.js';

export class Player extends Phaser.Physics.Arcade.Image {
...

createJoyStick() {
  this.joystick = new VirtualJoystick(this.scene, {
    x: 100,
    y: 500,
    radius: 50,
  });
}

...

createFireButton() {
  const button = this.scene.add.circle(700, 500, 30).setStrokeStyle(2, 0x1a65ac)
  this.fireButton = new Button(button);
  this.fireButton.on('click', () => {
    //... fire!
  });
}

this is my game config:

{
  type: Phaser.AUTO,
  scale: {
    mode: Phaser.Scale.FIT,
    autoCenter: Phaser.Scale.CENTER_BOTH,
    width: 800,
    height: 600
  },
  physics: {
    default: 'arcade',
    arcade: {
        gravity: { y: 0 },
        debug: false
    }
  },
  input: {
    activePointers: 2,
  },
  scene: [MainScene]
}

and from my package.json

...
"phaser": "^3.55.2",
"phaser3-rex-plugins": "^1.1.69",
...

Any ideas?

Thank you in advance

rexrainbow commented 2 years ago

In my testing, set input.activePointers to 3 can work. (But 2 can't, I guess that 2 means 1 mouse and 1 touch pointer). Or try this line scene.input.addPointer(1), without setting input.activePointers. See this demo.

desmofab commented 2 years ago

Thank you @rexrainbow, you're right, it works setting activePointers to 3. I think I misunderstood the docs

1 in desktop
2 in touch device. (0 for mouse, 1 for 1 touch pointer)

and I was also sure I set activePointers to 3, just an attempt, but, ok, it's been clearly a stupid mistake... better this way.

Thank you again.