fix(ui): make buttons reliably clickable

Remove the scale-on-press animation from the shared button factory. Scaling
the container also scaled its hit rectangle, so any small pointer drift
between pointerdown and pointerup landed outside the shrunken hitbox and
the click was silently dropped. Releasing off the button also left it
visually stuck at 0.96 scale.

Fire the callback on pointerdown instead — snappy, no release tracking,
identical behaviour for mouse, touch, and fast clicks. Hover colour change
still provides press feedback.
This commit is contained in:
tiennm99 committed 2026-04-11 22:55:02 +07:00
1 parent 1d2fff6bf8
commit 34eaf1b2a7
1 file changed
+7 -5
+7 -5
View File
@@ -29,6 +29,9 @@ export function createButton(scene, x, y, label, onClick, opts = {}) {
const text = scene.add.text(0, 0, label, textStyle).setOrigin(0.5);
container.add([bg, text]);
container.setSize(width, height);
// Hit area is defined in the container's LOCAL coordinates and never
// scales with the container — this keeps clicks reliable even while the
// button is visually animating.
container.setInteractive(
new Phaser.Geom.Rectangle(-width / 2, -height / 2, width, height),
Phaser.Geom.Rectangle.Contains
@@ -42,11 +45,10 @@ export function createButton(scene, x, y, label, onClick, opts = {}) {
drawBg(fill);
scene.input.setDefaultCursor('default');
});
container.on('pointerdown', () => container.setScale(0.96));
container.on('pointerup', () => {
container.setScale(1);
onClick?.();
});
// Fire on pointerdown for a snappy, reliable click. No press-scale
// animation, no release tracking — touch, mouse, and fast clicks all
// behave the same way.
container.on('pointerdown', () => onClick?.());
container.setLabel = (txt) => text.setText(txt);
return container;