Texture Atlas Packer Online — Free Sprite Sheet Packer

Drop a folder of PNGs and get back one tightly packed texture atlas plus the coordinate file your engine actually reads. This texture atlas generator runs entirely in your browser — no sign-up, no watermark, no sprite limit, and your images never leave your device. The packing is a hand-written MaxRects solver with 90° rotation, padding, edge extrude, alpha trim and power-of-two sizes, and it exports for Unity, Godot 4, Phaser 3, PixiJS and plain CSS.

How to use

Drop your sprites — any number, any mix of sizes. PNG transparency is what the trimmer and extruder work on.

Pick a max atlas size and your packing options: padding, extrude, rotation, trim. Tick the output formats you need.

Hit Pack atlas, check the coverage percentage and the outlines in the preview, then download the ZIP with the PNG and the coordinate files.

What makes a packer good (and what most free ones skip)

Putting rectangles into a bigger rectangle is the entire job, and doing it badly costs you texture memory on every device you ship to. Here is what this tool does, and why each piece matters:

MaxRects, Best Short Side Fit. After each sprite is placed, the packer keeps the complete set of maximal free rectangles rather than just guillotine cuts, and puts the next sprite where the leftover short side is smallest. It then tries five different input orderings (by area, longest side, height, width, perimeter) and keeps the tightest result. In practice this lands within a few percent of the best known offline packers.
Rotation. Turning a sprite 90° clockwise often turns a wasted strip into a usable one. The rotated flag is written correctly and the atlas region really is height × width — the two things half-finished packers get wrong.
Padding. Empty pixels between sprites so bilinear filtering can never sample the neighbour. Border padding at the atlas edge is applied too.
Extrude. The outermost row and column are copied outward. This is the actual fix for the hairline seams between tiles in a tilemap — padding alone does not fix it, because the GPU samples inside the padding and finds transparent pixels.
Trim with correct pivots. Transparent borders are cut away, and the offset is written back as spriteSourceSize next to the original sourceSize, so your sprite still sits in the same place. Trimming a 512×512 image whose art only covers the middle 200×180 saves 85% of its atlas space.
Power-of-two. Optional, because old mobile GPUs and compressed formats such as PVRTC and ETC1 require it — and because a lot of pipelines still quietly resample non-POT textures.

Output formats

Format	File	Reads it	Rotation
JSON Hash	`atlas.json`	PixiJS, Phaser 3, anything TexturePacker-compatible	Yes
JSON Array	`atlas-array.json`	Phaser 3 (`atlasJSONArray`)	Yes
Unity	`atlas.tpsheet`	Unity, via the free TexturePacker Importer	No
Godot 4	`godot/*.tres`	Godot 4 — one AtlasTexture per sprite	No
CSS sprite	`atlas.css`	Any browser — one class per sprite	No

Unity sprite rects, Godot's AtlasTexture and the CSS background-position technique are all axis-aligned: none of them can draw a rotated region. So when you tick one of those three, rotation is switched off for the whole atlas — silently rotating sprites they cannot display would be worse than telling you.

Reading the JSON

Every frame carries the six fields that matter. This is one entry, trimmed and rotated:

"hero_idle.png": { "frame": { "x": 258, "y": 4, "w": 96, "h": 132 }, "rotated": true, "trimmed": true, "spriteSourceSize": { "x": 16, "y": 22, "w": 96, "h": 132 }, "sourceSize": { "w": 128, "h": 160 }, "pivot": { "x": 0.5, "y": 0.5 } }

frame.x/y is where the sprite starts in the atlas. frame.w/h are always the unrotated dimensions — when rotated is true the region on the atlas is 132 wide and 96 tall, and the sprite is turned 90° clockwise. That is the convention Phaser 3 and PixiJS both implement, so the flag works out of the box. spriteSourceSize.x/y is where the trimmed art sat inside the original sourceSize image — add it back when you position the sprite and trimming becomes invisible.

How it compares

TexturePacker Online (codeandweb.com) is a showcase for CodeAndWeb's paid desktop app and is deliberately limited — the good options live in the licensed version. free-tex-packer.com is genuinely free but its source has not seen real maintenance for years. This tool is free, needs no account, does the packing on your own machine, and ships rotation, extrude, trim-with-pivot and power-of-two without asking for anything. It packs a single atlas: if your sprites do not fit, you get a named list of what did not fit rather than a multi-page atlas.

FAQ

Is this texture atlas packer really free?

Yes. There is no sign-up, no watermark, no sprite limit and no paid tier. TexturePacker Online is a demo for a paid desktop app and is deliberately limited, and free-tex-packer's source has not been updated in years. This tool is the full feature set, free, in your browser.

Are my sprites uploaded to a server?

No. Packing, rendering and ZIP building all happen inside your browser with the Canvas API. Your images never leave your device, which is also why it works offline once the page is loaded.

What do padding and extrude actually do?

Padding is empty space between sprites so that bilinear filtering cannot sample a neighbouring sprite. Extrude copies the outermost row and column of pixels outward, so when the GPU samples slightly outside the sprite it still reads the sprite's own colour. Extrude is the fix for the thin transparent seams you see between tiles in a tilemap; 1 to 2 pixels is usually enough.

Which engines can read the output files?

JSON Hash is read by PixiJS, Phaser 3 and anything that understands the TexturePacker JSON schema. JSON Array is the Phaser 3 array variant. The .tpsheet file is for Unity via the free TexturePacker Importer. Godot 4 gets one AtlasTexture .tres resource per sprite. CSS output gives you a class per sprite with background-position.

Why is sprite rotation disabled when I pick Unity, Godot or CSS?

Because those three cannot display a rotated atlas region. Unity sprite rects, Godot's AtlasTexture and the CSS background-position technique are all axis-aligned, so a rotated frame would render sideways. Rotation stays available for Phaser 3 and PixiJS, which both honour the rotated flag in the JSON.

What happens if my sprites do not fit in one atlas?

You get a clear error naming every sprite that could not be placed, and nothing is downloaded. The tool never silently drops or crops a sprite. Raise the max atlas size, turn on rotation and trim, or split your sprites into two runs.