5 Replies Latest reply on Jun 11, 2013 9:49 PM by kglad

    CS6 Sprite Sheet animation alignment puzzle

    DishesAreDoneMan Level 1

      Hey all, I greatly enjoy using Flash CS6's Generate Sprite Sheet tool since it's much much quicker than exporting all the sprites and using TexturePacker (though I wager TP would provide far better optimization). One problem I seem to have is aligning different animations to the same origin - which isn't the origin of the sprite (top left corner).


      Say my character Jim has two animations:

      Run (small sprites, as he runs in place)

      Jump (short and tall sprites, and a bit wider than the Run)


      I currently generate a sprite sheet by highlighting both clips and right clicking. This gets me a perfect Sprite Sheet with both animations and their respective names (based on MC name). The Run and Jump frame sizes are different, because the Jump sprites are taller than the Run sprites -- this all makes sense.


      What doesn't is that there's zero information on how those two animations should be placed such that Jim can go from playing his run animation and then his jump animation with his feet in the same place, despite the fact that if you inspect either of those clips Jim is standing right at Flash's little origin point at the start of both.


      Sure, the data file (JSON in my case) has all the offsets for placing the individual frames in the right place, but how do I align Jim's feet from one set of frames to the next without having to do it all by hand? To date the only workaround I've found is to dump all the animations into a single timeline such that they all take the same frame size, but this is TERRIBLE for managing sprites and animations since it gives all the frames the same name as the combined timeline.


      What I really need is another set of numbers in the Sprite Sheet data file that tells me the frame x & y offset from Flash's movieclip origin. I have a suspicion this doesn't exist and is impossible.


      At a loss here other than aligning each animation's frame by hand, which may have to be done every time an interal sprite changes size.


      Thanks for any insight, none of the Adobe pages or demos go into any depth other than creating a sprite sheet of a single image or animation.

        • 1. Re: CS6 Sprite Sheet animation alignment puzzle
          kglad Adobe Community Professional & MVP

          using sprite sheets doesn't relieve you from the obligation to design your animations so they can be integrated. 


          typically, your running animation would be able to jump only from certain frames (where at least one foot is on the ground).  your jump animation might have 3 start jump frames, one with both feet on the ground (to mesh with a standing jump), a left foot on the ground and a right foot on the ground.  transitioning from the running animation to the jump animation should be controlled by your last run animation frame and first jump animation frame.  everything needs to be aligned so it looks seamless when you change from one animation to another.

          • 2. Re: CS6 Sprite Sheet animation alignment puzzle
            DishesAreDoneMan Level 1

            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)

            • 3. Re: CS6 Sprite Sheet animation alignment puzzle
              kglad Adobe Community Professional & MVP

              the accompanying xml should specify the registration point of each sprite.

              • 4. Re: CS6 Sprite Sheet animation alignment puzzle
                DishesAreDoneMan Level 1

                I don't believe any of the export types actually do, at least not the JSON types or Sparrow ones.


                But at least your mentioning of that made me find the JSON.plugin file and I modified it myself to include the frame.registrationPoint { x, y } value for every frame. Now I should be able to select a bunch of animations, generate a sprite sheet from all of them at once, and be able to swap them out via code in my app with the data to overlap them correctly.


                I'll pop back in here if this doesn't work, but I think it will. Not sure if I should link or post the modified JSON.plugin.jsfl source code that adds the correct regPoint data to solve this issue but I will provide if requested.

                • 5. Re: CS6 Sprite Sheet animation alignment puzzle
                  kglad Adobe Community Professional & MVP

                  you're correct.  using spritesheets loses reg point information.


                  i never noticed because i always use 0,0 reg points and position using code but that's not very handy for designers.