CODEWITHSUNDEEP
phaser-frameworkmouse-cursor
alex
alex

Reputation: 611

Phaser 3 - Custom animated cursor not working

I tried implementing a custom animated cursor. I used the line gameState.idle.setInteractive({cursor: 'url("assets/pet.cur"), pointer'});. The same line worked when the cursor wasn't animated, but once I made it an animated cursor, it only would load the pointer cursor.

Is there any way to use animated custom cursors?

Upvotes: 1

Views: 640

Answers (1)

winner_joiner
winner_joiner

Reputation: 14720

This is not a phaser problem, this is a issue of the browser(s). As far as I know browsers don't support animated cursors. There are some workarounds, but all methods are hacky and might not work well under high load.

But if you really want to do it, here is an article describing a possible solution/approach https://jordaneldredge.com/blog/rendering-animated-ani-cursors-in-the-browser/.
A differnet method would be moving a Sprite to the Mouse position, and hidding the real MousePointer.

Here a possible, phaser solution:

var config = {
    type: Phaser.AUTO,
    width: 400,
    height: 200,
    scene: {
        preload: preload,
        create: create,
        update
    }
};

let cody 
var game = new Phaser.Game(config);

function preload ()
{
    this.load.spritesheet('brawler', 'https://labs.phaser.io/assets/animations/brawler48x48.png', { frameWidth: 48, frameHeight: 48 });
}

function create() {
    this.input.setDefaultCursor('none');
    // some animation
    this.anims.create({
        key: 'walk',
        frames: this.anims.generateFrameNumbers('brawler', { frames: [ 0, 1, 2, 3 ] }),
        frameRate: 8,
        repeat: -1
    });

    cody = this.add.sprite(0, 0, 'brawler').setOrigin(.5);
    cody.play('walk');
    
    this.input.on('pointerdown', _ => console.info(_))
}

function update(){
    // update the position
    cody.x = game.input.mousePointer.x;
    cody.y = game.input.mousePointer.y;
}
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/phaser.js"></script>

Upvotes: 1

Related Questions