Custom Image Cursors

Learn how to use external .cur files to set a default game cursor and unique cursors for specific interactive sprites.

Custom Image Cursors, running
800 × 600
GitHub
class Example extends Phaser.Scene
{
    preload ()
    {
        this.load.setBaseURL('https://cdn.phaserfiles.com/v410');
        this.load.image('box', 'assets/sprites/block.png');
    }

    create ()
    {
        this.input.setDefaultCursor('url(assets/input/cursors/vigyori/arrow.cur), pointer');

        //  Create some custom cursor boxes

        this.add.sprite(100, 300, 'box').setInteractive({ cursor: 'url(assets/input/cursors/vigyori/link.cur), pointer' });
        this.add.sprite(300, 300, 'box').setInteractive({ cursor: 'url(assets/input/cursors/vigyori/cross.cur), pointer' });
        this.add.sprite(500, 300, 'box').setInteractive({ cursor: 'url(assets/input/cursors/vigyori/help.cur), pointer' });
        this.add.sprite(700, 300, 'box').setInteractive({ cursor: 'url(assets/input/cursors/vigyori/no.cur), pointer' });
    }
}

const config = {
    scale: { mode: Phaser.Scale.FIT },
    type: Phaser.AUTO,
    parent: 'game-container',
    width: 800,
    height: 600,
    scene: Example
};

const game = new Phaser.Game(config);

More in Cursors3 examples