how to make animation from group of sprites which difference size (picture include)

[cbjo]

how to make animation from group of sprites which difference size

[drhayes]

I don't know of an automated way to do this. I think what you'd end up with is a sprite atlas. Maybe something like Shoebox would help? http://renderhjs.net/shoebox/

[cbjo]

drhayes, I know position x ,y into frames but don't know to make frame(s) to animation in phaser.

 

please help... 

 

 

[Xesenix]

If you have sprite atlas for this sprite sheet you can check this: https://phaser.io/examples/v2/animation/sprite-sheet

sprite.animation.add(name, frames, frameRate, loop, useNumericIndex)

You can check this: https://github.com/photonstorm/phaser/blob/v2.6.2/src/animation/AnimationManager.js line 170 for more details how it works.

[drhayes]

I believe what you're looking for is turning this thing into a sprite atlas. If you know all the x and y and width and height coordinates, you could use that to create a JSON structure (save it to a file or pass it "raw" to the loader) that shows where all those frames are.

Here's a small slice of the texture atlas Texture Packer is generating for me...

{"frames": {

"beetle0":
{
        "frame": {"x":69,"y":666,"w":11,"h":5},
        "rotated": false,
        "trimmed": true,
        "spriteSourceSize": {"x":2,"y":11,"w":11,"h":5},
        "sourceSize": {"w":16,"h":16}
},
"beetle1":
{
        "frame": {"x":113,"y":350,"w":12,"h":5},
        "rotated": false,
        "trimmed": true,
        "spriteSourceSize": {"x":2,"y":11,"w":12,"h":5},
        "sourceSize": {"w":16,"h":16}
}
}
}