Sprites loaded from an atlas have a larger clickable area than their sprite

Phaser 3
1

Hello, I loaded a sprite from an atlas, and I am trying to make it interactive by registering an event whenever the sprite gets clicked. However, I am running into an issue: the clickable area of some sprites are larger than the sprites themselves.

For this code, clicking outside of the sprite registers a click:

class Main extends Phaser.Scene {
    create() {
        this.testObject = this.add.sprite(400, 400, 'atlasPlant', 'tree patch0001.png');
        this.testObject.setInteractive();
        
        this.testObject.on("pointerdown", () => {
            console.log('object clicked');
        });
    }
}

However when I use “tree patch0010.png” instead, the hit area is correct, and clicking outside of the sprite does not register the click event.

class Main extends Phaser.Scene {
    create() {
        this.testObject = this.add.sprite(400, 400, 'atlasPlant', 'tree patch0010.png');
        this.testObject.setInteractive();
        
        this.testObject.on("pointerdown", () => {
            console.log('object clicked');
        });
    }
}
2

:wave:

Add

this.input.enableDebug(this.testObject);

This may depend on the atlas generation settings (trim?).

3

As @samme said, its likely the trim setting in your atlas. How do you generate them?

4

setInteractive({ pixelPerfect: true }) works for me