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

Phaser 3
1

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:

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:

        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'
        }))
2

What does the game canvas look like?

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

3

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

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
screenshot576×503 11 KB

multiple

4

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

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.

5

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 :frowning:

6

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

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

7

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