Phaser 3 Custom Mouse Cursor Pointer

Phaser 3 javascript games are designed to run in a browser, so mouse interactions and therefore pointer / cursor styles need to be considered in your design for desktop machines. This article explains how to implement custom mouse pointer and cursor styles in a Phaser 3 game.

Setting a default custom mouse pointer is just one line of code:

this.input.setDefaultCursor(url('/path/to/your/cursor/image/default.png'), pointer);

This method only needs to be called once in your game, so an init scene is a good place for it. The 'pointer' parameter is the fallback inbuilt cursor to use in case of error i.e. the image fails to load.

 

Custom Mouse Cursor Pointers On Hover

A typical use case for custom mouse pointers in Phaser 3 is when a player hovers over a game element. For this you need to specify your custom cursor in a slightly different way by passing in a config object:

 this.add.image(400, 300, 'imageKey').setInteractive({ cursor: `url('/path/to/your/cursor/image/hover.png'), pointer` });

A better approach might be to store the config object in a Constants class so you can just refer to it for consistency e.g.

this.add.image(400, 300, 'imageKey').setInteractive(GameConstants.cursors.hover);

And that is all there is to custom mouse cursor pointers in Phaser 3 games!  If you found this article useful, why not read my other Phaser 3 game blog posts.