Sprite Sheet Basics: Frames, Coordinates and Animation Speed
In 2D games, characters usually walk and run by flipping quickly through a series of drawings. A single image that holds all of those drawings is called a sprite sheet. Managing one image instead of many cuts loading time and lets the graphics card draw everything in one go, which is good for performance.
Decide the frame size first
The simplest approach is to put every frame in cells of the same size. For example, four 32×32 walking frames placed side by side make a 128×32 sheet. When cells are the same size, you only need to tell the engine the number of columns and rows to slice it.
Base the cell size on your largest motion. If a sword swing is wider than every other pose, size the cells for it so nothing gets clipped.
Line up the pivot
If the character's feet sit in a slightly different spot in each frame, the animation looks shaky. Usually the bottom center is used as the pivot, and every frame is drawn so that point stays in the same place. When frames have different sizes, playing them aligned at the bottom center makes jitter easy to spot.
When you need a coordinates file
Sheets with frames of different sizes, or sheets packed tightly to save space, cannot be sliced with simple cell math. In that case you use a coordinates file, such as JSON, that lists the x, y, width and height of every frame. If a sheet you downloaded has no coordinates file, a tool that finds frames using the transparent gaps can create one for you.
Start at 8 to 12 fps
Pixel art animation plays much slower than the screen refresh rate. Try around 8 to 10 fps for walking, 4 to 6 fps for idle motions like breathing, and 12 to 15 fps for fast motions like attacks. The fewer frames you have, the slower it should play to look natural.
Turn off filtering for pixel art
Small pixel art often looks blurry when an engine scales it up. Set the texture filter to Point (no filter) and turn off compression to keep the pixels crisp. Scale by whole numbers, such as 2x or 3x.
Try making one
If you are new to this, start with a simple 2 to 4 frame motion on a small 16×16 or 32×32 canvas. Get a base shape from the random generator, duplicate the frame and move things a little each time, and your first animation will be done in no time.
To combine separate frame images into one sheet, use the Sprite Sheet Packer.