Games / Images
Sprite Sheet Maker, Cutter & Animator
Arrange images into a sprite sheet or texture atlas, split a sheet into separate frames, and animate them. Save PNGs, JSON hash metadata, CSS classes, ZIP files or an animated GIF without uploading your images.
Sprite Sheet Maker, Cutter & Animator: Make combines PNG, JPG, WebP images and decoded GIF frames into a grid, row, column or packed sheet. Uniform cells fit the largest image, with centre or bottom-centre alignment, padding, spacing and optional power-of-two dimensions. Cut slices by grid counts or pixel sizes, or detects islands separated by transparency or a background-colour key. You can exclude rectangles, skip empty cells and trim transparent edges before saving a ZIP or sending the frames to Animate. Animate plays a selected frame range at 1–60 FPS with loop or ping-pong order, pixel zoom and optional onion skin. It saves a GIF or horizontal PNG strip. Start with the pixel art maker if you need to draw your frames first. Runs 100% locally in your browser with zero server file uploads.
- Category
- Games & party
- Runs
- In your browser
- Cost
- Free · no sign-up
- Availability
- Ready to use
Runs entirely in your browser
Arrange frames into a sheet for your game.
Uniform cells use the largest frame, plus padding on every side. Spacing separates cells.
Add frames to begin. You can also slice a sheet in Cut and send its frames here.
Your images and exports stay in this browser. Use the saved files in your own game project.
Sprite sheets and texture atlases
A sprite sheet stores several animation frames or game images in one image. A regular grid describes each frame by its cell position. A texture atlas can use unequal rectangles and needs coordinates describing each image. Godot's AtlasTexture documentation (https://docs.godotengine.org/en/stable/classes/class_atlastexture.html) explains how a region of an atlas is used as a texture.
Bottom-centre alignment keeps a character's feet on the same baseline across frames. Packed shelves preserve each image's original dimensions and avoid rotation. Power-of-two sizing adds unused pixels at the right or bottom; it does not scale your artwork. PNG retains full alpha transparency, while GIF has fewer colours and only one-bit transparency.
JSON hash coordinates
The JSON hash export uses frame names as keys under frames. Each entry has a frame rectangle with x, y, w and h, a sourceSize, a spriteSourceSize, and rotated and trimmed flags. Coordinates count pixels from the sheet's top-left corner. The meta object records the image filename and total sheet size. Phaser's JSON hash atlas loader (https://docs.phaser.io/api-documentation/class/loader-loaderplugin#atlasJSONHash) describes this named-frame format.
Make exports original image bounds rather than padded cell bounds, with trimmed and rotated set to false. Cut can export a separate list of selected rectangles. Trim transparent edges only when you want tight crops; leave it off to preserve regular animation cells and their registration. Compare the saved rectangles with your engine's importer before using the atlas in a project.
How to use it
- Choose Make, Cut or Animate; each mode has a link you can bookmark.
- Add frames or a sheet, then adjust the layout, slicing grid or animation settings.
- Preview the result and download the files for your game project.
Privacy & limitations
Your files stay in your browser. Nothing is uploaded.
Related tools
Frequently asked questions
Should I use a grid or a packed texture atlas?
A grid gives every frame the same cell size and is easy to slice or import as a regular animation. A packed sheet places differently sized frames on shelves to save space. Packed frames are not rotated, and need the exported JSON rectangles or equivalent region settings in your game engine.
Why use padding, spacing or edge extrusion?
Filtered textures can sample neighbouring pixels and create colour seams, called texture bleeding. Padding leaves room inside each cell; spacing leaves a gap between cells. This tool adds transparent or background-colour pixels, not copied edge pixels. Extrusion repeats a sprite's edge colours into its border; use your engine's texture settings or an atlas packer with extrusion if your project needs it, especially with mipmaps.
How do I import the sheet into Godot, Unity or Phaser?
For Godot, use regions of the sheet as atlas textures or animation frames. In Unity, treat the image as multiple sprites and slice a regular grid or define the rectangles. Phaser can use a regular spritesheet or a JSON hash atlas. Keep the PNG and its JSON together. Import settings vary: choose nearest-neighbour filtering for crisp pixel art, check transparency and cell dimensions, and make sure the frame names and JSON format suit your project.
What are the GIF transparency and timing limits?
GIF supports at most 256 palette colours and one transparent palette entry, so pixels are either fully transparent or opaque. Alpha below 50% becomes transparent; other alpha becomes opaque. Choose a matte colour to blend smooth edges instead. Frame delays round to 10 ms with a 20 ms minimum, so 60 FPS cannot be represented exactly. The exported GIF repeats continuously; ping-pong adds the return frames without repeating endpoints.
Do my files leave the browser?
No. Reading images, arranging sheets, detecting islands and making exports all happen on your device. Large sheets and long animations need more memory. A warning appears above 400 frames or 8,192 pixels on a side. Working limits are 1,000 imported frames, 16,384 pixels per side and 64 million pixels per image or animation export.
Free tool · runs in your browser · no account required