Animation from spritesheet only showing first frame

[JorgeDePedro]

Hi all,

I'm still getting introduced into Phaser 3.

I'm trying to create a class that extends Gameobject.sprite. And on the constructor, I want to load the sprite, and then run an animation (that have been previously loaded in the animation manager). 

However, despite the sprite is loaded, and seems that the animation is loaded (because the frame of the sprite, changes once), the animation is not being played.

Here's my Hero class that extends GameObject.Sprite 

var Hero = new Phaser.Class({
    Extends: Phaser.GameObjects.Sprite,
    initialize:
        function Hero(scene,lane)
        {            
            var heroSize = game.registry.get('heroSize');
            var heroes_Y = game.registry.get('heroes_Y');

            Phaser.GameObjects.Sprite.call(this, scene, lane, heroes_Y, 'baseHeroes',0);
            this.scene.physics.world.enable(this);
            this.setDisplaySize(heroSize,heroSize);
            this.play('hero_Walk');

            this.body.offset.x = -7;
            this.body.offset.y = -7;
            this.HP = 2;
            this.scene.children.add(this)

            this.healthText = scene.add.text(lane - 50, heroes_Y + heroSize, 'HP:'+ this.HP, {
                fontSize: '32px',
                fill: '#fff'
            });
            
        },

   Hurt: function()
        {
            this.HP -=1;
            this.healthText.setText('HP:'+ this.HP);
        },

        
});

And here the load scene, where the animation is created. 

var loadScene = new Phaser.Class({
    Extends: Phaser.Scene,
    initialize: function () {
        Phaser.Scene.call(this, {
            key: 'load'
        });
    },
    preload: function () {
        console.log('preload');
        this.load.image('grass', 'assets/GrassBackground.png');
        this.load.spritesheet('baseHeroes', 'assets/BaseHeroes.png', {
            frameWidth: 16,
            frameHeight: 16,
            endFrame: 12
        });
        this.load.spritesheet('baseEnemy', 'assets/BaseEnemy.png', {
            frameWidth: 16,
            frameHeight: 16,
            endFrame: 3
        });
    },

    createAnimations:function (){
        this.anims.create({
                key: 'hero_Walk',
                frames: game.anims.generateFrameNumbers('baseHeroes',{frames: [ 3, 4, 3, 5]}),
                repeat: -1,
                frameRate: 11
        });

        this.anims.create({
                    key: 'enemy_Walk',
                    frames: game.anims.generateFrameNumbers('baseEnemy', {frames:[0,1,0,2]}),
                    repeat: -1,
                    frameRate: 11
        });
    },
    create: function () {
        this.createAnimations();
        var loadingLabelA = this.add.text(80, 150, 'loading...', {
            font: '30px Courier',
            fill: '#ffffff'
        });
        var loadingLabel = this.add.text(80, 150, 'loading...', {
            font: '30px Courier',
            fill: '#ffffff'
        });
        this.scene.start('menu');
    }
});

I have another class that does not extends GameObjects.Sprite and inserts a sprite in the scene using 

this.sprite = scene.physics.add.sprite(lane, -200,'baseEnemy').setInteractive();

that seems to work fine. But what I want is to have a class that extends Sprite. 

I have been searching on the internet for days, but I can't find a solution, so I'm missing something that I cannot guess.

Any ideas or advice?



Thank you!! 

[JorgeDePedro]

Not a single clue? ?

Maybe I haven't explained myself very well? or is it not concrete enough?

Am I doing something that extremely stupid that this is question is too silly? ??

[samme]

Use scene.add.existing() instead.

[JorgeDePedro]

Thaat was it!! Thank you!!! 

 

In case anyone has the same problem, I replaced:

this.scene.children.add(this) 

by:

scene.add.existing(this)