Sprite sheet animation alignment issue

[m4uro]

Hi, I've run into some trouble while trying to align some animations of a character. I made the character in Adobe flash CS6 and used its new tool to generate a spritesheet + atlas json file of several animations of the same character (walk, attack, idle, etc). Each animation is correctly animated and displayed individually, however, when I switch in-between them, I find they are not aligned, that is, there is no common reference point between the animations, so when I switch from, let's say, idle to attack, the character seems to "move" to another position. I managed to modify the plugin used by adobe flash to generate the spritesheet, so that it includes the registration Point of each individual animation (of each movie clip), so I currently have that information in my json file. I guess that is a good actual reference point between the animations (correct me if I'm wrong), I located it at the 'feet' of my character in each movie clip.
So now, having that data, what is the most efficient way to use it with Phaser to solve this problem. Do I have to offset the position manually every time I switch the animation? is there no better way? is this a common problem, or am I doing something wrong from the beginning? 
Any help would be greatly appreciated

[rich]

Are there too many frames to merge idle, walk, attack etc into one single atlas?

[m4uro]

The atlas currently has 3 animations, and each have between 15 and 30 frames. But I don't think the problem is related to the sprite sheet size. Maybe my problem can be best understood in this link posted by another person, he seemed to be having the exact same issue: http://forums.adobe.com/thread/1230558

The workaround I'm trying would be basically something like:

//when changing animations:
sprite.y = //reset offset
sprite.x = //reset offset
sprite.animations.play('idle', null, true);

sprite.y += offsetY('idle'); //where offsetY returns the y offset for a given animation
sprite.x += offsetX('idle'); //where offsetX returns the x offset for a given animation
 

But I would have to do this each time I change the played animation, for each animation. I just want to know if this is the only/best thing I can do. Also, when I tried this in the way I described, the position of the sprite is updated on the screen one frame before the animation is changed, and it plays a single frame of the old animation, creating a 'visual glitch', because of that single frame that is displayed out of place. That is odd to me, because when I debug it, the sprite shows the new animation in 'currentAnimation' and 'currentFrame', but the rendered image is of the previous one. As I said, this just happens during only one frame when I change animations, but it is visually disturbing anyway.

[rich]

Ah right, gotcha. Could you just not align the sprites more accurately in Flash in the first place? Place them down more carefully in the IDE so they flow from one frame to the next without any glitches at all?

[m4uro]

Yeah, the problem could definitely be solved if I were able to export all the frames with an identical size. I am by no means a flash expert, and I learned to make and export animations that way, however I guess that is the correct way, because the other option would imply wasted space in the spritesheet, just to fill the empty space of a "transparent" background that matches the biggest height and width of all of the animation frames.
Anyway, If this kind of problem is not familiar to you, maybe I should try to solve it in the context of flash, as you say, instead of in the context of phaser.

I attach the spritesheet for reference. And this is a sample of the json atlas (I am not able to attach it as a file):
 

{"frames": [{	"filename": "Wizard_Attack0000",	"frame": {"x":1,"y":1,"w":33,"h":85},	"rotated": false,	"trimmed": true,	"spriteSourceSize": {"x":3,"y":0,"w":33,"h":85},	"sourceSize": {"w":80,"h":85},	"regPoint": {"x":17.6,"y":84.15}},{	"filename": "Wizard_Attack0001",	"frame": {"x":35,"y":1,"w":33,"h":83},	"rotated": false,	"trimmed": true,	"spriteSourceSize": {"x":3,"y":2,"w":33,"h":83},	"sourceSize": {"w":80,"h":85},	"regPoint": {"x":17.6,"y":84.15}},

As I said before, I added the registration Point information.

[rich]

Actually Phaser (and Flash for that matter) supports trimmed frames. So it won't save all the extra blank space, it'll crop it down as tightly as it can to fit the actual graphics, but it will export how much was trimmed so that Phaser can replay the animation correctly.

 

So basically if you align all the frames properly on the timeline and then export, you should solve your problem

[m4uro]

I still think that there is some kind of confusion with the issue I'm having, but I really appreciate the effort you are doing in trying to understand me rich!! (Thanks! ) I'll quote something the flash user said in a later post of the link i posted before, with the hope of making myself clear:
 

 

Yes, I understand how to make animations blend together, but my question relates to the technical side of how sprite sheets are generated.

 

When I generate a sprite sheet from multiple animation movieclips each animation has a unique frame size that Flash calculates and codes into the data file, and that frame size is not the size of document but the size of the smallest frame that can fit all of the sprites in the animation. I can't control this frame size or define a region within the document that is the frame size. Each animation within the sprite sheet could have a different frame size.

 

I'm interested to know if there is a way to view, generate, or export the data that would relate one animation frame to another so that a character (Jim) could be standing at the movieclip origin in the Run animation which is size A and also be standing at the movieclip origin in the Jump animation which is size B, and not only are A and B different sized frames, but none of the corners are coincident. Since it doesn't do this currently I'd have to manually code the offsets of each animation to a common origin instead of being able to use the one that's already in Flash.

 

I don't see how any of the default data that is exported along with the spritesheet PNG could relate that info and I'm very curious.

 

(I could do it by putting every animation within the same movieclip, but then the spritesheet tool is pretty useless since it'd all be one animation)

[rich]

When Flash exports the json file it contains a value called "sourceSize". This is the original un-trimmed frame size. Every frame in an animation will have the same sourceSize value. This used in conjunction with the rest of the data it exports allows you to work out the exact placement of the 'trimmed' frame within the overall composition.

 

So if you were to lay down all of the frames (of all sequences) on the same timeline, and position them all accurately, then it'd export them all with the same sourceSize value. It's only if you select say 3 movieclips and try to export all frames into a single sheet will you get weird results like that post above describes.

[m4uro]

Yes, I didn't want to do that because it would export all the frames as a single animation, with the same name, but fixing that should be easier than the alternatives. Thanks rich!

[rich]

Yes, but I'm not sure of an easier way to do it given how Flash works at the moment. It doesn't matter what the frames are named either, you could still set-up different animation sequences for ranges within the total set of frames.

[DWboutin]

I'm at my first Flash to Phaser spritesheet. I can animate it well, but in one frame i got a small 1px line above my character who shouldn't be there.

 

How can i align it well and what can i do with the json file.

 

(Sorry, i'm a very beginner)

 

A solution: I remove 1px from the top of my spritesheet and it's gone, but my character doesn't touch the ground anymore. What's the best way to create them and work with them?

[BunBunBun]

DWboutin, I suppose that you need to set up "border padding" to 1px and "shape padding" to 1px for your spritesheet.

[rich]

Yes definitely, you need to keep the padding value in, ideally 2px.

[DWboutin]

Sorry, just saw this http://gametest.mobi/phaser/examples/_site/view_full.html?d=loader&f=load+starling+atlas.js&t=load%20starling%20atlas

 

But which atlas must i take to load correctly my json (exported form Flash CS6) in this format?

 

{"frames": {"instance 10000":{"frame": {"x":0,"y":0,"w":57,"h":74},"rotated": false,"trimmed": false,"spriteSourceSize": {"x":0,"y":0,"w":57,"h":74},"sourceSize": {"w":57,"h":74}}},"meta": {"app": "Adobe Flash CS6","version": "12.0.0.481","image": "character.png","format": "RGBA8888","size": {"w":512,"h":512},"scale": "1"}}

 

Thank you

 

 

 

I answered my question. For the noobs (like me) there's how i did it. I preloaded my spritesheet and the json file like this.

this.game.load.atlasJSONArray('character', 'assets/character.png', 'assets/character.json');

The altas contain the image and the file who is related to the sprite size. So you just have to load your sprite normally with 

game.add.sprite(x, y, 'character');

And do whatever you want with the sprite. 

 

But i got another one, when i export my spritesheet "Trimmed", the animation are not very fluid anymore. Is a a good way to set the spritesheet trimmed? Why it's not fluid, it skip some frames i think, does it do something with the frame numbers? 

[rich]

Setting the frames to be trimmed won't have any effect on frame order or skipping, but it might generate more (or different, maybe non-sequential) frame names. So you'll probably need to use generateFrameNames to help set-up any animations. Hard to tell without seeing the json though.

[DWboutin]

There's my normal json http://pastebin.com/eMDEt4xm

 

There's my trimmed json http://pastebin.com/JguZQ6Fr

 

I don't want to put my sprite on the forum, i want to keep it secret for now.

 

There's my animation if it can help you to see the problem.

 

this.sprite.animations.add('idle', [0,1,0,1,0,1], 2, true);

this.sprite.animations.add('run', [2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22], 24, true);

this.sprite.animations.add('walk', [26,27,28,29,30,31,32,33,34,35,36,37,38,39,40], 18, true);

 

Thank you!

[rich]

Your json and animation calls look fine to me, so it has to be more of an alignment issue coming from Flash itself I think.

[DWboutin]

ok! thank you Rich

[cub]

Sorry to dig up this topic but I had some problem of alignment too, from multiple flash movieclip to a single sprite sheet. My problem was the alignment between each animations, + between the rectangle collision and the scale -1/1 on the sprite (move left, move right). Put all the animation in the same timeline didn't solve my problem.

 

The prop/function " .anchor.setTo() " saved me. Everytime I change to an animation, I set the anchor like this :

this.sprite.animations.play('jump');this.sprite.anchor.setTo(0.5,0.4);[...]this.sprite.animations.play('fall');this.sprite.anchor.setTo(0.6,0.5);

Voila