Changing mouse cursor over a sprite

[yahiko]

I would like my mouse cursor to change over a specific sprite.

Is there a way to do that?

[drhayes]

I can think of a couple of ways of doing that.

 

1. You could change the CSS cursor property of the canvas when the cursor is over a sprite, then change it back to "initial" once it's not over the sprite. But I *think* browsers are spotty on supporting custom cursors and certainly spotty when updating the cursor while still over the element whose declaration you're changing.

 

2. You could check out pointer lock and draw the cursor yourself based on the raw mouse data. Not sure how Phaser handles pointer lock, though, and it's experimental.

 

3. Draw a custom cursor under the regular OS cursor in your canvas.

[stauzs]

sprite.inputEnabled = true;

sprite.events.onInputOver.add(function(){

this.game.canvas.style.cursor = "move";

}, this);

sprite.events.onInputOut.add(function(){

this.game.canvas.style.cursor = "default";

}, this);

[yahiko]

I figured out this solution at the same moment. Thank you anyway!

[qdrj]

This also can be done by useHandCursor property - http://phaser.io/docs/2.3.0/Phaser.InputHandler.html#useHandCursor

sprite.input.useHandCursor = true;