Robofish is my first real game project and when I started working on it I knew that using sprite sheets was the preferred method for exporting graphics to the engine but I didn’t have a clue how to set them up efficiently.  Sprite sheets are basically large image files that tile out each graphic or animation’s frame so that the game engine can read the images in order according to the sheet and display them on the screen when called.  That sounds confusing, I am not even sure I understand what I just typed!  Simply, a game engine runs faster if it can see a bunch of graphics on one image file rather than thousands of individual images.  Jacob, my Brother and the programmer behind our games, and I knew this but our first attempt at sprite sheets wasn’t quite the most efficient.  Continue reading to see how first discovered how to make sprite sheets and how we had to modify our entire sprite sheet process about 60% through production, also pictures below!

I have created nearly all my animations for Robofish in Adobe Flash and when I am finished with one I export each frame as a individual PNG files.  I used PNG files for the alpha channel allowing them to have transparent backgrounds.  At this point I knew I had to get these image files into a sprite sheet tiled out one after another.  At first, I actually thought about setting them up in Photoshop by hand which would work for 1 or 2 small sprite sheets but in the big scheme of things this is hardly efficient, it would take me hours to do 1 sheet.  So off to Google search to find a program that automated it for me.  After scanning a few links I discovered a website with a tutorial on how this particular person made sprite sheets, they used a program called GraphisGale Free Edition.   I downloaded the program to give it a shot, it worked really well and I ended up using it for about 60% of our production.  Once I would finish exporting an animation from Flash I would go into GraphicsGale and use the “import multiple files” function to bring in all the individual PNG files.   GraphicsGale has a nice interface that displays the animation you just imported and even allows you to move frames around in case something got messed up during the import, which often happens.  Once the animation was correct I then exported from GraphicsGale as a “combined image”, in other words a sprite sheet.  Below is an example of what one of these sprite sheet looks like.

The top left of the sheet is the start of the animation and goes in order from left to right to the end of the animation in the bottom right.  Time to celebrate!  I made my first sprite sheet and was ready to start cranking out the animations!  And that is exactly what I did, for nearly 2 years.  We used these types of sprite sheets because they worked, were easy to use, and we really didn’t see a problem at the time.  However, thousands of graphics later we noticed the game was taking way too long to load.  Jacob narrowed  the problem down to the way the engine was reading our sprite sheets and determined if we can get more graphics onto a single sprite sheet it will decrease loading times.  As it was, the game was having to load hundreds of sprite sheets into memory which is better than thousands of individual graphics but still not the most efficient.  The graphics card on the Xbox 360 allows for sprite sheets that are 4096 x 4096 pixels in size.  So with that size in mind we set out to scrap all of our old sprite sheets and make new ones that were much larger but would decrease our total number of sprite sheets from in the hundreds to a handful.  This was made possible by a useful program called Sprite Sheet Packer.  This program made exporting large sprite sheets a breeze, however its algorithms seem to be designed to cram the graphics on the sprite sheet in any order it wanted to save as much space as possible.  This was good and bad, good because we needed all the space we could get on a sprite sheet but bad because the graphics were not in any specific order on the sheet which is what our development process required at the time.  Luckily, Jacob developed some custom code that read a text file produced by the sprite sheet packer which in turn allowed the graphics to be displayed in the correct order and play the animations.   See below to check out what the new sprite sheets looked like, click on it to see the full size!  (Originally a PNG file, saved as JPG for this post)

As you can see the difference is MASSIVE. Now we had the ability to literally pack our graphics into giant image files rather than hundreds of smaller files.  This decreased our loading time to seconds rather than minutes and also gave us a little bit more memory to work with.  Before we made this change we had around 200+ sprite sheets, we are sitting at about 30 right now.  We had to create a sprite sheet per level which is a 16 sprite sheets alone.  This is just one of the many things I have learned during the development of Robofish, I am anxious to finish Robofish and put some of these new skills and processes to use on a new game!  If you are a new developer I would recommend taking some time to seek out all your options for a particular problem befor jumping on the first solution you find, you can save yourself a lot of development time if you spend more time in the planning phase.