Sprite Sheet Maker - Utilities Bunker

Sprite Sheet Maker (Grid)

Images

Drag & drop or pick files. Everything stays in your browser.

Drop images here PNG, JPG, GIF, WebP, SVG*

*SVGs are rasterized by the browser at their intrinsic size.

Columns Padding (px)

What this does: Combines multiple images into one PNG arranged in a fixed column grid, with optional padding.
Inputs: choose images, set Columns and Padding, then click Build.
Sizing: Each grid cell uses the max width and height across all selected images so nothing gets cropped.
JSON map: For each source file, we export { x, y, w, h } with pixel coordinates inside the sheet.
Draw via CSS (example): background-position: -xpx -ypx; and background-image: url(sprite.png);
Draw via Canvas (example): ctx.drawImage(sheet, x, y, w, h, dx, dy, w, h)
Ordering: Files are sorted by filename (A-Z) for stable, repeatable layouts.
Privacy: Everything is done locally-no uploads.

Notes & edge cases

Very large sheets can hit browser memory limits. If the Build button does nothing, try fewer images or smaller sources.
Different image sizes are supported. The JSON's w/h match each original image's size.
SVGs are rasterized by the browser; resulting pixel size depends on intrinsic viewBox and CSS sizing.