Jump to content

Load animations with atlasXML


Recommended Posts

Hi there,


I'm using phaser since some days and i am actually training with animations,

the problem is that i can perfectly load json files to make good animations, but json files are boring to create, i must cut sprite sheet to make lot of little frames, rename them to be in the good right, pack them with texturepacker in a png file and a json for each animation and then edit json to add x and y offsets for each frame of animation, to have a perfect animation.


With a xml file it's easier, a software called sprite decomposer can create xml for me, like in the linked files, with all animations in the same png, and in the same xml.


So the question is here, is there a way to load xml with animations and use them or should i only make a json file for each animation, and take 20h to do all of my animations frame by frame, with json editing to set the offset on y and x?


thanks for your future answers, i'll make a tutorial topic about json and xml once i'll be fine with it, because i found no documentation and that's why i came here to ask my question :)



Link to comment
Share on other sites

I don't really understand why your json workflow is so complicated, sounds like you're doing a tonne of steps I've never even thought about, let alone needed to actually do!


I've never heard of Sprite Decomposer. It sounds very niche / specific. Too specific to support directly in Phaser, but maybe via a plugin would be a good idea. I'll make a note to investigate later on, unless someone else wants to have a bash at supporting import from it.

Link to comment
Share on other sites

My spritesheet is megaman.png,

I created 1 file per frame with spritecutter (a little java app), and then i do another spritesheet with texture packer, and creating a json file with same software.

But the problem is, when i do an animation, frame 1 is 50*15px for example, but if frame 2 is 15*15, frame 2 will use same origin point as frame1, and it'll not touch the ground.

To fix it, i do a manual editing of the json file, and i set trimmed settings to place every frames at the same point.


If you want to know the process to have all frame at the same point, here it is:


i set trimmed to true,

then editing the "spriteSourceSize": {"x":,"y":,"w":,"h":},

and then, doing a simple calculation:


x = -1*(Wmax/2)

y= (Hmax/2) + ((Hmax/2)-h)


with Hmax = the maximum value you can find for "h" in your json.

       Wmax = the maximum value you can find for "w" in your json.

       h = value for "h" in the current spriteSouceSize (the one you are editing)



but it is very boring to do it with every frames of every animations, is there a way to do it easier and, if possible, with only one json for all animations?

Link to comment
Share on other sites

Would it not make more sense to cut each frame out at the same size? And place them accurately first. Then TexturePacker would be your final step of the process, not the 2nd one. They could be aligned in Photoshop or whatever you use, the animation previewed in there first to check it's accurate, and then exported. Or a tool like Flash or ProMotion would make this much less painful too.


For sprite sheets like this one nicked off the net, it's a pain in the butt to do what you're doing, because the people that created them didn't care about frame sizes or placements. So you have to literally piece them back together yourself. I'm guessing the Sprite Decomposer software can make a 'best guess' at the frame sizes and such for you? The JSON file format is really basic, it might be easy for you to write a conversion script to take your xml files and turn them into json files.

Link to comment
Share on other sites


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...