Pointer down, detect sprite edge without pixelPerfect?

Phaser 3
1

Using a grid of hexagons, I’m using setDepth() to properly display them. Now, when I capture the pointerdown event, I can figure out which hexagon is under the mouse. This of course, falls apart near the edges of the image as the getBounds returns a rectangle.

When clicking on the edge of a hexagon, I get two images back with this code. Is there a relative easy way to do edge detection without setting pixelPerfect true on a bunch of sprites?

this.input.on('pointerdown', function (pointer: Phaser.Input.Pointer) {

    console.log(`x: ${pointer.worldX}, y: ${pointer.worldY}`);

    var imgs = this.cells.filter((e: Assets.Cell,i,a)=> {
        return e.img.getBounds().contains(pointer.worldX, pointer.worldY);
    });

    console.log(imgs);

}, this);

Optionally, is using pixelPerfect on 60 to 300 background images going to impact performance enough for me to worry about it?

2

See the Polygon hit area (car) in http://labs.phaser.io/edit.html?src=src\input\game%20object\debug%20hitarea.js.

3

If it’s uniform grid, you will get much better performance (and simpler code too imo) if you simply convert the global pointer position to a grid coordinate. See https://www.redblobgames.com/grids/hexagons/#pixel-to-hex.
Depending on what grid coordinates you use, you might need to convert the result, but there are algorithms for that on that page too.