Mouse area off in Sprites

Phaser 3
1

Hi!

I have played with Phaser.io in a small project a lot of time ago and then nothing else. Now I am starting a new big project and it’s like if I was starting from scratch. Anyway I am starting fresh with a few quick tests and am doing well but I just realized a small issue with the mouse area of a PNG sprite.

The problem is that the mouse area is off of the actual image. Also it behaves different in animated and in static sprite, but in both cases it’s off. It has some transparent areas. I would put a complete sample online but I don’t know of no one fiddle space where I could put JS and images.

Anyway the code is fairy simple and I am sure that the problem is not in it:

    const spCreep = this.add.sprite(200, 200,'Creep').setInteractive();

    spCreep.on('pointerover', function (pointer) {
        this.setTint(0xff0000);
    });
    
    spCreep.on('pointerout', function (pointer) {
        this.clearTint();
    });

Any idea?

2

See here and here.
Maybe it seems off because it is using a rectangle instead of the shape you expect?

  • Set hit area from width & height (rectangle) of the texture
gameObject.setInteractive();
  • Set hit area from game object
gameObject.setInteractive(shape, callback);
1 Like
3

Do

this.input.enableDebug(spCreep);

That will show the hit area.

2 Likes
4

Thanks for this hint, Samme!

Now using enableDebug it showed me that the hit area is smaller than my sprite. Any idea why this?
PS: I used TexturePacker to make it.

creep

Following the links provided by Milton I changed my code to:

const spCreepCircleNext = this.add.sprite(100, 100).setInteractive(new Phaser.Geom.Rectangle(0, 0, 57, 48), Phaser.Geom.Rectangle.Contains);

creep2

Although it seems to have fixed the issue I imagined that the setInteractive without any polygon parameter would find the bounds of the sprite automatically. It really puzzled me!