About

APNG (Animated Portable Network Graphics) stores frame sequences within a single PNG container using acTL, fcTL, and fdAT chunks defined in the APNG specification. Game engines, CSS animation pipelines, and rendering frameworks typically require a flat sprite sheet rather than an animated container. Manual extraction via hex editors or frame-by-frame export in graphics software introduces alignment errors and inconsistent padding, which propagate as visual artifacts during playback at target frame rates. This tool parses the binary APNG chunk structure directly, reconstructs each frame respecting dispose_op and blend_op flags, and composites them into a configurable grid with uniform cell dimensions of W × H pixels per frame.

Limitations apply: APNG files with variable frame dimensions are normalized to the canvas size declared in the IHDR chunk. Files exceeding 50MB or 500 frames may degrade browser performance. The tool approximates disposal operations in-browser using Canvas 2D compositing. Pro tip: verify your output sprite sheet dimensions against your engine's maximum texture size (commonly 4096 × 4096 or 8192 × 8192 pixels).

Formulas

The sprite sheet grid layout is computed from the total number of extracted frames N, the user-specified column count C, and the inter-frame padding P.

Row count:

R = ceil(NC)

Total sheet width:

W_sheet = C × (W_frame + P) − P

Total sheet height:

H_sheet = R × (H_frame + P) − P

Frame position for index i (zero-based):

x_i = (i mod C) × (W_frame + P)
y_i = floor(iC) × (H_frame + P)

Where W_frame and H_frame are the canvas dimensions from the IHDR chunk, P is the pixel padding between cells, C is columns, and R is the computed row count. The delay for frame i is encoded as delay_numdelay_den seconds in each fcTL chunk, where delay_den = 0 is treated as 100.

Reference Data

APNG Chunk	Type Code	Purpose	Required
Image Header	IHDR	Canvas width, height, bit depth, color type	Yes
Animation Control	acTL	Total frame count, loop count	Yes (APNG)
Frame Control	fcTL	Frame dimensions, offsets, delay, dispose/blend ops	Yes (per frame)
Frame Data	fdAT	Compressed image data for non-default frames	Yes (frames 1+)
Image Data	IDAT	Default image / first frame compressed data	Yes
Image End	IEND	Marks end of PNG datastream	Yes

Dispose Operation	Value	Behavior
APNG_DISPOSE_OP_NONE	0	Leave frame buffer unchanged
APNG_DISPOSE_OP_BACKGROUND	1	Clear frame region to transparent black
APNG_DISPOSE_OP_PREVIOUS	2	Restore buffer to state before current frame

Blend Operation	Value	Behavior
APNG_BLEND_OP_SOURCE	0	Overwrite region with frame data
APNG_BLEND_OP_OVER	1	Alpha-composite frame over buffer

Engine / Platform	Max Texture Size	Sprite Sheet Format	Notes
Unity	8192 × 8192	PNG, TGA	Use Sprite Editor for slicing
Unreal Engine	8192 × 8192	PNG, BMP	Flipbook material node
Godot	16384 × 16384	PNG	AnimatedSprite2D node
Phaser.js	4096 × 4096	PNG + JSON	WebGL texture limit varies
CSS Animation	Unlimited (DOM)	PNG	background-position stepping
PixiJS	4096 × 4096	PNG + JSON	Spritesheet loader built-in
RPG Maker	4096 × 4096	PNG	Fixed grid conventions
GameMaker	8192 × 8192	PNG	Texture page settings
Cocos2d-x	4096 × 4096	PNG + plist	TexturePacker compatible
Love2D	16384 × 16384	PNG	Quad-based slicing

Frequently Asked Questions

Each frame's fcTL chunk specifies a dispose_op and blend_op. The converter maintains an offscreen compositing buffer. After rendering frame i, dispose_op determines whether the buffer stays unchanged (value 0), clears the frame region to transparent (value 1), or reverts to the buffer state before that frame (value 2). The blend_op controls whether the next frame overwrites (SOURCE, value 0) or alpha-composites over (OVER, value 1) the existing buffer. Each composited result is captured as a sprite sheet frame.

APNG frames can be smaller than the full canvas and positioned via x_offset and y_offset in the fcTL chunk. The converter draws each sub-frame onto the full-size compositing canvas at the specified offset before capturing. The resulting sprite sheet cells always match the IHDR canvas dimensions, ensuring uniform grid sizing regardless of internal frame cropping.

This typically occurs when the uploaded file is a standard PNG (not APNG) or a GIF renamed to .png. The converter validates the presence of an acTL chunk, which is mandatory for APNG. Standard PNGs lack this chunk and will be treated as single-frame images. Corrupted files that fail PNG signature verification (89 50 4E 47 0D 0A 1A 0A) are rejected with an error message.

The browser Canvas API imposes practical limits. Most browsers support canvas dimensions up to 16384 × 16384 pixels, though some mobile browsers cap at 4096 × 4096. The tool warns if computed sheet dimensions exceed 8192 pixels on either axis. Frame count is soft-limited to 500 for performance. Exceeding these limits may cause memory allocation failures or blank output.

Yes. Set the sprite sheet as a background-image, define background-size as the full sheet dimensions, then use animation with steps(N) timing and background-position keyframes. For a sheet with C columns and R rows, step through positions in increments of 100C% horizontally. The metadata panel in this tool shows exact pixel offsets for each frame.

Sprite sheets are static images and do not encode timing. However, this tool displays extracted delay values per frame from each fcTL chunk as delay_numdelay_den seconds. You can use these values to configure animation playback speed in your engine. The animation preview panel plays frames at their original timing for verification.