ToolBuddyToolBuddy
Sprite atlas walkthrough

Texture Packer Online: Sprite Atlases for Unity, Phaser, Cocos

Pack loose sprites into an atlas in your browser, pick the right data format for your engine, and get trim, padding and multipack right before handoff.

11 min read • May 20, 2026 • Ankit Kumar

Introduction

If you're looking for an online texture packer, you probably already have a folder of sprites and a deadline. What you need is an atlas your engine will load without a round of fixes.

Making the image is the easy part. The decisions that cause trouble later are the data format, the maximum sheet size, how transparent edges get trimmed, and how frame names are written. Get one wrong and you find out after import.

This walkthrough covers those settings, how to check the atlas before you export it, and what to do next if the sprites are too heavy or the atlas is going into an animation pipeline.

What you actually need from an atlas tool

A single "pack" button isn't enough once the atlas goes into a real game. Sheet size, padding, trimming and the data format all affect whether frames render correctly and how much texture memory you use, so you want to set them yourself.

You also want to see the result before exporting. A preview of the packed sheet catches problems (a huge sprite eating half the page, a missing frame, bleeding edges) while they're still a settings change and not a bug report.

  • Data files for Unity (three flavors), Godot, Unreal, MonoGame, Pixi, GameMaker, O3DE, Construct 3, Phaser, Cocos, CSS and generic JSON.
  • Sheets from 256 up to 4096 px on each side, with optional power-of-two or square sizing, and multipack when everything won't fit on one page.
  • A live preview of the packed sheet, so you can see trimming, rotation and spacing before you export.

Packing sprites step by step

Add your sprites one by one or pick a whole folder. Choose the data format your engine expects, set the maximum sheet size, and adjust trim and padding. If your art is pixel art, set scaling to pixelated so resized frames stay crisp.

Build the preview and look at the awkward cases: tiny UI icons, sprites with lots of empty space around them, anything that got rotated. When it looks right, export. You get a ZIP with the numbered atlas PNGs and the data file for the format you chose.

  • Add sprites or a folder from your computer.
  • Pick the data format, sheet size, trim, padding and scale.
  • Check the preview for wasted space and odd placements.
  • Download the ZIP and import the PNGs and data file into your engine.

Why pack in the browser

The sprites are read and packed on your machine, so nothing is uploaded. That matters when you're working with unreleased characters or art under NDA, and it means you're not waiting on an upload every time you change a setting.

It also makes trying things cheap. Change padding, repack, look; change the sheet size, repack, look. Each round takes seconds, which is what you want when you're tuning an atlas rather than making it once.

One atlas or several?

For a small or medium sprite set, one sheet is simpler to load and manage. For a big library, one sheet either won't fit under your size limit or ends up wastefully large. That's what multipack is for: it spreads the sprites across as many pages as it needs and writes the data to match. If multipack is off and the sprites don't fit, the packer tells you instead of quietly dropping frames.

Which to choose depends on the platform and on how your game loads scenes. Mobile targets often want smaller pages. A desktop game can usually take a single 4096 sheet. Look at the preview at each size before deciding.

  • Keep a compact UI set on one sheet; it's the least to think about.
  • Turn on multipack when a big sprite set won't fit, or when you want pages you can load separately.
  • Either way, load the result in your engine or a preview tool before calling it done.

What to do after exporting

If the atlas is still heavy, turn on image optimization in the packer or shrink the source images first, then repack. If the atlas belongs to a Spine character, open it in the Spine Viewer and check that every region still maps to the right attachment.

That's the whole loop: pack, trim the weight where it matters, and confirm it plays before anyone imports it into the game.

AK

Written by

Ankit Kumar

Senior Software Engineer & Founder at ToolBuddy

Engineering browser-first utilities with zero upload requirements using WebAssembly, Web Audio, and Canvas technologies.

FAQ

Common follow-up questions readers ask after going through this workflow.

Does an online texture packer have to upload my sprites?

Not this one. The sprites are read, packed and exported inside your browser tab. Nothing is sent to a server at any point.

Which data formats can I export?

Unity (native, .tpsheet or JSON), Godot, Unreal, MonoGame, Pixi, GameMaker, O3DE, Construct 3, Phaser, Cocos (JS and Creator), CSS sprites and generic JSON. You can also export just the images with no data file.

When should I use multipack?

When your sprites won't fit on one sheet at the maximum size you're willing to ship, or when you'd rather load groups of sprites separately. For small sets, one sheet is simpler.