Pack multiple PNG sprites into compact power-of-two texture atlases using MaxRects bin-packing with Phaser, PixiJS, and CSS coordinate export.
Use predictable sprite names so the exported atlas coordinates can be matched with the source images.
Exact positions depend on asset sizes and packing order. Confirm each frame name and rectangle in the output rather than assuming a fixed grid arrangement.
Keep the atlas URL consistent with the exported CSS and test the icons at their intended display size. Padding creates separation but does not guarantee freedom from every filtering artifact.
Packing does not generate intermediate animation frames or repair low-resolution images. Check the atlas and metadata together in the target renderer.
The Free Sprite Sheet Texture Packer is an in-browser 2D texture atlas generator and MaxRects bin-packing workspace built for game developers, UI designers, and web animators. Modern web games and GPU-accelerated applications built on PixiJS, Phaser, Three.js, and Unity suffer performance penalties when loading dozens of individual image textures due to repetitive draw call overhead and texture binding state changes. Packing individual sprite frames into a single unified atlas drastically cuts draw calls and optimizes GPU memory bandwidth.
Our packing engine implements the industry-standard MaxRects 2D bin-packing algorithm with Best Short Side Fit (BSSF) and Best Area Fit (BAF) heuristics to pack arbitrary images into compact power-of-two (POT) textures (512×512, 1024×1024, 2048×2048, or 4096×4096). Configure pixel padding to eliminate texture filtering edge bleeding, enable sprite rotation to maximize space utilization, and extrude borders for seamless bilinear texture sampling.
Export your packed sprite sheet as a crisp, lossless PNG image alongside coordinate atlas data in your preferred format: PixiJS/Phaser JSON (Hash or Array), standard CSS Sprite sheets with class names, or Cocos2d XML. Download individual files or an integrated ZIP bundle in one click.
Drag and drop multiple PNG sprites, character animation frames, or icon assets into the batch import zone.
Set target canvas dimensions, enforce power-of-two texture sizing, specify sprite padding, and toggle smart rotation.
Inspect the live rendered sprite atlas on the interactive canvas, zooming and hovering over frames to verify coordinate bounds.
Download the combined sprite sheet PNG and export coordinates in JSON (Phaser/PixiJS), CSS Spritesheet, or XML format.
Employs proven 2D bin packing heuristics to achieve high packing efficiency, minimizing wasted transparent canvas space.
Supports standard GPU mipmap dimensions including 512, 1024, 2048, and 4096 resolutions for seamless mobile GPU rendering.
Exports metadata compatible with Phaser 3, PixiJS, Cocos2d, Godot, and standard web CSS background-position sprite sheets.
Renders all images on HTML5 canvas in local browser RAM, allowing unlimited high-resolution sprite packing without server caps.
Consolidating individual sprite textures into a unified atlas minimizes GPU draw calls and texture swaps. Add 1-2 pixels of padding to prevent bilinear texture filtering artifacts.
Pack named PNG frames and connect exported rectangles to the animation sequence in your renderer.
Export one PNG with CSS coordinates, then test each icon against the downloaded atlas.
| Export Coordinate Format | Target Engine / Framework | Coordinate Structure & Access Syntax |
|---|---|---|
| JSON Hash | Phaser 3 & PixiJS | frames[filename] = { frame: {x,y,w,h}, rotated, trimmed, sourceSize } |
| JSON Array | Custom Canvas & PixiJS | frames = [ { filename, frame: {x,y,w,h} } ]; indexed sequentially |
| CSS Spritesheet | Web Frontends & HTML UI | .sprite-name { background-position: -Xpx -Ypx; width: Wpx; height: Hpx; } |
| Cocos2d / plist XML | Cocos2d-x & Apple SpriteKit | XML dictionary mapping texture Rect coordinates and sprite offsets |
| Power-of-Two (POT) | Hardware GPU / WebGL Mipmaps | Textures sized to 512, 1024, 2048, or 4096 px to optimize VRAM cache |
Older GPUs and mobile graphics chipsets require texture dimensions that are powers of two (such as 512×512 or 2048×2048) to generate hardware mipmaps and perform efficient memory addressing without performance degradation.
Texture bleeding occurs when bilinear texture filtering samples neighboring pixels from adjacent sprites on the sheet, causing blurry colored edges. Adding 1 to 2 pixels of transparent padding between sprites prevents this artifact.
Choose JSON Hash or JSON Array format. Both Phaser 3 and PixiJS natively parse this structure to reference individual sprite frames by their original file name.
Since packing runs entirely in your local browser memory, you can pack hundreds of sprites up to the maximum canvas texture size supported by your browser GPU (typically up to 4096×4096 or 8192×8192 pixels).
An internet connection is required to open tools and refresh a temporary session. Processing stays on your device; the handshake sends a random challenge, not files or text inputs. Libraries, fonts or models may download. Local processing cannot remove risks from an untrusted device or extension.
