# Phaser 3: hidden gameObjects do not receive pointer events

**URL:** <https://phaser.discourse.group/t/phaser-3-hidden-gameobjects-do-not-receive-pointer-events/13901>\
**Category:** Phaser 3\
**Created:** [January 17, 2024, 4:52pm UTC](https://phaser.discourse.group/t/phaser-3-hidden-gameobjects-do-not-receive-pointer-events/13901 "2024-01-17T16:52:57Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![Ennio](https://avatars.discourse-cdn.com/v4/letter/e/d78d45/32.png) [@Ennio](https://phaser.discourse.group/u/Ennio)\
**Post date:** [January 17, 2024, 4:52pm UTC](https://phaser.discourse.group/t/phaser-3-hidden-gameobjects-do-not-receive-pointer-events/13901/1 "2024-01-17T16:52:57Z")

</div>

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](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 😁.

Thanks in advance and best wishes

Ennio

---

<div class="post-metadata">

**Author:** ![samme](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/samme/32/5275_2.png) [@samme](https://phaser.discourse.group/u/samme)\
**Post date:** [January 17, 2024, 4:54pm UTC](https://phaser.discourse.group/t/phaser-3-hidden-gameobjects-do-not-receive-pointer-events/13901/2 "2024-01-17T16:54:06Z")

</div>

👋

Use a Zone game object instead.

---

<div class="post-metadata">

**Author:** ![Ennio](https://avatars.discourse-cdn.com/v4/letter/e/d78d45/32.png) [@Ennio](https://phaser.discourse.group/u/Ennio)\
**Post date:** [January 18, 2024, 10:24am UTC](https://phaser.discourse.group/t/phaser-3-hidden-gameobjects-do-not-receive-pointer-events/13901/3 "2024-01-18T10:24:34Z")

</div>

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](https://newdocs.phaser.io/docs/3.55.2/focus/Phaser.Input.InputPlugin-enableDebug)