Sprite Sheet Packer & Slicer: Pack Frames, Split Atlases & Export for Unity/Godot

Sprite sheets are one of the most practical optimizations in 2D game pipelines. Instead of loading dozens of separate frame files, you pack animations into a single texture atlas and use frame metadata for playback. One texture bind, one draw call batch, one version-controlled asset — whether you ship to Unity, Godot, Phaser, or the web.

This guide focuses on the packing and slicing workflow — when to merge frames vs split an existing atlas, how to structure exports for engine import, and how to run the full pipeline in the Jaconir Sprite Sheet Generator. For atlas performance, padding, mipmaps, and engine import settings, start with the Complete Sprite Sheet Guide for Godot & Unity. For animation timing, state machines, and playback FPS, see the companion Sprite Sheet Animation Guide.

What Is a Sprite Sheet?

A sprite sheet is one image containing many animation frames or UI sprites arranged in a grid or packed layout. A companion metadata file (JSON, XML, or engine-native) maps frame names to {x, y, width, height} rectangles so your engine plays the correct region each tick.

Two operations dominate production:

• Packing — many PNGs → one atlas + metadata
• Slicing — one large PNG → separated animations or renamed regions

Both run in the browser tool without installing TexturePacker or CLI utilities.

Packer vs Slicer: Decision Table

Step-by-Step: Pack Separate Frames

Step 1: Prepare Input Assets

• Consistent frame dimensions per animation (walk frames all 48×48, attack can differ)
• Sequential naming: walk_00.png, walk_01.png — order matters in packer queue
• Transparent PNG — no premultiplied alpha unless your engine expects it

Step 2: Configure in Browser

Open Sprite Sheet Generator:

1. Upload all frames (drag folder or multi-select)
2. Choose Grid layout if uniform size; Packed if mixed sizes
3. Set padding to 1–2 px — prevents texture bleeding at non-integer zoom
4. Optional: set power-of-two canvas size for older mobile GPUs

Specialized modules on the same tool:

• CSS Sprite Packer — web UI sprites
• Game Asset Maker — bundled Unity/Godot export

Step 3: Export PNG + JSON

Download both files. JSON structure example:

{
  "frames": {
    "walk_00": { "frame": { "x": 0, "y": 0, "w": 48, "h": 48 } },
    "walk_01": { "frame": { "x": 50, "y": 0, "w": 48, "h": 48 } }
  },
  "meta": { "size": { "w": 512, "h": 256 } }
}

Step 4: Validate Before Commit

Import to engine, play one loop per animation. Check:

• Pivot / origin alignment (feet on ground line)
• No cropped pixels at frame edges
• Frame order matches design doc — see GDD Guide

Step-by-Step: Slice an Existing Atlas

When you receive a combined sheet:

1. Upload the master PNG to slicer mode
2. Define cell size (e.g. 64×64) or row/column counts
3. Assign row groups: rows 0–1 = idle, rows 2–3 = walk
4. Export separate PNGs or a remapped JSON atlas

Slicer mode shines for legacy assets and licensed sprite packs that ship as single images.

Engine Import Notes

Unity

• Texture Type: Sprite (2D and UI)
• Sprite Mode: Multiple → Sprite Editor → Slice
• For JSON atlases: use a third-party importer or script SpriteMetaData from JSON
• Keep Pixels Per Unit consistent project-wide (often 16 or 32 for pixel art)

Animation clips bind to sliced sprites in the Animator — details in Sprite Sheet Animation Guide.

Godot 4

• Import PNG → enable Filter off for crisp pixel art
• AnimatedSprite2D + SpriteFrames resource — add frames from sprite sheet grid
• For JSON-driven setup, parse atlas in _ready() and call SpriteFrames.add_frame()

Export Godot bundles directly from Game Asset Maker when available.

Phaser 3 / Web

this.load.spritesheet('hero', 'assets/hero.png', {
  frameWidth: 48,
  frameHeight: 48
});

JSON atlases from packed mode work with Phaser's load.atlas().

Performance and Memory Tips

• Power-of-two atlas dimensions (512, 1024) help on older GL devices
• Trim transparent borders before packing — packed mode does this automatically
• Split characters across sheets — one atlas per character, not one mega-atlas for the whole game
• Atlas size budget: stay under 2048×2048 for mobile; 4096 max on modern desktop

After packing, generate collision from the same PNG: Auto Hitbox Generator → Polygon Collider Simplifier.

Common Mistakes

• Mixed frame dimensions without packed layout: Grid mode assumes uniform cells — mismatched sizes overlap in metadata
• Zero padding on pixel art: Adjacent frames bleed at scale — always 1px minimum
• Inconsistent naming across re-exports: Breaks animation scripts keyed on frame names
• Skipping pivot alignment: Characters hover or sink — set origin to feet center in engine
• One giant sheet for an entire game: Load times and memory spike — partition by scene or character

Pipeline Connections

FAQ

Can I create sprite sheets online for free?

Yes. Jaconir Sprite Sheet Generator runs pack and slice workflows in-browser at no cost.

PNG + JSON or engine-native only?

PNG + JSON is the most portable. Use engine bundles when the tool provides them and you want zero import scripting.

Pack first or draw on sheet directly?

Separate frames pack cleaner for animation iteration. Drawing on a fixed grid suits experienced pixel artists with established dimensions.

Conclusion

Choose pack when you have frames, slice when you have a monolith, export PNG + JSON, validate in engine. The workflow takes minutes once and saves hours across every character you ship.

Start packing: Sprite Sheet Generator →