Add animations to sprite - error - Cannot read property 'getFrameIndexes' of null - Typescript

[WurstCommander]

Hello,

 

I'm trying to add animations to a class which is extending Phaser.Sprite

export class PlayerEntity extends Phaser.Sprite {
    
    constructor(game: Phaser.Game, x: number, y: number) {       
        super(game, x, y);
        
        this.game.add.sprite(x, y, "player");
        // Error
        this.animations.add("down", [0, 1, 2, 3], 10, true);
        this.animations.add("left", [8, 9, 10], 11, true);
        this.animations.add("right", [4, 5, 6, 7], 10, true);
        this.animations.add("up", [12, 13, 14, 15], 10, true);

        this.animations.play("down", 4, true);
        this.game.add.existing(this);
    }
}

 

Stacktrace:

Uncaught TypeError: Cannot read property 'getFrameIndexes' of null
    at c.AnimationManager.add (phaser.min.js:19)
    at new PlayerEntity (:9000/js/entity/playerentity.js:18)
    at l.CreatePlayer (:9000/js/entity/entityfactory.js:5)
    at Level01.create (:9000/js/level/level01.js:20)
    at LevelController.create (:9000/js/level/controller.js:15)
    at WorldController.create (:9000/js/world/controller.js:27)
    at c.StateManager.loadComplete (phaser.min.js:10)
    at c.Loader.finishedLoading (phaser.min.js:20)
    at c.Loader.processLoadQueue (phaser.min.js:20)
    at c.Loader.asyncComplete (phaser.min.js:20)

So "this.animations.add..." is the problem.

this.game.add.existing(this);

 

Doesn't have any effect. 

 

Thanks for reading and any help is appreciated!

 

 

 

 

[Tom Atom]

Hi, your code seems to be wrong in this:

 - you have class that extends sprite - all OK,
 - but inside of it, you call this:

this.game.add.sprite(x, y, "player");

 ... it will create basic Phaser.Sprite and it will not create your PlayerEntity. PlayerEntitiy is already created by calling its constructor.
 - then you are adding animations to your PlayerEntity, which has no texture, so it has no frames.

Change your code to this:

export class PlayerEntity extends Phaser.Sprite {
    
    constructor(game: Phaser.Game, x: number, y: number) {       
        super(game, x, y, "player");
        
        // this.game.add.sprite(x, y, "player");

        this.animations.add("down", [0, 1, 2, 3], 10, true);
        this.animations.add("left", [8, 9, 10], 11, true);
        this.animations.add("right", [4, 5, 6, 7], 10, true);
        this.animations.add("up", [12, 13, 14, 15], 10, true);

        this.animations.play("down", 4, true);
        this.game.add.existing(this);
    }
}

 - pass texture "player" to super constructor,
 - comment out next line