如何為 2D 遊戲製作精靈圖集：影格大小、排列方式與 AI 捷徑

You have a character and no animation. The game is waiting.

A sprite sheet is how 2D games fix that: one image, many poses, cut into frames at runtime. Here is how to lay one out so it works in any engine, and how to get a first version without drawing every frame.

What is a sprite sheet?

A sprite sheet is a single image that holds every frame of a character's animations. The engine loads one texture and shows a different rectangle of it each frame.

One image is faster to load than fifty. It is also easier to keep consistent, because every pose sits next to its neighbours.

Lay it out on a grid

Use one row per animation and one column per frame. Make every cell the same size.

row 0: idle   [1][2][3][4]
row 1: walk   [1][2][3][4][5][6]
row 2: attack [1][2][3][4]

Equal cells are what make slicing trivial. In every engine below you give the width and height of one cell and you are done.

Common cell sizes for pixel art are 16x16, 32x32 and 64x64. Pick one for the whole project. Powers of two are not required by modern engines, but they are a safe habit.

Leave a pixel or two of empty space inside each cell. It stops neighbouring frames bleeding into each other when the engine scales the sprite.

How many frames per motion?

These are rules of thumb, not laws. Fewer frames with strong poses beat many frames with weak ones.

Play pixel art at about 8 to 12 frames a second and adjust by feel. A fast attack wants quick frames. An idle wants slow ones.

Keep sizes consistent

Most broken animations come from small inconsistencies, not bad art.

• Same canvas for every frame. Never crop frames to their content. The engine needs equal cells.
• Same baseline. The feet should touch the same row of pixels in every frame, or the character will hover and sink while walking.
• One pivot. Set the pivot at the feet or the centre of the body, once, for all frames.
• Same scale and palette. Mixed pixel sizes in one sheet look like a mistake.

Import it into your engine

Unity. Set the texture type to Sprite (2D and UI), Sprite Mode to Multiple, and open the Sprite Editor. Slice by cell size. For pixel art set Filter Mode to Point (no filter) and compression to None.

Godot. Use an AnimatedSprite2D with a SpriteFrames resource, and add frames from a sprite sheet by giving the number of columns and rows. The Godot guide to 2D sprite animation walks through it. For pixel art set the default texture filter to Nearest.

Phaser. Load it with the frame size:

function preload() {
  this.load.spritesheet('knight', 'images/knight.png', {
    frameWidth: 32,
    frameHeight: 32
  });
}

The Phaser loader docs cover the options. Turn on pixelArt: true in the game config to keep edges sharp.

The AI shortcut

Drawing 20 frames of a new character is slow. For a first version, a placeholder or a game jam, you can have a model draw the sheet.

Ziztu's AI sprite sheet generator uses Seedream 5 Flash. You describe the character, pick the motion, the style and the view, and it draws one wide sheet with the poses in rows, in about half a minute.

What you choose:

• Motion: walk, idle, run, attack, jump, or a walk, idle and attack set.
• Style: pixel art (16, 32 or 64 px look), cartoon, anime or flat vector.
• View: side, top-down, isometric or front.

The price is about 70 credits a sheet, and the page shows it before you generate.

A prompt that worked as an example on the page: "A small knight in blue armor with a red plume and a round shield." Who, colours, what it holds. Keep it to one character.

What to expect from an AI sheet

Be realistic. It is a starting point, not finished art.

• The sheet is one image. The page says it does not export JSON, GIF or frame data. You slice it in your engine or an editor.
• It is not true pixel art. The sheet is a large image, about 2048 by 1152 pixels. The style option sets the look, so for real low-resolution art, scale the frames down and clean them up in a pixel editor such as Aseprite.
• Frames can drift. Models can change small details between frames or space them unevenly. Check every frame before it goes in the game.

If the frames are uneven, cut them out one by one in an editor, put each on the same size canvas, line up the feet, and then pack them into an even grid. Ziztu also has a free in-browser sprite sheet packer that packs frames you already have into one sheet with a JSON map.

A simple workflow

1. Decide the cell size and the motions you need.
2. Generate or draw one sheet per motion.
3. Fix the baseline and the sizes.
4. Pack into an even grid.
5. Slice in your engine and test the animation in game.
6. Adjust the frame rate by feel.

You will spend more time in steps 3 to 6 than on the drawing, and that is normal.

Good luck shipping it.

This post was written with AI assistance.