Sprite Sheet Making

Earlier I posted about the Layers to Sprite Sheet Photoshop script.

I’ll describe the fuller process surrounding that.

A lot of game development environments like to work with animations in the form of sprite sheets. Instead of importing 16 image files, for example, it will import one image file with all the frames of the animation arranged in a 4 by 4 grid. Like this:

Actually this is a combination of four animations, each four frame long. In the code for the game, I would define four animations depending on which way the character is walking. In Flashpunk, that looks like this:
//create a sprite sheet
//GraphicsManager.PLAYER is a variable that defines the source image
//it is divided into frames that are 16px wide and 32px tall
//then the result is put into a variable named sprite
sprite = new Spritemap(GraphicsManager.PLAYER, 16, 32);

//define four walking animations
//first is the name of the animation
//second is the frames in the animation, listed inside []
// (picture these 0, 1, 2, 3
// numbers over the 4, 5, 6, 7
// image above 8, 9,10,11
// 12,13,14,15 )
//third is a frame rate
//true is to say this animation loops
sprite.add("leftWalk", [2, 6, 10, 14], 5 / Settings.FRAME_RATE, true);
sprite.add("rightWalk", [1, 5, 9, 13], 5 / Settings.FRAME_RATE, true);
sprite.add("upWalk", [0, 4, 8, 12], 15 / Settings.FRAME_RATE, true);
sprite.add("downWalk", [3, 7, 11, 15], 15 / Settings.FRAME_RATE, true);

//define four non-walking animations
//since they are only one frame long, they will be still
sprite.add("leftStop", [2], 1, true);
sprite.add("rightStop", [1], 1 , true);
sprite.add("upStop", [0], 1, true);
sprite.add("downStop", [3], 1, true);

//play one of the animations

The details will vary with different programming languages and development environments, but there will be similar things you need to do.

If you have any animation program that can output .PNG files, output a .PNG sequence with alpha transparency. (If you’re a more physical animator, this might be the tricky part. Depending what you’re trying to do, it might not matter if you have no transparency.)

You can then import any image sequence into Photoshop as layers. I use a script called Load Files Into Stack.

If I’m doing a more pixelated animation, I might rather draw the animation directly in Photoshop. When I did No More Table, I imported video from After Effects in this way, and then rotoscoped them in Photoshop.

Once you’ve got everything as layers like you want, first write down the height and width of your image, then run the Layers to Sprite Sheet script and save a copy of the file.

If importing to Flashpunk, save the resulting sprite sheet as a .PNG file with alpha transparency. In Unity, it can be a .PSD if you’d like to retain layers or other things. Unity is also the only environment I’ve encountered that allows you to set arbitrary rectangles for all the frames, instead of just a grid. DS homebrew will only take 8-bit PNGs which have no alpha channel, so you have to specify a colour that will be transparent. It also only accepts dimensions that are powers of two, like 16, 32, 64, 128, 256. Other things like GameMaker and Flixel will also take sprite sheets.

This entry was posted in uncategorized. Bookmark the permalink.

Comments are closed.