Trouble animating a texture atlas

[redwoodfavorite]

Hello,

 

I'm having some trouble animating a sprite atlas.  I apologize if this is something I'm doing wrong in TexturePacker but I can't seem to get it to animate right in Phaser.  

 

I loaded the atlas using game.load.atlasJSONHash() and it IS flipping through all the frames.  The problem, however, is that the textures seem to re-center on the sprite based on the width of the particular frame.  The running animation for my sprite worked perfectly because the width and height of each frame stayed the same, but when my sprite extends his sword out from his body and expands his size, his texture is re-centered. This causes his whole body to appear to shift over slightly.  It almost seems as if I need to adjust the anchor point for the sprite at each frame.  

 

I hope that explanation makes sense.  Here are some pictures of my spritesheets.  It is worth noting that the slash animation works as intended if I don't perform the trimming and I leave all the frames the same size.

 

TRIMMED:

 

NOT TRIMMED:

 

Any help would be greatly appreciated.  Really enjoying Phaser thus far! 

 

[rich]

The way the atlas works in Phaser is that the texture should be orientated based on the original source sizes, not the trimmed size. If you open your json file you should see that all of the source dimensions are the original "large" frame sizes, and only the trimmed values are the smaller ones - is this the case?

[redwoodfavorite]

Thanks for the speedy response.

 

Using the trim mode 'trim' my JSON file stores the source size of the original sprite.  When I use trim mode in texturepacker it seems as if the images are trimmed down for storage but animated in phaser based on their original size.  This includes all the extra transparent pixels present in the non-trimmed version and the sprite appears to float above the ground.  

 

USING MODE: 'TRIM':

 

http://imgur.com/AA4e6ZZ,SZTUNPk

 

So I've actually been using the trim mode 'crop, keep position', which doesn't seem to save the size of the original .png in the sourceSize field of the JSON file. 'Crop, keep-position' seems to animate as the cropped size in Phaser though it produces the adjusting problems I described in my first post.  

 

The JSON file generated from the 'crop, keep-position' sets the property 'trimmed' to false for each texture.  Interestingly, when I manually changed this value to true for each frame, the animation performed perfectly without using the original image's size.  The only problem is that the texture seems to be rendered downward left of the sprite location.

 

USING MODE: 'CROP, KEEP POSITION':

 

http://imgur.com/AA4e6ZZ,SZTUNPk#1  

 

I'm wondering if I'm missing something important...  Thanks again for any help.

[richpixel]

Did you figure this out? I honestly still don't know how to use animations that have variable frame sizes without doing an ugly hack inside PIXI. Is there a tutorial that addresses this? What is the proper setup in TP with trimming to allow variable frame sizes to work in Phaser?

[rich]

TP exports with "trim" work fine for animations (see any of the example animations, such as the undersea one). The issue only arises if you pick 'crop' because it then has no point of reference for aligning the animations from.

[richpixel]

Thanks - I don't mean to hijack the thread - but I think my question is the same as the OP

 

I see in the seacreatures_json, a few of the animations are trimmed - for example purplefish - but it seems that the 'spriteSourceSize' for all of the frames are the same:

 

,{
    "filename": "purpleFish0005",
    "frame": {"x":2,"y":1537,"w":104,"h":54},
    "rotated": false,
    "trimmed": true,
    "spriteSourceSize": {"x":22,"y":2,"w":126,"h":57},// the w and h are always the same, and always match 'sourceSize'
    "sourceSize": {"w":126,"h":57}
}
(

 

 

In my situation I have trimmed frames, but there are 3 frames that have different than normal 'spriteSourceSize' width and height, which I think is causing the animation to 'jump' when it hits those frames:

 

2 frames from my atlas:

 

"winFX_002.png":
{
    "frame": {"x":124,"y":612,"w":120,"h":120},
    "rotated": false,
    "trimmed": true,
    "spriteSourceSize": {"x":5,"y":8,"w":120,"h":120}, // most frames are 120x120 here
    "sourceSize": {"w":128,"h":128} // sourceSize is always 128x128
},
"winFX_003.png":
{
    "frame": {"x":2,"y":2,"w":122,"h":120},
    "rotated": false,
    "trimmed": true,
    "spriteSourceSize": {"x":3,"y":8,"w":122,"h":120}, // this one is 122x120, is it the cause of the jump?
    "sourceSize": {"w":128,"h":128}
},
 

Is there a working example like what I have? Where the sizes change within a single animation?

Thanks!

[rich]

Nope what you've got there looks like a cropped frame. I've seen this a few times, I'm sure Flash used to export like this before it sorted its shit out. It's impossible to re-assemble an animation when that happens because it has no consistent point of reference to base the animation on. No 'registration point' if you will.

[richpixel]

Thanks Rich. I did a little more research... for those that run into this with TP - make sure 'Allow rotation' is not checked. Having that checked messed us up.

[ForgeableSum]

Okay, I'm glad I found this thread but I don't understand the solution. What is "Allow rotation?" I don't see it as a setting in TP. 

 

I am running into this same problem where the sprite animation is jittering when the sourceSize is variable.. 

[njligames]

Hello, I am having the same issues at @feudalwars with the sprite animation being jittery then the sourceSize is variable. 

i'm figuring that maybe if I move the pivot point, that would fix it, but it doesn't seem to do the trick..

 

local offsetX = (sprite.sourceRect.width - sprite.size.width) / sprite.sourceRect.width

local offsetY = (sprite.sourceRect.height - sprite.size.height) / sprite.sourceRect.height

 

local pivotPointX = 0.5 - offsetX

local pivotPointY = 0.5 - offsetY

 

I am thinking that we can calculate it somehow with the data that TexturePacker outputs.. but i haven't found the right formula, yet..

Any help?

[Skeptron]

Did you try putting the anchor point at the center of your sprite. Like at (0.5, 0)?

[ForgeableSum]

 

Hello, I am having the same issues at @feudalwars with the sprite animation being jittery then the sourceSize is variable. 

i'm figuring that maybe if I move the pivot point, that would fix it, but it doesn't seem to do the trick..

 

local offsetX = (sprite.sourceRect.width - sprite.size.width) / sprite.sourceRect.width

local offsetY = (sprite.sourceRect.height - sprite.size.height) / sprite.sourceRect.height

 

local pivotPointX = 0.5 - offsetX

local pivotPointY = 0.5 - offsetY

 

I am thinking that we can calculate it somehow with the data that TexturePacker outputs.. but i haven't found the right formula, yet..

Any help?

 

Skeptron solution is what I had figured out. The sprite needs to be "anchored" that is, at the same part of the image on each frame. So if you have a simple character sprite, make sure the feet of the character are in the same exact position on each frame. Also make sure each frame is exactly the same size (before you run it through Texture Packer). You may need to use a template. That's what I had to do at least.