Detect "pointerdownout" from within an interactive GameObjects class

Phaser 3
1

Hello everybody, this is my first question and nice to be here.

I have drawn a circle in the middle of a scene, now I want to implement select/deselect functionality inside the Arc class itself.

export default class SimpleScene extends Phaser.Scene {
  constructor() {
    super();
  }

  create() {
    this.add.existing(new TestCircle({scene: this}));
  }
}

class TestCircle extends Phaser.GameObjects.Arc {
  constructor(opts) {
    super(opts.scene, 150, 150, 40, undefined, undefined, undefined, 0xFFFFFF);
    this.setInteractive();
    this.on(Phaser.Input.Events.POINTER_OVER, this.onPointerOver);
    this.on(Phaser.Input.Events.POINTER_OUT, this.onPointerOut);
    this.on(Phaser.Input.Events.POINTER_DOWN, this.onPointerDown);
    opts.scene.input.on(Phaser.Input.Events.POINTER_DOWN, this.onPointerDownOut);
    this.on(Phaser.Input.Events.POINTER_DOWN_OUTSIDE, () => console.log('NOT OK'));
  }

  onPointerOver() { console.log('onPointerOver'); }
  onPointerOut() { console.log('onPointerOut'); }
  onPointerDown(ptr, x, y, evt) { console.log('onPointerDown'); evt.stopPropagation(); }
  onPointerDownOut() { console.log('onPointerDownOut'); }
}

Edit
One possible solution I came up with is to attach a “pointerdown” handler to the scene

2

:wave:

POINTER_DOWN_OUTSIDE comes from the scene Input Plugin and means outside the game canvas.

I think you can use the currentlyOver argument in POINTER_DOWN.

3

Hey Samme :slight_smile:

In my example however, POINTER_DOWN is not fired when the click happens outside TestCircle.
It does work however if I attach an handler to SimpleScene.

I wonder if I’m taking a wrong approach. What I want to achieve is having multiple circles (units), select one with a left click and move it around (right click). Then deselect it with a left click outside itself. With all the functionality living inside TestCircle itself.

4

This one should be firing if you click anywhere in the scene.