Non-uniform sprite frames

Getting Started Newbie Questions
#1

Let’s say I have a png representing sprite sheet with non-uniform widths of individual frames.

I slice the spritesheet and then use TexturePacker

Now, when I do the initiation of new sprite, set the sequence and run it, the sprite jitters.

I assume it is because of the various frame widths.

I can imagine the solution could be that I can find the widest frame, and change the width of other frames to that width, and then pack it with TexturePacker. The problem is, that one has to “widen” the frames in correct way - see following example:

I have two frames showing fireball heading right, one is 5 units wide, the other one 3 units wide.

1st: |XXXXX| 2nd: |YYY| 

When I want to make the 2nd one 5 units wide, I have to make it same width as 1st (Step 1), and put the content of the original frame to correct position - in this case, to the right side of the frame (Step 2). If omitting Step 2, the final animation would look strange, because the fireball has its “nose” 5 units to the right when playing 1st frame, but back to 3 (even though the frame now also 5 units wide) when playing 2nd frame - this causes the jitter.

So, I have to perform both steps:

Step 1: 2nd: | | Step 2: 2nd: | YYY| 

Now, the frames have uniform width and the content is aligned well.

However, this seem like ton of work - especially when having many frames.

Any idea about better approach?

#2

Hi @corona.shaman,

TexturePacker will handle this for you. You shouldn’t “pre-trim” your sprite frames before putting them in there. Instead, design them to be completely aligned in regards to the frame with the widest “canvas”. Then, put those into TP, and make sure that you use the “Trim” packing method. When you export, the program will automatically give you the sheet data (in Lua) with the properties “sourceX”, “sourceY”, “sourceWidth”, and “sourceHeight”. These are essential properties when dealing with non-uniform sprite frames that must still align. With these, you’ll get the sprite aligned properly across all frames, even though TexturePacker has trimmed them.

The crucial thing to remember here is that the sprite will be positioned (on the screen) in accordance to the CENTER point of the imaginary, untrimmed “canvas” that was the size of the widest frame.

Hope this helps,

Brent

#3

I’m still a bit lost. Let’s say I have following spritesheet I found online:

Now, I want to make animation from it. The question is how should I proceed now?

In this case I even have the plist file (http://www.36peas.com/storage/modernsoldier/modern%20soldier%20spritesheet%20small.plist) which is something that isn’t provided by most of other spritesheets available online.

Still, how should I use texture packer (or other tool) to prepare the spritesheet in a way that I can then use the individual sequences to make e.g. a running “non-jittering” soldier?

#4

Hi @corona.shaman,

I’m going to be posting a guide with this info (image sheet trimming considerations) in the next day or two. If you can wait until then, I think it should help you figure this out.

Brent

#5

That’s a great news.

There are many other things I have to learn, so no problem with waiting a day or two.

Thanks a lot in advance :slight_smile:

#6

Hi @corona.shaman,

As promised, here’s the new updated guide. This should help explain the trimming issues:

http://docs.coronalabs.com/guide/media/imageSheets/index.html

Take care,

Brent

#7

@Brent: In the updated guide you write that Effectively, the image will be positioned in respect to the  center  point of the untrimmed frame size How can e.g. the x-position of a moving enemy (e.g. a soldier marching from left to right) consisting of 3 frames be “corrected” for each of these frames? Is there some event like “frameChange” one can create a listener for?

#8

Hi @corona.shaman,

I’m not sure I understand what you’re designing. Once you have the sprite set up with the methods I described, and it’s animating “in place” with no skipping (because you let TexturePacker determine the proper values), the object behaves like any other object. It’s origin point will be center, like other objects, when you position it, and you can move it around, transition it, etc.

To answer your question though, you can detect each frame change in an animation if you need “special case” kind of handling. See here:

http://www.coronalabs.com/blog/2012/10/02/animated-sprites-and-methods/

Brent

#9

I think I originally misunderstood your advice. Let me try to sum up you advice in my own words, so we can see I get the idea:

  • For sake of this, let’s assume we’re talking about variable frame width only, let’s omit the height dimension completely 
  • There are three images representing three frames of the sprite animation their respective widths are
    • frame1 - 40
    • frame2 - 50
    • frame3 - 60
  • Let’s align the frame1 and frame2 in a boundary of width 60 as if their width be 60 (max width of all the frames)
  • So, in the end the width of each of the images representing frames is 60
  • Let’s put the images into TexturePacker and use the Trim method
  • Publish, TP trims the actual image width of frame1 and frame2 to 40 resp. 50, but sets sourceWidth to 60 for both of them
  • This ensures that when working with the generated texture file and data file all the positioning is calculated correctly

Do I understand the approach correctly?

What remains is how do I handle a spritesheet found somewhere on internet where there is only one png containing “atlas” of images representing individual frames which have non-uniform width , but no “metadata” were attached to the texture file?

#10

Hi @corona.shaman,

Yes, basically you have the right idea. The point of this is, if you import frames of varying width/height into TP (surrounded by transparent space), you generally want the trimming to occur so the resulting sheet is as small as possible… but of course, you need those frames to align as if they were NOT trimmed, so the animation don’t jitter.

As for a sheet found on the internet, I think you’ll have to trim that up manually, or hand-build your entire sheet specs. I don’t think TexturePacker has a way to visually select and trace frames (but I may be mistaken).

Brent

#11

Hi @corona.shaman,

TexturePacker will handle this for you. You shouldn’t “pre-trim” your sprite frames before putting them in there. Instead, design them to be completely aligned in regards to the frame with the widest “canvas”. Then, put those into TP, and make sure that you use the “Trim” packing method. When you export, the program will automatically give you the sheet data (in Lua) with the properties “sourceX”, “sourceY”, “sourceWidth”, and “sourceHeight”. These are essential properties when dealing with non-uniform sprite frames that must still align. With these, you’ll get the sprite aligned properly across all frames, even though TexturePacker has trimmed them.

The crucial thing to remember here is that the sprite will be positioned (on the screen) in accordance to the CENTER point of the imaginary, untrimmed “canvas” that was the size of the widest frame.

Hope this helps,

Brent

#12

I’m still a bit lost. Let’s say I have following spritesheet I found online:

Now, I want to make animation from it. The question is how should I proceed now?

In this case I even have the plist file (http://www.36peas.com/storage/modernsoldier/modern%20soldier%20spritesheet%20small.plist) which is something that isn’t provided by most of other spritesheets available online.

Still, how should I use texture packer (or other tool) to prepare the spritesheet in a way that I can then use the individual sequences to make e.g. a running “non-jittering” soldier?

#13

Hi @corona.shaman,

I’m going to be posting a guide with this info (image sheet trimming considerations) in the next day or two. If you can wait until then, I think it should help you figure this out.

Brent

#14

That’s a great news.

There are many other things I have to learn, so no problem with waiting a day or two.

Thanks a lot in advance :slight_smile:

#15

Hi @corona.shaman,

As promised, here’s the new updated guide. This should help explain the trimming issues:

http://docs.coronalabs.com/guide/media/imageSheets/index.html

Take care,

Brent

#16

@Brent: In the updated guide you write that Effectively, the image will be positioned in respect to the  center  point of the untrimmed frame size How can e.g. the x-position of a moving enemy (e.g. a soldier marching from left to right) consisting of 3 frames be “corrected” for each of these frames? Is there some event like “frameChange” one can create a listener for?

#17

Hi @corona.shaman,

I’m not sure I understand what you’re designing. Once you have the sprite set up with the methods I described, and it’s animating “in place” with no skipping (because you let TexturePacker determine the proper values), the object behaves like any other object. It’s origin point will be center, like other objects, when you position it, and you can move it around, transition it, etc.

To answer your question though, you can detect each frame change in an animation if you need “special case” kind of handling. See here:

http://www.coronalabs.com/blog/2012/10/02/animated-sprites-and-methods/

Brent

#18

I think I originally misunderstood your advice. Let me try to sum up you advice in my own words, so we can see I get the idea:

  • For sake of this, let’s assume we’re talking about variable frame width only, let’s omit the height dimension completely 
  • There are three images representing three frames of the sprite animation their respective widths are
    • frame1 - 40
    • frame2 - 50
    • frame3 - 60
  • Let’s align the frame1 and frame2 in a boundary of width 60 as if their width be 60 (max width of all the frames)
  • So, in the end the width of each of the images representing frames is 60
  • Let’s put the images into TexturePacker and use the Trim method
  • Publish, TP trims the actual image width of frame1 and frame2 to 40 resp. 50, but sets sourceWidth to 60 for both of them
  • This ensures that when working with the generated texture file and data file all the positioning is calculated correctly

Do I understand the approach correctly?

What remains is how do I handle a spritesheet found somewhere on internet where there is only one png containing “atlas” of images representing individual frames which have non-uniform width , but no “metadata” were attached to the texture file?

#19

Hi @corona.shaman,

Yes, basically you have the right idea. The point of this is, if you import frames of varying width/height into TP (surrounded by transparent space), you generally want the trimming to occur so the resulting sheet is as small as possible… but of course, you need those frames to align as if they were NOT trimmed, so the animation don’t jitter.

As for a sheet found on the internet, I think you’ll have to trim that up manually, or hand-build your entire sheet specs. I don’t think TexturePacker has a way to visually select and trace frames (but I may be mistaken).

Brent