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
- Browse to a folder containing your PNG files.
- Select the files you want included in the strip.
- Make sure the animation looks correct by looking at the Animated Preview
- Select the maximum pixel width the file will be rendered at. (most graphics cards cannot handle images correctly larger than 2048)
- Write down the output information (Tile size and Frame count) for use in your engine.
- 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.
JohnWednesday, October 04, 2006 1:02 AM
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
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.
DarksideFriday, 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
EdTheDuckTuesday, October 17, 2006 8:26 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
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