Skip to main content

✂️ Lesson 10.2: Sprite Sheets & Slicing

Artists rarely hand you one image per frame. A walk cycle, an explosion, a whole tileset — they all arrive as a single image with the pieces laid out in a grid. That image is a sprite sheet, and your job is to tell Unity where each piece begins and ends. You do that in the Sprite Editor, and once a sheet is sliced, every frame becomes a sprite you can drop into an animation.

🎯 Learning Objectives

By the end of this lesson, you will be able to:

  • Explain what a sprite sheet (atlas) is and why games use them
  • Switch Sprite Mode to Multiple and open the Sprite Editor
  • Slice a sheet with Automatic and Grid By Cell Size
  • Set a consistent pivot so frames don't jitter when animated
  • Extract individual frames ready to build a clip in the next lessons

Estimated Time: 40 minutes  ·  Prerequisite: Lesson 10.1 (Sprites, Sprite Renderer & PPU)

In This Lesson

Why Sprite Sheets?

A sprite sheet (also called a sprite atlas or texture atlas) is one image holding many sprites arranged in a grid. A six-frame run cycle is one PNG with six little characters in a row. There are two big reasons this is the standard:

  • Animation. Frame-by-frame animation is just showing sprite 0, then 1, then 2… A sheet keeps the whole sequence together in file order.
  • Performance. Sprites that share one texture can be drawn in a single batched draw call. Fifty separate PNGs might be fifty draw calls; one sheet of fifty frames can be one. Fewer draw calls means a smoother frame rate, especially on mobile.

📖 Definition

Slicing: the act of telling Unity where each sub-sprite lives inside a sheet. You define a set of rectangles (one per frame); Unity stores them as the sheet's child sprites, each with its own name, rectangle, and pivot. The source image is never cut up — the rectangles are just metadata.

Sprite Mode: Multiple

Select your sheet in the Project window. In the Inspector, find Sprite Mode — the same field you saw last lesson. It defaults to Single (one sprite = the whole image). Change it to Multiple, which tells Unity "this image contains several sprites; let me define them." Then click Apply.

With Multiple set, a Sprite Editor button appears just below. (If it's greyed out or missing, make sure the 2D Sprite package is installed via Window ▸ Package Manager — it ships with the 2D template but can be removed.) Click it to open the editor window.

⚠️ Keep your PPU consistent

Just like single sprites, a sheet has one Pixels Per Unit for all its frames. If each character in your run cycle occupies a 32×32 cell and you want one frame = 1 unit, set PPU to 32 before slicing. Change it afterwards and every frame rescales together — which is usually fine, but decide early so physics and layout stay predictable.

The Sprite Editor

The Sprite Editor is a dark window showing your whole sheet with a toolbar across the top. This is where slicing happens. Here it is, rebuilt faithfully — a six-frame run cycle mid-slice, with the grid lines drawn, one frame selected, and pivot markers on each cell:

Unity's Sprite Editor window slicing a six-frame sprite sheet A recreation of Unity's Sprite Editor. A toolbar across the top has a Slice dropdown, a Trim button, and Apply and Revert buttons. Below, a dark canvas shows a sprite sheet of six character frames arranged in two rows of three, overlaid with cyan grid slice lines dividing it into six cells. The top-left cell is highlighted with a bright selection border. A small blue pivot dot sits at the bottom-centre of each cell. A slice panel is open showing Type set to Grid By Cell Size, Pixel Size 64 by 64, and Pivot set to Bottom. Sprite Editor — player_run Slice Trim Revert Apply player_run_0 Slice Type Grid By Cell Size Pixel Size X 64 Y 64 Pivot Bottom Method Delete Existing Slice
Figure 1: The Sprite Editor (faithfully recreated). Cyan lines are the slice rectangles, the yellow cell is selected, and the blue dots are per-frame pivots — here set to Bottom so the character's feet stay planted.
💡 Rebuilt, not screenshotted. Like the Animator, the Sprite Editor is drawn with a technology that doesn't screenshot cleanly, so this figure is a precise reconstruction — every toolbar button, grid line, and pivot marker matches the real window. When you open your own sheet you'll recognise it immediately.

Slicing: Automatic vs. Grid

Click the Slice dropdown at the top-left of the editor. The Type field offers a few strategies; two cover almost everything:

Automatic

Automatic scans the image and draws a rectangle around each cluster of non-transparent pixels. It's magic when your frames are irregular sizes with clear gaps between them — think a sheet of mismatched items or UI icons. Set the pivot, click Slice, and Unity finds every sprite for you. The catch: frames that touch or overlap get merged, and tiny stray pixels can create junk sprites.

Grid By Cell Size

Grid By Cell Size is the workhorse for animation frames, because those are almost always laid out on a regular grid. You tell Unity the Pixel Size of one cell (e.g. 64 × 64) plus any Offset and Padding, and it lays a perfect grid over the sheet — six identical cells, six clean frames, named sheet_0 through sheet_5 in reading order. There's also Grid By Cell Count (you give rows × columns instead) which is handy when you know the layout but not the exact pixel size.

✅ Pro Tip

For animation, prefer Grid over Automatic even if the art has gaps. A fixed grid guarantees every frame is the same size and centred the same way, so the character doesn't wobble as the animation plays. Automatic can leave each frame a slightly different rectangle, which shows up as jitter.

Pivots: The Anchor of Every Frame

A sprite's pivot is the point Unity treats as its position and centre of rotation — the little blue dot in Figure 1. When you slice, you choose a pivot for every frame at once. It matters more than beginners expect, because the pivot is what stays fixed as frames swap during animation.

  • Center — the default. Good for projectiles, items, and things that spin.
  • Bottom — the go-to for walking characters. With the pivot at the feet, every frame's feet land on the same spot, so a walk cycle doesn't bob up and down or sink into the floor.
  • Custom — drag the pivot anywhere (e.g. a gun's muzzle, a character's hand) when you need a precise anchor.

⚠️ Inconsistent pivots = the "moonwalk" wobble

If different frames have different pivots, the sprite appears to slide or jump between frames as it animates. Set the pivot during the slice so all frames share it. If a single frame looks off later, fix its pivot individually in the Sprite Editor rather than re-slicing the whole sheet.

Extracting Frames for Animation

After you click Slice and then Apply, the sheet gains child sprites. Expand it in the Project window (click the little arrow on the asset) and you'll see each frame listed as its own sprite — player_run_0, player_run_1, and so on. Each is a real, usable sprite: drag one onto a Sprite Renderer and it shows just that frame.

That list in order is exactly what animation needs. Here's the pipeline from sheet to playable clip, which the next lessons build on:

flowchart LR A["One sprite sheet
(a PNG grid)"] --> B["Sprite Mode:
Multiple"] B --> C["Sprite Editor:
Slice into cells"] C --> D["Ordered child
sprites 0…N"] D --> E["Select all,
drag into scene"] E --> F["Unity offers to
create an Animation clip"]

Figure 2: From a flat sheet to an animation-ready set of frames. Selecting several frames and dragging them into the Scene is a shortcut Unity turns straight into a clip — the subject of Lesson 11.1.

💡 A tidy trick: select the whole sliced sheet's frames in the Project window, drag them into the Scene view together, and Unity pops up a Save dialog offering to build an Animation clip (and an Animator Controller) from them automatically. It's the fastest way to preview that your slicing and frame order are correct.

Hands-on Challenge

🏋️ Exercise 1: Slice a run cycle

Objective: Turn a sprite sheet into clean, ordered, correctly-pivoted frames.

  1. Import a character sprite sheet (a grid of same-size frames). Set its PPU to your project's standard.
  2. Set Sprite Mode to Multiple, click Apply, then open the Sprite Editor.
  3. Open the Slice dropdown, choose Grid By Cell Size, and enter the cell's pixel dimensions.
  4. Set Pivot to Bottom, click Slice, then Apply.
  5. Expand the sheet in the Project window and confirm the frames are named in order (_0, _1, …).
💡 Hint: my grid lines don't line up with the frames

Your Pixel Size is probably off by the padding between cells. Measure one frame precisely (or use the sheet's total width ÷ number of columns), and set Offset if the first frame doesn't start at pixel 0. Grid By Cell Count is an easy fallback when you know the rows and columns.

✅ Success check

Dropping any single frame onto a Sprite Renderer shows exactly one clean character — no neighbours bleeding in, no clipped limbs — and the frames appear in the Project window in the correct animation order.

🏋️ Exercise 2: Automatic vs. Grid

Take a sheet of loose items (coins, keys, potions of different sizes) and slice it with Automatic — notice how Unity wraps each item tightly. Then take your character sheet and try Automatic on it too. Compare the frame rectangles: the character frames will come out slightly different sizes, which is exactly why regular animation uses Grid instead.

🎯 Quick Quiz

Question 1: What must Sprite Mode be set to before you can slice a sheet into multiple frames?

Question 2: Your walking character bobs up and down as it animates. What's the most likely cause?

Question 3: Which slice type is best for a regular grid of same-size animation frames?

Summary

🎉 Key Takeaways

  • A sprite sheet packs many frames into one image — better for animation and for batching draw calls.
  • Set Sprite Mode = Multiple and Apply to unlock the Sprite Editor (needs the 2D Sprite package).
  • Automatic slicing finds pixel clusters (great for loose items); Grid By Cell Size lays a uniform grid (best for animation).
  • Choose the pivot during the slice — Bottom for characters so their feet stay planted; consistent pivots prevent animation wobble.
  • A sliced sheet yields ordered child sprites (_0…_N) — the exact input a frame animation needs.

🚀 What's Next?

You can turn images into individual sprites and organised frames. Next you'll build the world those sprites live in without placing a thousand objects by hand. In Lesson 10.3: Tilemaps you'll paint entire levels with a Tile Palette and add collision to them.

✂️ You can slice any sheet now

Multiple mode, the Sprite Editor, a grid slice, and a well-chosen pivot — that's the full recipe for turning an artist's sheet into game-ready frames.