Sprite animation from individual images?

[ddabrahim]

Hi.

I made a game using an other engine and would like to port the game over to Phaser but it is using individual images for all sprite animations. I was wondering if is there any way to create a sprite animation from individual images inside Phaser? I was searching the web and everyone seems to offer to pack all images on to a single texture then use an atlas in phaser. It could be the best way to do it, but I'm really would like to know if it possible to create sprite animation inside Phaser without using any 3rd party tools? To give an explanation, I would like to attempt to import the game levels from the JSON exported directly from the tool I was using, so this way I need to remake the game logic only and don't need to worry about building all the levels and menus again. I could just write the import code once, then import all my levels directly from the JSON and I don't need to start completely from scratch. Even if I would be using an atlas, I need to work on this importer to get the position, scale, animation frame and other details of everything in the level so getting the images too and make sprite animations from them could be faster to get the levels up and running in Phaser.

Thank you.

[casey]

It seems like it would be far, far faster just to use a program that will pack your sprites for you, like TexturePacker, than to rewrite your JSON.

Texturepacker exports a JSON file for the Phaser format specifically. I think you can import your current files and just hit export to convert to Phaser JSON format.

Otherwise, you'll need to write  a script that converts the JSON format you have into the Phaser JSON format you need.

Example Phaser JSON from a Texturepacker export

{"animation": [

{
    "filename": "img1.png",
    "frame": {"x":1,"y":1,"w":99,"h":98},
    "rotated": false,
    "trimmed": false,
    "spriteSourceSize": {"x":0,"y":0,"w":99,"h":98},
    "sourceSize": {"w":99,"h":98}
},
{
    "filename": "img2.png",
    "frame": {"x":102,"y":1,"w":99,"h":98},
    "rotated": false,
    "trimmed": false,
    "spriteSourceSize": {"x":0,"y":0,"w":99,"h":98},
    "sourceSize": {"w":99,"h":98}
}],
"meta": {
    "app": "http://www.codeandweb.com/texturepacker",
    "version": "1.0",
    "image": "spritesheet.png",
    "format": "RGBA8888",
    "size": {"w":202,"h":100},
    "scale": "1",
    "smartupdate": "$TexturePacker:SmartUpdate:f624f4ec905c0a4500d14466064afbbd:4d2cc1f3895d8e01d1407be9399679cd:06f65484afc44bb467b932716f9f3c02$"
}
}
 

 

 

 

[samme]

This is from Graphics, but the concept is similar: https://samme.github.io/phaser-examples-mirror/display/spritesheet from graphics.html

You would use a BitmapData or RenderTexture.

[ddabrahim]

Thank you for the replies and suggestions, it sounds promising. I'll give it a try

[samme]

TexturePacker would preserve all the image names (as frame names), so that would be much easier.

[ddabrahim]

Yes TexturePacker would be a lot easier I can see that but I'm only getting started with Phaser and doing it this way is going to be useful at least to get to know Phaser better then I might end up using TexturePacker anyway. 

Thanks.