phaser
phaser copied to clipboard
new event: Phaser.Input.Events.GAMEOBJECT_CLICK
It would be nice to have an event that handles interactive object CLICK
s. Not just click on OUT
behavior. Click on OUT
behavior has this issue, where when you DOWN
anywhere, then drag on top of an interactive object and release - OUT
, it will trigger on that interactive object.
To produce a CLICK
event, we can use the following 3 methods and a boolean flag:
// isDown = true;
Phaser.Input.Events.GAMEOBJECT_POINTER_DOWN
// isDown = false;
Phaser.Input.Events.GAMEOBJECT_POINTER_OUT
// if (isDown) { this.emit(Phaser.Input.Events.GAMEOBJECT_CLICK); }
Phaser.Input.Events.GAMEOBJECT_POINTER_UP
The main reason to have a CLICK
is convenience. We can use the above implementation to wrap our code around that and write our own CLICK
event to emit.. but it would be handy to have it supported internally by phaser. I remember ActionScript 1/2/3 did it this way also :).
EDIT: perhaps more difficult than described above, should prob. also handle the situation where mouse leaves window (if interactive object is close to/overflows window border - the flag should also reset to false [unsure where to observe this from, prob. somewhere outside the interactive object... :/]).
Workaround:
Object clicked and released without pointer moving
this.add.text(100, 200, 'Click me', { fontFamily: 'Arial', fontSize: 64, color: '#00ff00' }).setInteractive({ draggable: true });
this.input.on('dragend', (pointer, object) =>{
if(pointer.x==object.input.dragStartXGlobal &&
pointer.y==object.input.dragStartYGlobal){
alert("Object clicked");
}
});
Object clicked and released in allowable moving range
this.add.text(100, 200, 'Click me', { fontFamily: 'Arial', fontSize: 64, color: '#00ff00' }).setInteractive({ draggable: true });
this.input.on('dragend', (pointer, object) =>{
if(pointer.x>=object.input.dragStartXGlobal-5 &&
pointer.x<=object.input.dragStartXGlobal+5 &&
pointer.y>=object.input.dragStartYGlobal-5 &&
pointer.y<=object.input.dragStartYGlobal+5){
alert("Object clicked");
}
});
Object clicked and released in object display range
this.add.text(100, 200, 'Click me', { fontFamily: 'Arial', fontSize: 64, color: '#00ff00' }).setInteractive({ draggable: true });
this.input.on('dragend', (pointer, object) =>{
if(pointer.x>=object.x&&pointer.x<=object.x+object.width &&
pointer.y>=object.y&&pointer.y<=object.y+object.height){
alert("Object clicked");
}
});
Thanks for opening this feature request. CLICK
is subtly difficult, given all the edge cases it has to consider. I feel, at this point in Phaser's life, it's probably best left implemented in the game code. There are lots of gestures I'd love to add to Phaser, but I don't want to complicate the input system any further at this point, so would instead point you to the superb Rex UI gestures he's made available.