Texture Atlas Generator Online
Drop many images and get one packed texture atlas plus a coordinate file. Packing, trimming and padding run in your browser, so your art never leaves your device and there is no signup.
How to make a texture atlas
- 1
Add your images
Drop PNG, JPG or WebP files, or a whole folder selection. Or press the sample button to see how it works.
- 2
Set padding and size
Padding keeps neighbours apart, extrude repeats edge pixels, and the max size caps the atlas (2048 px by default).
- 3
Check the preview
The atlas repacks on every change. The outlines show each frame and the chips show size and how full the sheet is.
- 4
Download PNG + data
Get a ZIP with the atlas PNG and a JSON Hash, JSON Array or CSS file that lists where every sprite sits.
Texture atlas options
What each setting does and when to change it.
| Packing method | MaxRects (best short side fit). Large images are placed first and the free space is split into rectangles, which packs mixed sizes tightly. Sprites are never rotated. |
|---|---|
| Padding | Empty pixels between sprites and around the edge. Use 2 px or more when the atlas is scaled or mipmapped, 0 for pixel-perfect UI sheets. |
| Extrude | Repeats each sprite's border pixels outward by 1-8 px. This stops thin dark or transparent lines appearing at the edges of tiles when the GPU filters the texture. |
| Trim | Cuts away fully transparent borders before packing. The data file keeps the original size and offset (spriteSourceSize, sourceSize), so engines draw the sprite in the right place. |
| Power of two | Rounds the atlas to 256, 512, 1024, 2048 ... Many engines and older mobile GPUs need this for mipmaps and compression. Off: the atlas is cropped to what is used. |
| Data formats | JSON Hash (frames keyed by file name, read by Phaser and PixiJS), JSON Array (frames as a list with filename), CSS (one class per sprite with width, height and background-position). |
| Limits | Up to 500 images and an 8192 x 8192 px atlas. Large atlases use a lot of memory on phones; 2048 or 4096 is safer there. |
What is a texture atlas?
A texture atlas (also called a sprite sheet or packed texture) is one big image that holds many small images, plus a data file that says where each one is. A game or website loads the single file once instead of hundreds of separate textures.
Fewer textures means fewer texture switches and draw calls, faster loading, and less wasted memory, because GPUs often round every texture up to a power of two anyway. That is why 2D games, UI kits, particle effects and web icon sets are usually shipped as atlases.
Using the atlas in a game engine
Phaser: load the PNG and the JSON Hash file with this.load.atlas(key, png, json), then use the original file names as frame names. PixiJS reads the same JSON through its spritesheet loader. Other engines and many custom loaders understand the same TexturePacker-style JSON layout.
Unity and Godot can also slice a sheet by hand or by script; the JSON gives you the exact rectangles. For web pages, pick CSS: add class="sprite sprite-name" to an element and the browser shows that part of the image.
If you need the opposite job, splitting an existing sheet back into separate images, or rendering a 3D model into frames for a 2D game, see the related tools below.
Tips for a clean atlas
Keep sprites that are drawn together in the same atlas. Use at least 2 px padding and 1-2 px extrude for anything that is scaled, rotated or mipmapped, otherwise neighbouring sprites can bleed into each other at the edges.
Trim saves a lot of space on character frames with empty margins, but if your code assumes every frame has the same size, read spriteSourceSize and sourceSize from the data file or turn trimming off. Name files clearly (run_01.png, run_02.png ...) because the names become the frame keys.
Need the textures themselves?
Make game-ready textures and 3D assets with AI, then pack the 2D parts into an atlas here.