How to track more than one mouse click event at the same time?

[KostarSf]

Hi! I'm having some trouble developing a game. I can't track multiple mouse buttons pressed at the same time. Here is a sample code:

engine.input.pointers.on("down", (evt) => {
  if (evt.button === PointerButton.Right) {
    if (this.accelerated !== true) {
      this.accelerated = true;
      this.markStale();
    }
  }

  if (evt.button === PointerButton.Left) {
    const direction = Vector.fromAngle(this.rotation);
    const pos = this.pos.add(direction.scale(15));
    const vel = this.vel.add(direction.scale(350));

    const bullet = new Bullet({
      shooter: this,
      pos,
      vel,
      rotation: this.rotation,
      damage: 10,
    });
    this.scene?.add(bullet);
  }
});

This works fine as long as the player doesn't hold down the left and right mouse buttons at the same time. In this case only the mouse button pressed first is triggered.

I tried making two separate events, but that didn't work either. Please advise how this can be implemented 🤔

[eonarheim]

@KostarSf Good question! Let me look into the details here.

It looks like you might need to dig into the native event to get at the multiple buttons, https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/buttons

Looks like they're stashed in a bitmask .buttons property, so to unpack them you'll need to do some bitwise operations

engine.input.pointers.on("down", (evt) => {
  const leftButtonPressed = 0b0001 & evt.nativeEvent.buttons;
  const rightButtonPressed = 0b0010 & evt.nativeEvent.buttons;
  const middleButtonPressed = 0b0100 & evt.nativeEvent.buttons;
 

  ...
});

Let me know if that helps!

I think I'll look at expanding excalibur to have a friendlier way of exposing simultaneous presses

[KostarSf]

@eonarheim Thanks for your reply. I'll try to do this and see if it works