Jump to content

Trouble animating a texture atlas


redwoodfavorite
 Share

Recommended Posts

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:

post-6968-0-24708800-1392789579.png

 

NOT TRIMMED:

post-6968-0-70063700-1392789580.png

 

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

 

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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. :)

Link to comment
Share on other sites

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!

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

  • 1 year later...
  • 3 months later...

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?
Link to comment
Share on other sites

  • 2 weeks later...

 

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. 

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

  • Recently Browsing   0 members

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