I'm currently trying to animate a few frames from a spritesheet using Phaser3. The page successfully renders the first frame of the animation to the screen, but fails when I try to actually code in any of the animations.
Here's what I have so far:
export default class Intro_Animation extends Phaser.Scene
{
constructor()
{
super('Intro_Animation');
}
intro(){}
preload()
{
this.load.path = './src/assets/intro/';
this.load.spritesheet('intro_frame', 'westwardJourney_02-Sheet.png',
{frameWidth: 144, frameHeight: 130});
}
create()
{
//fails somewhere in the animations here
var introAnim_config = {
key: 'introWalkAnim',
frames: this.anims.generateFrameNumbers('intro_walk', { start: 0, end: 23, first: 23 }),
frameRate: 20,
repeat: -1
};
this.anims.create(introAnim_config);
//loads in first frame here
this.add.sprite(250, 150, 'intro_frame').play('introWalkAnim');
}
}
I just can assume, without knowing the exact error message, that the frameWidth and/or frameHeight is maybe too big (meaning: bigger than the actual image size, even for 1px is enough). This could produce an error like:
Uncaught TypeError: Cannot read properties of undefined (reading 'duration') ...
and also show an image.
Except this, I don't know any other reason, how an error could occur, while displaying atleast a part of an image, and I tested serveral possibilities and combinations.