Phaser 3: Spritesheet doesn't load correctly

user_8350893 0
Viewed 230

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>

phaser-framework sprite-sheet
1 Answers

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.

user_16792860
Related