Sprite Sheet Generator — PNG, JSON & Godot

Use this sprite sheet generator to arrange animated pixel effects into transparent PNG grids with JSON frame coordinates and Godot resources. Start free in your browser.

Firework burst240 × 248 px / One-shot / MIT
14 / 109
30 fps / 109 framesNearest-neighbor scaling
1920 × 3472 px / 109 frames10 exports left today
Free · visible watermarkPNG stays transparent. GIF uses the preview background.MIT license included in every ZIPDaily limit is saved on this browser and resets at local midnight.

Build an animation sheet with a predictable grid

A sprite sheet combines the frames of an animation into one image. This sprite sheet generator starts with a playable pixel effect from the library and renders its frames into equal cells. You choose the effect, frame rate, scale and number of columns, then download a ZIP containing the PNG atlas, frame coordinates and a Godot resource. The grid is deliberately regular: every frame keeps the same canvas size, so a moving spark does not shift position merely because its visible pixels occupy a smaller area.

Begin with the native size and frame rate shown beside the selected effect. Switch between the sheet, animation and JSON views to inspect the same settings in different forms. The sheet shows packing, the animation shows timing, and the JSON shows the rectangles an importer can read. These views help catch a mismatch before the files enter your game project. No image upload or account is needed for a free single-effect export.

Choose columns without changing the animation

Columns control how the frames are arranged, not how quickly they play. A narrow sheet has more rows; a wider sheet has fewer. The number of rows is the frame count divided by the chosen column count, rounded up. If the final row is incomplete, its unused cells stay transparent. They are layout space rather than additional animation frames. Use the actual frame count from the JSON when slicing or building an animation.

For example, an animation with 90 frames arranged in eight columns needs 12 rows. If each frame is 128 pixels square, the resulting image is 1024 by 1536 pixels at 1× scale. The last six cells are unused. The editor displays the resulting dimensions before export, and the included Godot resource references only the 90 real frames. Change the column count when one image edge becomes inconvenient for your engine or texture budget.

Keep frame alignment and pixel edges intact

Every cell preserves the original canvas bounds. Frames are not trimmed, rotated or tightly packed, which makes grid slicing straightforward and keeps a stable local coordinate system. A flame that leans sideways remains anchored within its cell. The metadata also records the source origin after scaling and mirroring. An engine may still need an explicit pivot or node offset, because an exported origin does not automatically override the engine’s default placement.

Scaling uses nearest-neighbor sampling at 1×, 2×, 4× or 8×. It enlarges each original pixel into a square block rather than softening its edges. Larger exports cost memory in both the browser and the game, so start at 1× and increase only when your asset pipeline requires larger source textures. An engine can often display a native-size sprite at an integer scale without needing a larger PNG.

Read the JSON frame coordinates

The JSON uses an Aseprite-style frame object keyed by numbered filenames. Each entry contains a rectangle with x, y, w and h, plus source size, untrimmed placement and frame duration in milliseconds. Coordinates describe the exported PNG in pixels. Read frames in their numbered order, beginning at the top-left cell and moving across each row. Do not infer extra frames from the image’s full rectangular area.

The meta object identifies the image filename, atlas size, palette and watermark state. Its pixelfx extension records frame rate, loop behavior, columns and the scaled origin. This structure is useful for a custom importer, but it is not a promise that every engine accepts the file directly. If an importer expects a different JSON dialect, use the PNG grid or convert the fields explicitly. Keep image and metadata together when renaming or moving files.

Import the PNG into Unity

Unity can use the regular grid without a custom JSON importer. Import the PNG as Sprite (2D and UI), select Multiple for Sprite Mode, choose Point filtering, and avoid texture compression when preserving exact pixel colors is important. Open Sprite Editor and choose Grid By Cell Size. Enter the exported frame width and height, with zero padding and offset for these sheets. Apply the slices and assemble the real frames into an animation clip.

Check the order of the resulting sprites instead of relying on a file browser’s alphabetical sorting. A sheet with unused cells must not gain a pause at its end from empty slices. Match the clip’s samples to the exported frame rate and set looping according to the effect. Our Unity guide explains this workflow in more detail. This download is a PNG-based asset pack, not a Unity package or an installed editor extension.

Use Aseprite or TexturePacker when the pipeline calls for it

Aseprite can import a sprite sheet through File → Import Sprite Sheet. Select the PNG and supply the cell dimensions, offset, padding and row order. Use the original frame count to remove unused trailing cells if your import includes them. The companion JSON documents the export; do not assume that importing the PNG automatically restores all animation timing or custom metadata. Review those settings inside the destination application.

TexturePacker serves a different stage of production: packing source sprites into an atlas and choosing an engine-specific data format. If you need that workflow, export a PNG frame sequence here and use the frames as its input. SpriteVFX itself exports an untrimmed regular grid, rather than rotated or tightly packed sprites. Choose the route that matches your engine’s importer, and compare the resulting animation after any repacking step.

Bring the included resource into Godot 4

Sheet downloads also include a SpriteFrames .tres file. Extract it beside its PNG inside your Godot project so the relative texture reference can resolve. Assign the resource to an AnimatedSprite2D node, select the default animation and use Nearest texture filtering for crisp edges. The resource already contains the frame rectangles, frame rate and loop setting for the export, including the correct omission of unused sheet cells.

The animation remains a sequence of raster images, not a particle system or a light source. Add your own gameplay triggers, lights and collision behavior in the engine. For a grounded effect, compare the node’s position with the exported origin and adjust the visual offset as needed. The Godot page includes a small sample project you can inspect before bringing the same workflow into a larger game.

Select the right file format and export size

A PNG sheet is convenient for a grid importer; a PNG sequence is useful for editing individual frames or repacking elsewhere. Both preserve transparency. GIF is a quick animation preview with a solid selected background and centisecond timing, so it is not the preferred source for a transparent game asset. Choosing a transparent preview background does not make the GIF transparent. Use PNG when alpha edges matter.

Exports run on your device. A large scale, high frame rate or wide sheet can exceed the browser’s working limits, so the editor checks dimensions before allocating the output. Each sheet edge must stay within 16,384 pixels, and the pixel budget is 64 million. Reduce scale or frame rate, or change columns to shorten an edge. Progress and cancellation are available during generation, and the completed ZIP can be downloaded again without rendering it twice.

Check the pack before adding it to a build

Open the ZIP and confirm that the PNG, JSON and .tres describe the same frame count and cell dimensions. Play the imported animation against both a light and dark background to inspect alpha edges, then test the first and last frames for unwanted pauses. Trigger it in the actual scene: a good-looking sheet can still be too large, too bright or too slow for the moment it accompanies.

Free single-effect downloads include a visible watermark and use the browser’s daily allowance of 10 exports. Pro removes the watermark and daily cap after a verified payment. The upstream effects are based on pixelfx under MIT terms; every pack includes its license and notices. Keep those files with redistributed material. If your next task is designing coordinated color variants, open Sprite Maker and work on the palette before returning to the sheet layout.

Before you export

Does changing columns alter the number of frames?

No. Columns only rearrange the same rendered frames. The last row may have empty cells, but JSON and Godot resources list only real frames.

Can I upload arbitrary images to make a sheet?

This generator currently renders the included effect library. It does not accept image uploads or combine unrelated user images into an atlas.

Will Unity read this JSON automatically?

No automatic Unity JSON importer is included. Import the PNG as multiple sprites and slice it using the exported cell dimensions.

Why does the output have transparent space around a frame?

The original canvas is preserved so animation frames share an alignment. The exporter does not trim each frame to its visible pixels.