Easy display of mouse XY location in Phaser 3 canvas?

Phaser 3
2 
gameScene.create = function() {
    this.label = this.add.text(0, 0, '(x, y)', { fontFamily: '"Monospace"'});
    this.pointer = this.input.activePointer;
}

gameScene.update = function() {
    this.label.setText('(' + this.pointer.x + ', ' + this.pointer.y + ')');
}

This should work to put a little coordinate in the upper-left corner that will always display where your mouse is relative to the game display area. It works scale-independent with the upper-left corner always being 0,0 and the bottom-right being the max size of the game canvas. If you scale it up, you can get some decimals in the numbers, but the numbers are still the same. You can just cut off the decimals and be fine.

EDIT: Actually, just add Math.round() on the pointers in the setText and then you don’t have to worry about getting decimals.

1 Like