How to play the animation through instance of new Animation()?

[Dzmitry]

Hello I can't play phaser animation through getting of constructor new Animation(game, parent, name, frameData, frames, frameRate, loop, loop).

Before adding an instance of class new Animation all work, and just sprite is showing, but after adding animation it is ceasing to work.

I spent a lot of time for realization, but without results.

What is the problem?

My classes for sprite animation:

mainPlayer.js:

import 'phaser-shim';

export default class extends Phaser.Sprite {
  constructor ({ game, x, y, asset }) {
    super(game, x, y, asset)
    this.anchor.setTo(0.5);
    this.outOfBoundsKill = true;
    this.scale.setTo(0.8);// scale
    this.angle = 90;
    game.physics.enable(this, Phaser.Physics.ARCADE);
  }

  update () {

  }
}

My mainPlayerAnimation.js:

import 'phaser-shim';

export default class extends Phaser.Ainmation {
  constructor ({ game, parent, name, frameData, frames, frameRate, loopFirst, loopSecond }) {
    super(game, parent, name, frameData, frames, frameRate, loopFirst, loopSecond);
    //this.anchor.setTo(0.5);
    //this.outOfBoundsKill = true;
    //this.scale.setTo(0.8);// scale
    //this.angle = 90;
    //game.physics.enable(this, Phaser.Physics.ARCADE);
  }

  update () {

  }
}

My level class:

import 'phaser-shim';
import config from '../config';
import currentGameState from '../currentGameState';
import backgroundMainGame from '../objects/backgroundFirstlevel';
import mainPlayer from '../objects/mainPlayer';
import mainPlayerAnimation from '../objects/mainPlayerAnimation'
import bullets from '../objects/bullets';
import enemiesloader from '../loaders/enemiesloader';
import bossloader from '../loaders/bossloader';

export default class extends Phaser.State {
    
    preload () {
       
        this.load.image('background', './img/firstlevel.jpeg');
        this.load.spritesheet('mainPlayer', './img/main.png', 50, 50);
        this.load.image('bullet', './img/shot.png');
        this.load.image('enemy', './img/enemy.png');

    }

    create () {
        //---------------------------------------------------------------
        this.background = new backgroundMainGame({
            game: this,
            x: 0,
            y: 0,
            width: 1024,
            height: 768,
            asset: 'background'
        });
        this.game.add.existing(this.background);

        //---------------------------------------------------------------
        this.mainPlayer = new mainPlayer({
            game: this,
            x: this.game.world.centerX,
            y: this.game.world.centerY,
            asset: 'mainPlayer'
        });
        this.game.add.existing(this.mainPlayer);

        //---------------------------------------------------------------
        this.mainPlayerAnimation = new mainPlayerAnimation({
            game: this,
            parent: this.mainPlayer,
            name: 'mainPlayerAnimation',
            frameData: null,
            frames: [0, 1, 2],
            frameRate: 100,
            loopFirst: true,
            loopSecond: true
        });
        //---------------------------------------------------------------
        this.bullets = new bullets({
            game: this,
            parent: null,
            name: 'bull',
            addToStage: true,
            enableBody: true,
            physicsBodyType: Phaser.Physics.ARCADE
        });
        this.game.add.existing(this.bullets);

        //-------------------------score---------------------------------
        this.scoreText = this.add.text(
        					config.gameWidth-200,
        					config.gameHeight - 50,
        					`score: ${currentGameState.score}`,
        					{ font: '32px Arial', fill: '#dddddd'});
        this.scoreText.anchor.setTo(0.5);
        
        //---------------------------------------------------------------
        this.cursors = this.input.keyboard.createCursorKeys();
        this.fireButton = this.game.input.keyboard.addKey(Phaser.Keyboard.SPACEBAR);
    }

    update () {
        //--------------------------update score------------------------------
        this.scoreText.text = `score: ${currentGameState.score}`;

        //--------------------------if press nothing stop the ship------------
        this.mainPlayer.body.velocity.x = 0;
        this.mainPlayer.body.velocity.y = 0;

        //------------------------spawn enemies-------------------------------------        
        enemiesloader(this);
        //---------------------spawn boss------------------------------------------
        bossloader(this);
    	//-------------------------controls----------------------------------------
        if(this.cursors.left.isDown){
        	this.mainPlayer.body.velocity.x = -350;
        }
        if(this.cursors.right.isDown){
            this.mainPlayer.body.velocity.x = 350;
        }
        if(this.cursors.up.isDown){
            this.mainPlayer.body.velocity.y = -350;
        }
        if(this.cursors.down.isDown){
            this.mainPlayer.body.velocity.y = 350;
        }
        if(this.fireButton.isDown){
            this.bullets.fireBullet.call(this);
        }
    }
}

 

[samme]

8 hours ago, Dzmitry said:

but after adding animation it is ceasing to work

What happens? Do you get an error?

If you want to extend Animation:

• You have to extend Phaser.Animation (spelling)
• The animation needs to be added to the sprite's animation manager
• Don't overwrite Animation#update

But you probably don't need to extend it at all. Just use Phaser.AnimationManager#add.

[Dzmitry]

3 hours ago, samme said:

What happens? Do you get an error?

Yes error is by getting frame from Phaser.FrameData. If create animation through class, it is not need to use class for creating sprite. Is it true? It is a question how to put data to frameDate, may be in any loop frameData.addFrame(new Frame(....)). And new Frame gets follow parameters index, x, y, width, height and name (name is an atlas).

Did anybody put data to Phaser.FrameData?