PNG Sequences

Overview

PNG sequences export each frame of your animation as a separate numbered PNG file. This format is widely used in game development, video editing, and situations where you need frame-by-frame control over animation playback.

PNG sequences preserve full color depth and transparency, making them ideal for high-quality animations without GIF’s 256-color limitation.

When to Use PNG Sequences

Game Engines

Most game engines prefer individual frame files for sprite animation systems.

Video Editing

Import frames into video editing software for compositing and effects.

Frame-by-Frame Control

Manually edit specific frames or rearrange animation order.

Version Control

Git-friendly format - track changes to individual frames separately.

Exporting PNG Sequences

Prepare Your Animation

Open your sprite in Aseprite with all frames ready.

Ensure visible layers and frame timing are configured as desired.

Choose Export Method

File → Export or File → Export as PNG SequenceYou can also use File → Save Copy As and use a numbered filename.

Configure Filename Pattern

Set up the filename pattern with frame number placeholders:

sprite-{frame}.png
sprite-{frame000}.png
sprite-{frame0000}.png

Use zero-padded numbers (e.g., {frame000}) for proper alphabetical sorting.

Select Export Range

Choose which frames to export:

All frames
Selected frames
Specific tag
Frame range

Export

Click Export and Aseprite will generate all frame files.

Filename Patterns

Basic Numbering
Zero-Padded
Custom Patterns
1-Based Indexing

Simple sequential numbering:

Pattern: sprite-{frame}.png

Output:
sprite-0.png
sprite-1.png
sprite-2.png
sprite-3.png

Without zero-padding, alphabetical sorting may be incorrect:

sprite-1.png
sprite-10.png ← Sorts before sprite-2.png!
sprite-2.png

Recommended: Use zero-padded frame numbers:

Pattern: sprite-{frame000}.png

Output:
sprite-000.png
sprite-001.png
sprite-002.png
...
sprite-099.png
sprite-100.png

Use enough zeros for your total frame count:

for 0-99 frames (2 digits)
for 0-999 frames (3 digits)
for 0-9999 frames (4 digits)

Advanced filename customization:

Pattern: {title}_{tag}_{frame000}.png

Output:
character_walk_000.png
character_walk_001.png
character_walk_002.png

Available placeholders:

{title} - Sprite filename (without extension)
{frame} - Frame number
{frame0}, {frame00}, {frame000}, etc. - Zero-padded frame number
{tag} - Current tag name
{tagframe} - Frame number within tag
{layer} - Layer name (when exporting layers)

Combine placeholders to create organized folder structures and naming schemes.

Start counting from 1 instead of 0:

Pattern: sprite-{frame1}.png

Output:
sprite-1.png
sprite-2.png
sprite-3.png

Some tools and engines prefer 1-based indexing. Use {frame1} or {frame001} for zero-padded 1-based numbers.

Export Options

Resize/Scale

Scale frames during export:Options:

1x (Original size)
2x, 3x, 4x, 8x (Integer scaling)
Custom percentage
Apply pixel ratio

Original: 32x32 pixels
Scale: 4x
Output: 128x128 pixels per frame

Pixel art scales best at integer multiples (2x, 3x, 4x) to maintain crisp edges.

Area Selection

Export only a specific region:Options:

Full sprite (default)
Selection
All layers bounds
Canvas

Useful for exporting character sprites without large empty canvas areas.

Layer Selection

Control which layers are exported:Options:

All layers (merged)
Visible layers only
Specific layer or group
Each layer as separate sequence

Example - Export each layer separately:

Pattern: {title}_{layer}_{frame000}.png

Output:
character_body_000.png
character_body_001.png
character_armor_000.png
character_armor_001.png

Frame Selection

Choose which frames to export:All Frames:

Exports: Frame 0 through Frame N

By Tag:

Tag: "walk"
Exports: Only frames within "walk" tag

Selected Frames:

Timeline selection: Frames 5, 8, 10-15
Exports: Only selected frames

Use tags to export different animations separately (idle, walk, run, attack).

Trim/Crop

Remove empty space:Trim Sprite:

Crops entire canvas to content bounds
Same size for all frames

Trim Cels:

Crops each frame individually
Variable frame sizes

Trimming individual cels results in different frame sizes, which may complicate rendering in some engines.

Color Profile

Embedded color space information:Options:

Embed ICC profile
Convert to sRGB
No color management

PNG supports embedded color profiles for accurate color reproduction.

File Organization

Single Folder
Animation Subfolders
Character/Object Folders

All frames in one directory:

project/
└── export/
    ├── sprite-000.png
    ├── sprite-001.png
    ├── sprite-002.png
    └── sprite-003.png

Pros:

Simple structure
Easy to browse

Cons:

Can get cluttered with many animations

Organize by animation:

project/
└── export/
    ├── idle/
    │   ├── frame-000.png
    │   └── frame-001.png
    ├── walk/
    │   ├── frame-000.png
    │   └── frame-001.png
    └── attack/
        ├── frame-000.png
        └── frame-001.png

Pros:

Clear organization
Easy to locate animations

Export each tag separately to automatically create this structure.

Group by sprite/character:

project/
└── export/
    ├── player/
    │   ├── idle-000.png
    │   ├── idle-001.png
    │   ├── walk-000.png
    │   └── walk-001.png
    └── enemy/
        ├── patrol-000.png
        └── attack-000.png

Pros:

Asset-based organization
Scales to large projects

Import into Game Engines

Unity
Godot
Phaser
Unreal Engine

Import PNG Sequence:

Drag all frames into Unity Assets folder
Select all frames in Project window
Set Texture Type to Sprite (2D and UI)
Set Pixels Per Unit for correct scaling
Create Animation:
- Create new Animation clip
- Drag all sprites into Animation timeline
- Adjust frame rate

// Or load programmatically
Sprite[] frames = Resources.LoadAll<Sprite>("Animations/walk");
SpriteRenderer renderer = GetComponent<SpriteRenderer>();

// Animate frames
int currentFrame = 0;
float frameTime = 0.1f; // 10 FPS

Use Unity’s Animation window for easier frame-by-frame animation setup.

Import PNG Sequence:

Copy frames to project folder
Create AnimatedSprite node
Create new SpriteFrames resource
Add frames to animation:
- Click Add frames from a sprite sheet
- Or add individual frames

# GDScript
extends AnimatedSprite

func _ready():
    play("walk")
    set_speed_scale(1.0)

# Or load programmatically
var frames = []
for i in range(0, 10):
    var texture = load("res://sprites/walk-%03d.png" % i)
    frames.append(texture)

Load PNG Sequence:

// In preload()
this.load.image('frame-000', 'assets/walk/frame-000.png');
this.load.image('frame-001', 'assets/walk/frame-001.png');
// ... or use atlas

// Or load multiple
for (let i = 0; i < 10; i++) {
  let num = i.toString().padStart(3, '0');
  this.load.image(`walk-${num}`, `assets/walk/frame-${num}.png`);
}

// In create()
this.anims.create({
  key: 'walk',
  frames: [
    { key: 'frame-000' },
    { key: 'frame-001' },
    // ...
  ],
  frameRate: 10,
  repeat: -1
});

Consider using sprite sheets for better performance in Phaser.

Command Line Batch Export

Automate PNG sequence export with CLI:

# Export all frames
aseprite -b sprite.aseprite \
  --save-as "frames/sprite-{frame000}.png"

# Export specific tag
aseprite -b sprite.aseprite \
  --tag "walk" \
  --save-as "walk/frame-{frame000}.png"

# Export with scaling
aseprite -b sprite.aseprite \
  --scale 4 \
  --save-as "frames/sprite-{frame000}.png"

# Export multiple sprites
for file in *.aseprite; do
  aseprite -b "$file" \
    --save-as "export/${file%.*}-{frame000}.png"
done

CLI export is perfect for build automation, CI/CD pipelines, and batch processing.

Advantages vs. Disadvantages

Advantages
Disadvantages

Full Quality

No color limitations (millions of colors + full alpha)

Frame Control

Edit individual frames easily

Version Control

Git-friendly format

Universal Support

Works with all engines and tools

Flexible Timing

Control frame timing in code

Easy Debugging

View/test individual frames

Best Practices

Use Zero-Padded Numbering

Always use zero-padded frame numbers for correct sorting:

✓ sprite-000.png, sprite-001.png, ..., sprite-099.png
✗ sprite-0.png, sprite-1.png, ..., sprite-99.png

Include Frame Count in Padding

Choose padding length based on total frames:

10-99 frames:   {frame00}
100-999 frames: {frame000}
1000+ frames:   {frame0000}

Organize by Animation

Use subfolders or filename prefixes for different animations:

animations/
├── idle/
├── walk/
└── attack/

Document Frame Rate

Include frame rate information:

README.txt:
- idle: 6 FPS (6 frames)
- walk: 8 FPS (8 frames)
- attack: 12 FPS (15 frames)

Use Consistent Naming

Establish and follow naming conventions:

{character}_{animation}_{frame000}.png
player_idle_000.png
enemy_patrol_000.png

Converting Back to Animation

Import PNG sequences back into Aseprite:

File → Import → Import Sequence

Or drag and drop multiple sequential PNGs onto Aseprite.

Select Frame Files

Choose all frames in sequence.

Aseprite auto-detects sequential numbering.

Configure Import

Set frame duration
Choose color mode
Enable/disable trimming

Import

Frames are imported as animation timeline.

Troubleshooting

Wrong frame order

Cause: Improper numbering (1, 10, 2, 3…)Solution:

Use zero-padded numbering
Rename files with proper padding
Use batch renaming tools

Missing frames

Cause: Gaps in numbering sequenceSolution:

Check export settings
Verify frame range
Re-export missing frames

Inconsistent sizes

Cause: “Trim cels” enabled with varying contentSolution:

Disable trim option
Use “Trim sprite” instead
Ensure consistent canvas size

Large file sizes

Cause: High resolution or unnecessary alpha channelsSolution:

Reduce export scale
Use indexed color if possible
Compress PNGs with tools like pngquant
Consider sprite sheets

Comparison with Sprite Sheets

When to Use Sequences
When to Use Sprite Sheets

Choose PNG sequences when:

Testing and iterating on animations
Need frame-by-frame editing
Working with video editing software
Using version control (Git)
Simplicity is priority
Learning/prototyping

Many developers start with PNG sequences during development and convert to sprite sheets for production builds.

Sprite Sheets

Combine frames into single texture atlas

GIF Export

Export as animated GIF

File Formats

Learn about all supported formats

Get Started

Core Concepts

Drawing Tools

Advanced Features

Workspace

Import & Export

Overview

When to Use PNG Sequences

Game Engines

Video Editing

Frame-by-Frame Control

Version Control

Exporting PNG Sequences

Filename Patterns

Export Options

File Organization

Import into Game Engines

Command Line Batch Export

Advantages vs. Disadvantages

Full Quality

Frame Control

Version Control

Universal Support

Flexible Timing

Easy Debugging

File Count

Storage Space

Loading Time

Organization

Best Practices

Converting Back to Animation

Troubleshooting

Comparison with Sprite Sheets

Sprite Sheets

GIF Export

File Formats

Get Started

Core Concepts

Drawing Tools

Advanced Features

Workspace

Import & Export

​Overview

​When to Use PNG Sequences

Game Engines

Video Editing

Frame-by-Frame Control

Version Control

​Exporting PNG Sequences

​Filename Patterns

​Export Options

​File Organization

​Import into Game Engines

​Command Line Batch Export

​Advantages vs. Disadvantages

Full Quality

Frame Control

Version Control

Universal Support

Flexible Timing

Easy Debugging

File Count

Storage Space

Loading Time

Organization

​Best Practices

​Converting Back to Animation

​Troubleshooting

​Comparison with Sprite Sheets

​Related Topics

Sprite Sheets

GIF Export

File Formats

Overview

When to Use PNG Sequences

Exporting PNG Sequences

Filename Patterns

Export Options

File Organization

Import into Game Engines

Command Line Batch Export

Advantages vs. Disadvantages

Best Practices

Converting Back to Animation

Troubleshooting

Comparison with Sprite Sheets

Related Topics