phaser-frameworksprite-sheet

Phaser 3: Spritesheet doesn't load correctly


I tried to add a spritesheet to my Phaser game the same way I've done it a few times before, however this time it seems to not load the images correctly, causing it to display a black & green square instead and causing it to throw an error when trying to play an animation.

Can anyone tell what is causing this issue?

(Warning: Playing the Code here seems to freeze up your browser for a few seconds, alternatively view on 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>


Solution

  • The problem is, that you are using the wrong function, you should use this.anims.generateFrameNames, and not this.anims.generateFrameNumbers.

    And set the correct key clean for the sprite.
    the line should be:

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

    because shower_cursor, is only the key of the animation, not the key of the sprite.

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