Phaser 3: hidden gameObjects do not receive pointer events

Phaser 3
1

Hi

I am new to phaser and I’ve got an issue with invisible GameObjects.
In my actual project I need clickable invisible rectangles. But however I tried, they won’t be clickable.

Here is my code (here only with one rectangle):

import * as Phaser from “…/phaser.esm.min.js”;

export class StartScreen extends Phaser.GameObjects.Container{

_touchSurfaces = [];

constructor(scene, x, y){
    super(scene, x, y);
}

init(startImage){
    this.add(startImage);

    //create touch-surfaces
    this._touchSurfaces.push(this.scene.add.rectangle(150, 345, 345, 345, 0x6666ff).setOrigin(0,0));

    for(let i = 0; i < this._touchSurfaces.length; i++){

        this._touchSurfaces[i].setInteractive();
        this._touchSurfaces[i].input.alwaysEnabled = true;

        this._touchSurfaces[i].setAlpha(0); //hide rectangles from screen

        this._touchSurfaces[i].on('pointerdown', (event) => this._chapterChosen(event, i));

        this.add(this._touchSurfaces[i]);
    }
}

_chapterChosen(e, rectangleIndex){
    console.log("StartScreen clicked on rectanlge Index: ",rectangleIndex)
}

}

What I already tried (and did not work):

  • set visible to false instead of alpha = 0
  • tried to set a hitArea (assuming it would be still available if the object is not)
  • converted the Rectangles into sprites
  • tried this example: https://codepen.io/samme/pen/VwLeamK which works (however the image flickers on my computer, as I constantly get onover/onout-events when my mouse moves over the picture): the only important difference between this and my code I see here is that the image is set to alpha 0 after the first interaction and not before it…

If I set the rectangles to alpha = 0.00001, then it works. But I do not think this is either performance-wise good nor a good practive :grin:.

Thanks in advance and best wishes

Ennio

2

:wave:

Use a Zone game object instead.

3

Thanks a lot for the fast help!
I was wondering how I could debug Zone objects, as they are never visible. It’s easy and straightforward:
https://newdocs.phaser.io/docs/3.55.2/focus/Phaser.Input.InputPlugin-enableDebug