Cocos Sprite Atlas - Offline Local Tool, Use Directly in the Browser

Mark frames on a sprite sheet by grid or transparency, then download a same-name PNG and Cocos2d-x plist.

Click to upload or drag and drop

PNG, JPG, WEBP, or GIF

Paste with Ctrl/⌘+V.

Ready. Open a sprite sheet, drop one, or paste.

Step 1

Define frames

Tune the grid until the overlay lines up where you want it. Leftover pixels stay in the last row and column.

Columns Rows

Splits the full sheet evenly from your row and column count.

Step 2

Review and export

Trim frames here. Export writes one PNG and one format-3 plist that share a name.

0 frames

Atlas name Frame prefix

Try a sample sheet

Click the preview to load this five-frame hop strip. Auto detection marks each sprite, then export a PNG plus plist.

Open a sprite sheet, then choose simple grid when the rows and columns are easy to count, manual grid when cell size, offset, and gap are already known, or auto when transparent pixels separate each sprite.

Tune the overlay until the cells line up. Skip empty cells to drop fully transparent tiles. Frame names follow left-to-right, top-to-bottom order, which is the same order Cocos Creator uses when those SpriteFrames are dropped into an Animation Clip.

Export a ZIP that contains one PNG and one format-3 plist with the same basename. Drag both files into Assets. Creator builds an Atlas with SpriteFrame children. Sample rate and crossFade stay in the editor; this tool does not write an .anim clip.

Creator Auto Atlas packs SpriteFrames that are already split, and it runs at build time. It does not cut an AI composite sheet. This export is the Cocos2d-x plist plus PNG pair that TexturePacker-style import already accepts.