Texture Atlas Packer

Online texture atlas (Sprite Atlas / Sprite Sheet) packer: pack sprites of any size tightly into one image using the MaxRects bin-packing algorithm, auto-trim transparent edges, add padding and edge extrude to prevent bleeding, with power-of-two (POT) and square size constraints and optional 90° rotation for higher efficiency. Export the atlas PNG plus metadata for multiple engines: TexturePacker JSON (Hash/Array), Cocos2d-x/Creator plist, Phaser 3, Godot, and CSS Sprite. Everything runs locally in your browser, no uploads.

1Upload Sprites
Click or drop multiple images hereSupports PNG / WebP and other images with alpha; multi-select allowed

Features

  • MaxRects bin-packing: pack any-size sprites into the smallest possible atlas with automatic size search
  • Transparent trim: pack only the content area while metadata keeps original size and offset for lossless restore
  • Padding & extrude: padding prevents neighbor bleeding, extrude duplicates edge pixels to kill linear-filtering seams
  • Size constraints: power-of-two (POT), force square, and a max side-size limit
  • Optional 90° rotation to further improve space utilization
  • Multi-engine export: TexturePacker JSON (Hash/Array), Cocos2d-x/Creator plist, Phaser 3, Godot, CSS Sprite
  • Live atlas preview with occupancy and sprite bounds overlay; PNG + metadata packed into a ZIP

FAQ

Are my images uploaded to a server?

No. Trimming, packing, atlas rendering and metadata generation all happen locally in your browser. Files are never uploaded, so it is safe and fast.

What is "trim" and does it lose information?

Trim removes the fully transparent border around each sprite before packing to save space. The exported metadata records the content offset (spriteSourceSize) and original size (sourceSize), so engines can restore the sprite to its original position losslessly.

What is the difference between padding and extrude?

Padding leaves gaps between adjacent sprites so scaling/sampling never picks up a neighbor. Extrude copies the sprite edge pixels outward by a few pixels, specifically to remove the dark seams that appear at sprite borders when bilinear filtering is enabled. You can use both together.

Which engines can use the exported metadata?

TexturePacker JSON (Hash) works directly with Pixi.js and Phaser 3. JSON (Array), Phaser multiatlas, Cocos2d-x/Creator .plist, Godot region list, and generic CSS Sprite are also available, covering mainstream game engines and web front-ends.

Why does it say the atlas is too large?

Packing fails when the total sprite area or a single sprite exceeds your max-size limit (or the browser 16384px canvas limit). Increase the max size, disable force-square/POT, or pack in batches.