Animations with individual images in Phaser.js

Question

So I have this game that I made a while back and I want to port it using Phaser.

The game is made using individual PNG files for all the animation frames, and there are over 100 of them.

From reading through the docs, it seems Phaser only supports spritesheets for animations.

I would like to do something like this :

player.sprite.animations.add('idle', ['images/s_snailIdle_0.png', 'images/s_snailIdle_1.png'], 60, true, false);
player.sprite.animations.play('idle');

Is there a way to add individual images to a sprite's animation? If not, Is there a way to change the image of a sprite so that I can implement my own animation system?

Answer 1

For anyone else in this dilemma, I would recommend these links to you:

https://www.codeandweb.com/texturepacker/tutorials?km_user-type=developer

https://www.codeandweb.com/texturepacker/download

Answer 2

Since the asker ended up using a texture atlas, for those looking for the relevant code, preload the texture atlas as usual:

this.load.atlas('sheet', 'sheet.png', 'sheet.json', null,
    Phaser.Loader.TEXTURE_ATLAS_JSON_HASH);

You can then create a new Sprite, making sure to reference the atlas.

var afterburners = new Phaser.Sprite(game, 0, 15,
    'sheet', 'fire11.png');

Then you can switch to a different sprite in that atlas for an animation.

afterburners.animations.add('burn',
    ['fire11.png', 'fire14.png', 'fire15.png'],
    15, true);
afterburners.animations.play('burn');