setTopOnly / Proper use of pointer events

Phaser 3
1

I’m making a game that has a settings menu that overlays the game, but all pointerevents in gameobjects behind the settings menu are still registered. Setting scene.input.setGlobalTopOnly(true) does not affect this behavior.

Maybe the reason for this is I’m using gameobject.on(‘pointerdown’, function() {}) instead of adding them though scene.input like I see is being done in the example: Phaser - Examples - Top Only

When I try this approach on my button class, all functions are executed when clicking any of the buttons, here’s an example of what I’m doing:

class Button extends Phaser.GameObjects.Container {
  
  private func:Function

  constructor(scene:Phaser.Scene, type:number, x:number, y:number, func:Function) {
    super(scene, x, y)
    
    this.func = func
    
  //  how I used pointer events before
  //  this.on('pointerdown', this.onClick)
  //  how I'm trying to use them now
      this.scene.input.on('gameobjectdown', this.onClick.bind(this))
  }
  
  private onClick():void {
 //   Sound.play(SOUND_BUTTON)
    this.func()
  }
}

I’m pretty new to Phaser so maybe I’m doing something strange and maybe this isn’t even the way to get setTopOnly to work. I hope someone can point me in the right direction.

2

:wave:

Where are you clicking, and what happens?

3

Here’s the game, click the gear icon on the right to activate the overlay menu:

http://www.rickvanhelden.com/blackhole/

The overlay is a Container that’s placed in the Scene. Inside the container is a Graphics gameobject that covers the entire screen.

I’ve added this.input.setGlobalTopOnly(true) to the create() function of the scene but pointerover and pointerdown events are still coming through as you can see.

4

Noninteractive game objects don’t block input to interactive game objects.

Add an interactive Zone game object underneath the buttons.

1 Like
5

Thanks a lot, works like a charm!