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
|
||||
// and the click resolved to whichever had the highest index — the bottom-
|
||||
// right piece — far away from the cursor.)
|
||||
// Pieces stay interactive only for the hover cursor. The actual grab is
|
||||
// resolved centrally in onTableDown (nearest piece to the pointer) so a
|
||||
// click can never resolve to a distant neighbour's overlapping hit box.
|
||||
// Pieces stay interactive for the hover cursor AND to consume the
|
||||
// pointerdown (forwarding it to the central grab resolver). Without the
|
||||
// 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;
|
||||
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 });
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue