Sprite Sheet Stitcher - Quick Sprite Sheet Maker file

Client Description

This program will stitch together a collection of .png renders of a character to create a sprite sheet for use in XNA. As this was created as a tool for the Velisia game project it does have some strict requirements:

- Sprite must be rendered from 8 angles

- The file names of the .pngs being compiled must be exxx to exxx with the x's replaced by numbers. 3DS max by default if you give it the letter e as a file name will create e001 - e008 which is what we where using in our process but you could just rename the files manually if really required.

- Animations must either be 12 frames at 180x180 pixels, or 8 frames at 256x256 pixels.

This sprite sheet and design is aimed at a game made in XNA that uses 100 by 100 grid sections for its sprites. But please download the program and have a play if it is useful to anyone else working on a similar styled game we are glad to help.

Velisia Sprite Creation Process

I'm going to run though the process we used when creating the sprites for Velisia

1) Create your models in a 3D application (we used 3ds Max) and animate them to either 8 or 12 frames.

2) Create a set of 8 cameras in a seperate file, these should be set up to view the 0,0 position at angles of east, north, north west, north east, south, south east, south west and west angles. The tilt on the cameras is upto your personal choice, your file should look something like this although this already has the character in it after a merge.

3) Merge the cameras into the file of the model you wish to render, setup the render to either 256x256 pixels for 8 frames or 180x180 for 12 frames. Select render all active frames, set the save file type to .png and the file name to the initials of the camera your using so, e for east for example. In 3ds max there is no need to add the numbers, the application will save out the .png's with them added on.

I recommend you save out your .png's to a folder named after the animation set, you should end up with a folder that looks something like this:

4) Next step is to fire up the Sprite Stitcher, Click Create and Navigate to the folder that contains all of your .png's. Simply selecting it, if you have followed this process correctly cause the sprite stitcher to load up all your files into a sprite sheet on the left side of the screen and begin animating you a preview of your sprites on the right side of the screen. The middle image rotates slowly between your sprite views, it should not jump about and if it does it means some of your camera angles are wrong and it will look strange in engine if the character changes direction. At the bottom of the screen there is a slide bar to increase and decrease the speed of the animations being previewed, your current screen should look something like this.

5) Final step is to hit save, give your sprite sheet a name and jobs done, you now have a sprite sheet ready to import into your engine/editor for use.

I hope this has been a useful guide for anyone wishing to use the sprite stitcher or anyone simply interested in how we made the assets.

Chris Wilson
Project Lead