Phaser 3 - 自定义动画光标不工作

Question

我尝试实现自定义动画光标。我使用了行 gameState.idle.setInteractive({cursor: 'url("assets/pet.cur"), pointer'});。当光标没有动画时，同一行工作，但一旦我将其设为动画光标，它只会加载指针光标。

有什么方法可以使用动画自定义光标吗？

Answer 1

这不是 phaser 问题，这是浏览器的问题。据我所知，浏览器不支持动画光标。有一些解决方法，但所有方法都是 hacky，在高负载下可能无法正常工作。

但是如果你真的想这样做，这里有一篇文章描述了一个可能的 solution/approach https://jordaneldredge.com/blog/rendering-animated-ani-cursors-in-the-browser/。
一种不同的方法是将 Sprite 移动到鼠标位置，并隐藏真正的 MousePointer。

这是一个可能的移相器解决方案：

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/phaser@3.55.2/dist/phaser.js"></script>

Phaser 3 - 自定义动画光标不工作

Phaser 3 - Custom animated cursor not working

mouse-cursor

phaser-framework