Phaser 3：Spritesheet 无法正确加载

Question

我尝试用我以前做过几次的方法将 spritesheet 添加到我的 Phaser 游戏中，但是这次它似乎没有正确加载图像，导致它显示黑色和绿色方块并导致它在尝试播放动画时抛出错误。

谁能告诉我是什么导致了这个问题？

（警告：在此处播放代码似乎会使您的浏览器冻结几秒钟，或者在 JSFiddle 上查看：https://jsfiddle.net/cak3goru/4/）

// Configs and Constants

const gameState = {
    gameWidth: 800,
    gameHeight: 800,
    textStyle: { 
        fontFamily: "'Comic Sans MS'", 
        fill: "#fff", 
        align: "center",
        boundsAlignH: "left", 
        boundsAlignV: "top"
    },
    mouseDown: false,
    menu: {
        options: [
                "Feed", "Clean", "Play"
        ],
        barColor: "0x123456",
        items: [],
        itemText: [],
        itemColor: "0x654321",
    }
};

function preload() {        
        // Clean Tools
        this.load.atlas('clean', 'https://gaylie.neocities.org/game/assets/clean.png', 'https://gaylie.neocities.org/game/assets/clean.json');
}
    
function create () {
        
        this.anims.create({
            key: "shower_cursor",
            framerate: 12,
            frames: this.anims.generateFrameNumbers("clean", {
                prefix: "showerhead_000",
                start: 0,
                end: 7}),
            repeat: -1
        });
        
        gameState.shower_cursor = this.add.sprite(400,400,'shower_cursor');
        console.log(gameState.shower_cursor.frame);
        //gameState.shower_cursor.playAfterDelay('shower_cursor', 100);
        //gameState.shower_cursor.alpha = 0;
}

var config = {
    backgroundColor: "0xf0f0f0",
    scale: {
        width: gameState.gameWidth,
        height: gameState.gameHeight,
        autoCenter: Phaser.Scale.CENTER_BOTH
    },
    scene: {
        preload, create
    }
};
var game = new Phaser.Game(config);

<head>

    <title>Pet Simulator</title>

     <script src="//cdn.jsdelivr.net/npm/phaser@3.55.2/dist/phaser.min.js"></script> 
    
</head>

<body style="height: 100%; width: 100%; margin: 0;">
  
</body>

Answer 1

问题是，您正在使用 错误的 函数，您应该使用 this.anims.generateFrameNames，而不是 this.anims.generateFrameNumbers。

和为精灵设置正确的键clean。
该行应该是：

gameState.shower_cursor = this.add.sprite(200, 100, 'clean');

因为shower_cursor只是动画的key，不是sprite的key

P.s.: the posted code doesn't run on jsfiddler or Whosebug due to CORS-Error, but if all assets are on the same server, it should not be a problem.

Phaser 3：Spritesheet 无法正确加载

Phaser 3: Spritesheet doesn't load correctly

sprite-sheet

phaser-framework