Free PNG and JSON atlas maker
Create a texture atlas online from PNG, JPG, WebP, or GIF frames. Pack a PNG atlas in your browser and export generic JSON or Phaser JSON metadata without uploading source images.
Upload PNG, JPG, or WebP frames and pack them into a sprite sheet.
Select PNG, JPG, or WebP images. Mixed frame sizes are supported.
Frames: 0
Upload frames to generate a sprite sheet preview.
A texture atlas is one large image that packs many smaller sprites into a single file. Instead of loading dozens of individual textures, a game engine loads the atlas once and uses metadata to find each frame by name and pixel position. This reduces texture swaps and GPU draw calls, which is especially important in 2D games with many characters, tiles, and UI elements on screen at once.
Individual sprite files force the GPU to switch textures for every object—a hidden cost that adds up quickly in scenes with many draw calls. A single atlas texture lets the renderer batch those calls. One PNG atlas and one JSON metadata file also simplify asset management: every frame has a predictable name and coordinate, and you ship two files instead of dozens.
Drop in character, environment, UI, or effect frames, choose a grid or strip layout, and adjust columns, spacing, padding, scale, and background before export. The preview updates as you change settings, so you can confirm the layout before downloading anything.
The atlas exporter reads the exact frame x, y, width, and height from the packed PNG, so the JSON metadata describes the same atlas you download. Exported JSON maps every frame name to its pixel rectangle on the atlas—generic JSON uses plain frame-name keys for custom engines, while Phaser JSON follows the Phaser texture atlas format for HTML5 game loaders.
Add your frames as PNG, JPG, WebP, or GIF files and arrange them in a grid or strip. Adjust columns, spacing, padding, scale, and background transparency while the preview updates live. When the layout looks right, export the PNG atlas and choose generic JSON or Phaser JSON metadata. Download both files and add them to your game project. Every step runs in the browser—no source images are uploaded to a server.
Choose generic JSON for custom engines that parse frame-name keys with x, y, width, and height values. Choose Phaser JSON when your HTML5 game uses the standard Phaser texture atlas loader. Both formats describe the same PNG layout, so you can export one atlas and pick the JSON that matches your pipeline. If your engine slices by a fixed grid instead of reading atlas metadata, skip JSON and use the PNG directly.
Yes. Export a generic JSON atlas with plain frame-name keys, or a Phaser-compatible JSON atlas for HTML5 game engines. Both include frame names, pixel positions, and dimensions.
The tool focuses on a fast browser workflow, not advanced desktop packer features like multipack or rotation. It covers the most common use case: packing named frames into a PNG atlas with JSON metadata.
No. Image loading, packing, preview, and export run locally in your browser, so source files are not sent to a server.
The terms overlap, but a texture atlas typically includes named metadata that describes where each frame sits on the sheet, while a sprite sheet is often sliced by a fixed grid. This tool handles both: pack frames into a grid and optionally export a JSON atlas that maps every frame name to its pixel rectangle.
The generic JSON atlas works with any engine that can read frame coordinates from a JSON file. The Phaser JSON atlas loads with the Phaser loader. For engines that prefer grid-based slicing, skip JSON and use the PNG sheet with your engine's sprite editor.
Convert a GIF to a sprite sheet in your browser. Extract frames, keep frame order and timing, preview animation, and export game-ready assets.
Split an existing sprite sheet into frames with rows, columns, or fixed frame size controls in one browser workspace.
Make a Unity-ready sprite sheet online. Pack frames in the browser, export PNG, and follow practical Unity import guidance.
Make a Godot sprite sheet online. Pack frames in the browser, export PNG, and prepare assets for AnimatedSprite2D workflows.