Sprite sheet maker with animation and metadata export

01

How to use a sprite sheet maker without atlas software

sprite sheet maker — Order frames, define one cell, preview motion, and export exact coordinates

sprite sheet maker — Add individual animation frames in the order they should play. Reorder or remove entries before generating the atlas, because that sequence controls both the animation preview and the metadata index. A horizontal strip is convenient for short loops, a vertical strip works for column-based consumers, and a grid keeps a long sequence from producing an extremely wide texture.

sprite sheet maker — Frame width and height define every atlas cell. Contain preserves the whole source inside the cell, Cover fills the cell and crops overflow, and Stretch forces the source to the exact dimensions. Gap separates neighboring cells; outer padding reserves transparent or colored pixels around the complete sheet. These choices are included in the calculated x, y, width, and height values.

sprite sheet maker — Generate the sprite before copying metadata so the values describe the actual exported canvas. If the requested atlas exceeds a safe edge or pixel budget, the tool scales the canvas and coordinates together and reports the export scale. Preview animation uses the ordered source frames, while the downloaded PNG or WebP and its JSON or CSS remain a deterministic pair.

• sprite sheet maker — Use equally composed frames to reduce visual jumping.
• sprite sheet maker — Keep transparent pixels when characters need irregular silhouettes.
• sprite sheet maker — Name frames clearly before export because names become metadata keys.
• sprite sheet maker — Test the saved image and coordinates in the target runtime.

02

sprite sheet maker — Choose atlas dimensions deliberately

sprite sheet maker — Frame cells, gaps, and padding determine every coordinate

A sprite sheet maker should make its geometry inspectable before export. Grid columns determine the row breaks; a horizontal strip fixes one row; a vertical strip fixes one column. Every cell origin starts after outer padding and advances by frame size plus gap. The tool calculates those positions from the selected controls, applies one shared export scale when a Canvas budget requires it, and writes the final pixel values—not the unscaled plan—into metadata.

03

sprite sheet maker — Keep unreleased game art inside the browser

sprite sheet maker — Local File and Canvas APIs avoid a processing upload

The sprite sheet maker uses File objects selected by the user, decodes them with createImageBitmap(), and draws them to a local Canvas. Thumbnail addresses are browser-created blob URLs, not remote image URLs. Generating a sheet does not call an upload endpoint, create an account record, or store a cloud project. Clearing the workspace closes decoded bitmaps and revokes preview URLs; source files on the device are never overwritten.

04

sprite sheet maker — Export coordinates for CSS or a game runtime

sprite sheet maker — Array JSON, hash JSON, and CSS describe the same atlas

The sprite sheet maker uses array JSON to preserve playback order when a runtime advances through an indexed list. Hash JSON maps unique filenames to frame rectangles for direct lookup. CSS output creates one shared background image rule plus a class for each frame, using negative background-position offsets and the exported atlas dimensions. PNG is the safest choice for alpha; WebP is available when the destination accepts it, with quality control for its encoded output.

05

sprite sheet maker — How the sprite atlas output is verified

sprite sheet maker — Official Canvas and CSS specifications support reproducible checks

The sprite sheet maker verification combines official documentation with reproducible browser checks. MDN documents drawImage() placement and Canvas Blob export, while the W3C background-position definition explains the offsets used by generated CSS. Product checks load solid-color frames with different dimensions and alpha, change their order, confirm calculated rectangles, export WebP, reopen its 148 by 414 pixel dimensions, and inspect the request log to distinguish local blob reads from network transfers.