# Multiple sprites 'pointerover' event works only for the first gameObject

**URL:** <https://phaser.discourse.group/t/multiple-sprites-pointerover-event-works-only-for-the-first-gameobject/13558>\
**Category:** Phaser 3\
**Created:** [September 14, 2023, 8:54pm UTC](https://phaser.discourse.group/t/multiple-sprites-pointerover-event-works-only-for-the-first-gameobject/13558 "2023-09-14T20:54:43Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![KereneL](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/kerenel/32/7738_2.png) [@KereneL](https://phaser.discourse.group/u/KereneL)\
**Post date:** [September 14, 2023, 8:54pm UTC](https://phaser.discourse.group/t/multiple-sprites-pointerover-event-works-only-for-the-first-gameobject/13558/1 "2023-09-14T20:54:43Z")

</div>

Heya,  
I’m having some trouble with gameObjects events, I’m trying to have multiple gameObjects of type Unit in one scene, which are supposed to be individually hoverable and selectable. I make sure every GO is interactive, and add the event listeners on the GO itself. The issue is that only the first rendered Unit is actually responsive (in this case it’s the ‘orc’) and the others won’t behave as expected with this.on(‘pointerover’,…). It’s still possible to click them (‘pointerdown’ event), but not possible to use ‘pointover’.  
Things get more complicated if I try to change the hitArea - the hover works as expected only for the first Unit gameObject, but works unexpectedly when clicking inside the sprite bounds but outside the hitArea set (always a rectangle) and it does count it as a click.

What are some possible approaches to solve this?

This is the Unit class:

```javascript
import Phaser from 'phaser';
export class Unit extends Phaser.GameObjects.Sprite {
    constructor(config) {
        super(config.scene, tileX, tileY, config.key);
        this.scene = config.scene;
        this.key = config.key;
        this.makeSelectable();
        this.scene.add.existing(this);
    }
    makeSelectable(){
        this.setInteractive();
        this.selected = false;

        this.on('pointerover',()=>{
            if (!this.selected){
                this.tint(0x00FF00);
            }
        })
        this.on('pointerout',()=>{
            if (!this.selected){
                this.tint(0x000000);
        }
        this.on('pointerdown',()=>{
                this.selected = true;
                this.tint(0xFFFFFF);
        })
    }

```

the creation of the units:

```javascript
        let units = [];
        units.push ( new Unit({
            scene: this,
            x: 47,
            y: 34,
            key: 'orc'
        }))
        units.push (new Unit({
            scene: this,
            x: 32,
            y: 15,
            key: 'human'
        }))

```

---

<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:** [September 14, 2023, 9:06pm UTC](https://phaser.discourse.group/t/multiple-sprites-pointerover-event-works-only-for-the-first-gameobject/13558/2 "2023-09-14T21:06:43Z")

</div>

What does the game canvas look like?

`{ x, y }` aren’t being used in the `Unit` constructor.

---

<div class="post-metadata">

**Author:** ![KereneL](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/kerenel/32/7738_2.png) [@KereneL](https://phaser.discourse.group/u/KereneL)\
**Post date:** [September 14, 2023, 9:25pm UTC](https://phaser.discourse.group/t/multiple-sprites-pointerover-event-works-only-for-the-first-gameobject/13558/3 "2023-09-14T21:25:43Z")

</div>

You’re I accidentally left out two lines of code in the constructor copying and pasting:

```javascript
constructor(config) {
        const tileX = config.scene.map.tileToWorldX(config.x) + config.scene.map.tileWidth / 2
        const tileY = config.scene.map.tileToWorldY(config.y) + config.scene.map.tileHeight / 2

        super(config.scene, tileX, tileY, config.key);
        this.scene = config.scene;
        this.key = config.key;
        this.makeSelectable();
        this.scene.add.existing(this);
    }

```

The human is rendered second, and it’s the Unit that does work, could it be that I overriding the event listener with another “this”?  
I tried adding a few more Units, it’s always the first one that I added to the scene that is not working as expected, others

 ![screenshot](https://global.discourse-cdn.com/free1/uploads/phaser1/original/2X/c/c76242cf990bcbd312bd9c90f136455dad3a7c14.png)  
 ![multiple](https://global.discourse-cdn.com/free1/uploads/phaser1/original/2X/0/0560efe097c3b4b6adcf087e052d4432f0819944.png)

---

<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:** [September 14, 2023, 9:25pm UTC](https://phaser.discourse.group/t/multiple-sprites-pointerover-event-works-only-for-the-first-gameobject/13558/4 "2023-09-14T21:25:45Z")

</div>

I cleaned the code up a little and it seems to work as expected.

https://codepen.io/samme/embed/preview/BavdKmo?default-tabs=js%2Cresult&height=300&host=https%3A%2F%2Fcodepen.io&slug-hash=BavdKmo

Use `enableDebug()` to show the hit area. For hit area coordinates, (0, 0) is the top-left of the game object.

I had to fix some brackets in `Unit`, so check that. And look in browser console for errors.

---

<div class="post-metadata">

**Author:** ![KereneL](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/kerenel/32/7738_2.png) [@KereneL](https://phaser.discourse.group/u/KereneL)\
**Post date:** [September 14, 2023, 9:35pm UTC](https://phaser.discourse.group/t/multiple-sprites-pointerover-event-works-only-for-the-first-gameobject/13558/5 "2023-09-14T21:35:28Z")

</div>

This is so weird, with “this.scene.input.enableDebug(this, 0xffff00);” it works perfectly. Without it, it is still the same for me. The codepen you sent works beautifly, i tried copying it to my project but to no avail ☹

---

<div class="post-metadata">

**Author:** ![KereneL](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/kerenel/32/7738_2.png) [@KereneL](https://phaser.discourse.group/u/KereneL)\
**Post date:** [September 14, 2023, 9:53pm UTC](https://phaser.discourse.group/t/multiple-sprites-pointerover-event-works-only-for-the-first-gameobject/13558/6 "2023-09-14T21:53:04Z")

</div>

Pushed it to my github, if tha’ll be better.

> **[GitHub - KereneL/rtsPhaser3](https://github.com/KereneL/rtsPhaser3)**
>
> Contribute to KereneL/rtsPhaser3 development by creating an account on GitHub.

I tried your code in my project and I got the same results as before ☹

---

<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:** [September 15, 2023, 1:01am UTC](https://phaser.discourse.group/t/multiple-sprites-pointerover-event-works-only-for-the-first-gameobject/13558/7 "2023-09-15T01:01:53Z")

</div>

Try removing all the `canvasStyle`, `sizeChanged()`, anything modifying the game canvas.