'Uncaught TypeError: Cannot read property 'frame' of undefined- PHASER3

I am new to phaser and game development and am trying to build a game with animations. I tried to load the sprite sheet and animate- but I keep getting this error:

phaser.js:73195 Uncaught TypeError: Cannot read property 'frame' of undefined
    at Animation.setCurrentFrame (phaser.js:73195)
    at Animation.updateFrame (phaser.js:73224)
    at Animation.load (phaser.js:54133)
    at AnimationManager.load (phaser.js:53129)
    at Animation.load (phaser.js:72733)
    at Animation.play (phaser.js:72833)
    at Scene.update ((index):168)
    at Systems.step (phaser.js:27164)
    at SceneManager.update (phaser.js:46776)
    at Game.step (phaser.js:109330)

The error seems to have something to do with the frames loaded for the spritesheet.

This is the preload of the sprite sheet (the dimensions of the image: width=80, height= 16. total of 5 frames):

this.load.spritesheet("animal", "assets/animals.png", { frameWidth: 16, frameHeight: 16 });

and this is the animation in the function create():

this.anims.create({
        key: "animate",
        frames: this.anims.generateFrameNumbers("animal", {starts:0, ends:5}),
        frameRate: 10,
        repeat: -1
        })

the problem seems to be related to the "frames" attribute, so I tried logging :

console.log(this.anims.generateFrameNumbers("animal", {starts:0, ends:5}))

but only got an empty list.



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source