phaser 3 Multiple image Animation

[Balamurugan]

I want to create a one large animation like as bomb blast. Reference Link - 

 

In this animation i have 10 sequence PNG. like blast1.png to blast 10.png. How to create animation using this 10 images. if i publish as a sprite-sheet it not converted into single sprite. it converted into 10 sprites(multipack). i don't know how to handle. please anyone share your experience. please help us.

[prob]

function preload ()
{
    this.load.image('blast0', '/assets/blast0.png');
    this.load.image('blast1', '/assets/blast1.png');
    this.load.image('blast2', '/assets/blast2.png');
    this.load.image('blast3', '/assets/blast3.png');
    this.load.image('blast4', '/assets/blast4.png')
}

function create ()
{
    this.anims.create({
        key: 'explosion',
        frames: [
            { key: 'blast0' },
            { key: 'blast1' },
            { key: 'blast2' },
            { key: 'blast3' },
            { key: 'blast4' }
        ],
        frameRate: 10,
        repeat: 1
    });

    this.add.sprite(500, 500, 'blast0').play('explosion');
}

 

[Linzeestomp]

Check out this link from the Phaser 3 Examples: https://labs.phaser.io/view.html?src=src\animation\animation from png sequence.js

This example does exactly what your trying to do. If you hit back, you'll be taken to all the animation examples and see a variety of methods for firing off animations. Be aware if you look to the documentation for detailed explanations of what your trying to do the AnimationManager documentation is lacking atm.

I'd contribute documentation to this since I've been living in it lately but I don't trust my ability to accurately translate Phaser 3 code into understandable English lol