Fix jigsaw piece grab when click lands inside custom hit area
- Add pointerdown handler on each piece to forward the event to the central onTableDown resolver; without it, Phaser's topOnly=true consumes the click and the background never sees it, leaving pieces un-grabbable. - Anchor the hit-area rectangle to the image's displayOrigin instead of (0,0) so the custom hit box tracks the piece's actual rendered position.
This commit is contained in:
parent
85fc7c16bf
commit
8dee798ae2
|
|
@ -503,11 +503,14 @@ export default class JigsawGame extends Phaser.Scene {
|
||||||
// piece's hit area. (With the old ±cell box, ~35 neighbour pairs overlapped
|
// piece's hit area. (With the old ±cell box, ~35 neighbour pairs overlapped
|
||||||
// and the click resolved to whichever had the highest index — the bottom-
|
// and the click resolved to whichever had the highest index — the bottom-
|
||||||
// right piece — far away from the cursor.)
|
// right piece — far away from the cursor.)
|
||||||
// Pieces stay interactive only for the hover cursor. The actual grab is
|
// Pieces stay interactive for the hover cursor AND to consume the
|
||||||
// resolved centrally in onTableDown (nearest piece to the pointer) so a
|
// pointerdown (forwarding it to the central grab resolver). Without the
|
||||||
// click can never resolve to a distant neighbour's overlapping hit box.
|
// pointerdown handler here, a click that lands inside the piece's custom
|
||||||
|
// hit area is consumed by the piece (topOnly=true) and never reaches the
|
||||||
|
// background's onTableDown — leaving the piece un-grabbable.
|
||||||
const grab = this.cell * GRAB_FRAC;
|
const grab = this.cell * GRAB_FRAC;
|
||||||
img.setInteractive({ useHandCursor: true, hitArea: new Phaser.Geom.Rectangle(-grab, -grab, grab * 2, grab * 2), hitAreaCallback: Phaser.Geom.Rectangle.Contains });
|
img.setInteractive({ useHandCursor: true, hitArea: new Phaser.Geom.Rectangle(img.displayOriginX - grab, img.displayOriginY - grab, grab * 2, grab * 2), hitAreaCallback: Phaser.Geom.Rectangle.Contains });
|
||||||
|
img.on('pointerdown', (pointer) => this.onTableDown(pointer));
|
||||||
this.pieces.push({ r, c, img, home, placed: false, key, depth: 10 });
|
this.pieces.push({ r, c, img, home, placed: false, key, depth: 10 });
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue