Animate spritesheet with uequal dimensions in Phaser

I have spritesheet:

As you can see different frames have different sizes here. And I don`t know how to make animation from frames with different sizes. Help me, please.

I think you need to create a sprite atlas of those sprites (sometimes also called a sprite texture).

A sprite atlas is a combination of a PNG file and a JSON file (sometimes XML file). The PNG file contains all the sprites neatly packed together and the JSON file contains the coordinates of each sprite in that PNG file. see more info here.

Phaser (and other libraries) support this format and can load and display these kind of sprites. So what you could do:

1. Cut out each sprite and save as a separate PNG file
2. Give each file a useful name
3. Pack PNG files into a sprite atlas using a utility
4. Load in phaser and animate

With useful names I mean names like walk_1.png, walk_2.png, walk_3.png, duck_1.png, duck_2.png, teleport_1.png etc. something like that.

To pack separate small sprites into one sprite atlas I use Leshy SpriteSheet Tool which is a freeware tool. There's also Texture Packer which is a commercial utility with a bit more options, and there are more tools that do the same thing like ShoeBox, Phaser Editor etc.

In Phaser.js you can then load the sprite atlas and add a sprite like so:

// either use .atlasJSONArray or .atlasJSONHash, depends on your JSON format
game.load.atlasJSONHash('myspriteatlassheet1', 'img/myspriteatlasfile.png', 'img/myspritefile.json');
var mysprite = game.add.sprite(10, 20, 'myspritesheet1', 'walk_1');

And add an animation like so:

mysprite.animations.add('jump', ['jump_1', 'jump_2', 'jump_3', 'jump_4'], 20, true); // 20fps, loop=true
mysprite.animations.add('duck', ['duck_1', 'duck_2', 'duck_3'], 30, true);
// etc.

mysprite.animations.play('jump');