A tool to help with Sprite Animations: Sprite Strip Composer

    General discussion

  • Hi:

    I have been working on a game written in the XNA Framework. The game has many sprite animations. After researching how other do this in the community I adopted the approach of loading a "Sprite Strip" (PNG) consisting of a row of frames. If there are many frames and the sprite is large, I split them up onto multiple rows.

    One of the laborious tasks was creating such 'Sprite Strips' from a sequence of PNGs. I have created a very basic Windows Application named Sprite Strip Composer to solve this time consuming problem.

    Sprite Strip Composer

    1. Browse to a folder containing your PNG files.
    2. Select the files you want included in the strip.
    3. Make sure the animation looks correct by looking at the Animated Preview
    4. Select the maximum pixel width the file will be rendered at. (most graphics cards cannot handle images correctly larger than 2048)
    5. Write down the output information (Tile size and Frame count) for use in your engine.
    6. Save the strip and the Application builds the Sprite Strip for you.

    This tool is free to anybody who wants to use it. Currently it supports PNG files and has not been tested and no doubt there will be bugs. If you do encounter any problems or have suggestions you can contact me at john-at-ukmn-dot-com.


    Wednesday, October 04, 2006 1:02 AM

All replies

  • I was considering doing the very same thing, thanks for saving me the trouble.

    Here's a couple of suggestions as to how I was thinking of doing it.

    4.  Have your app take the square root of your number of images (adjust up for any remainder).  For instance, if you have 10 images of 15x15, take the square root of 10 (3.16 roughly) and adjust width by 1 (4).  Multiply out (4x15 and 3x15) and you end up with an image that's 60x45 pixels.  Then just plug the images in top-to-bottom, left-to-right (DirectX apparently prefers this order to left-to-right, top-to-bottom) like so

    1 4 7 10
    2 5 8
    3 6 9

    5.  I'd go ahead and add the extra step of spitting out a duplicate image (perhaps a thumbnail if you're working with large textures) that has the sprite index and rectangle location printed in the corner of each frame (eg, 6:30x15).  Kinda like the index prints at the one-hour photo.  The index is especially handy for people like me who've always used left-to-right, top-to-bottom before finding out out DirectX prefers bottom-to-top, left-to-right.

    I've also read that DirectX is a big fan of square textures and even more so of multiple-of-two textures, so you may want to consider using (in the above case) 45x45 or even 64x64 (multiple of two) for the image size.

    Just something to consider.

    Thanks for contributing to the XNA community!

    Thursday, October 05, 2006 6:30 PM
  • Wayward:

    Thanks for your interesting comments. I will add your suggestions to the next release.


    John Harding
    Friday, October 06, 2006 10:10 AM
  • Fantastic tool, will greatly ease any production of animations I do for games (one of my least favorite jobs)

    Saves having to make the images and render them in game to see what works, Great job.

    Suppose it would also be nice to batch several animations for differen elements into th same file as well, create a batch of animations.

    Saves on texture memory usage in game.



    Friday, October 13, 2006 7:48 AM
  • Hi, just a quick problem.

    The program is a good idea and works fairly well but I found that I had to create the png it was writing to otherwise it errored saying it couldn't find it.

    This is easy enough to get around but is a bit annoying if you have alot of strips to make.

    Thanks for this great program



    Tuesday, October 17, 2006 8:26 AM
  • I have fixed this issue Duck... I will post a newer version later tonight.

    Tuesday, October 17, 2006 8:59 AM
  • I couldn't get this to work right with my strips of images it wouldn't let me save and the images were not lining up right. :( Not sure if anyone else was having problems with this.
    Wednesday, October 18, 2006 3:44 AM
  • Seems to be ignoring the bottom half of my images?  Any reason that would happen?  Could post an example if that would help you debug..
    Thursday, February 22, 2007 5:54 AM
  • After looking a little closer, it's zooming the images to create the animated version, this ends up cutting off the bottom.  This a known issue or some eccentricity in my .png's?
    Thursday, February 22, 2007 8:32 AM
  • Hi all, I tried working with the sprite strip composer but i'm not sure as to how to use it.I have a folder with several individual  PNG images that I would like to make into a sprite strip but when I use the tool to open the folder I don't see my images and then when I click the save as button it says I need to select an image. I'm I just using this tool the wrong way,or is this not the  way this program is  supposed to be used? Thank you for your help and suggestions.
    Thursday, February 22, 2007 10:44 PM
  • After loading a folder select the images you want in the animation by left clicking on the items in the loaded list and holding control, use shift to select a range of images (for example, click on the first frame, then hold shift and click on the last frame).
    Friday, February 23, 2007 4:55 AM
  • Thank you for your reply but there are no items in the loaded list. The only thing I get is information about where my folder is located next to the browse button at the top. the window below is empty, so is the animation window is also blank. What am I doing wrong?
    Friday, February 23, 2007 3:17 PM
  • If there are no .png's in the folder then the list will be empty.  Also, the program doesn't appear to load files recursively so you have to put all the images in a single folder and load that one.
    Saturday, February 24, 2007 3:10 AM
  • Yes I do have png images in the folder,thats my question.when I use the composer to open the folder containing my images I just get an empty window.What am I doing wrong?? Thank you in advance.
    Saturday, February 24, 2007 3:02 PM
  • Well, if the png's are in the folder then it should just list them.  I'm afraid I've got no clue why it isn't :(

    I'm, personally, still wondering why it seems to zoom my pngs when it tiles them, so I can't say I've gotten it to work correctly either...

    Sunday, February 25, 2007 9:37 AM
  • I could really use this if I could ever get it to work right.Does anyone else have any Ideas?? Thanks.
    Sunday, February 25, 2007 4:23 PM