QUICKUPSCALE

PRACTICAL GUIDE

Sprite sheet tools and workflows

Add transparent gutters to a regular sprite sheet

Start here

In sprite-sheet padding, declare the original 6×4 cells and set Padding per side to 2, Extrusion to 0. Four cells become a 20×16 sheet; the artwork in each content rectangle remains 6×4.

Expected result:

A padded PNG and generic geometry manifest with separate content and allocated rectangles.

What you need

Download the original CC0 21×16 sheet. Its magenta outer margins and gutters make a shifted crop visible.

Four original colored six by four tiles separated by diagnostic magenta gutters

Tested with: Actual production padding adapter in local Cloudflare/workerd, desktop Chrome 154/macOS; independent decoded-plane/Pillow checks and Node 24.22.0 reference tests. No physical-device claim.

1. Describe the source grid

Choose tiles-margins.png. Enter:

SettingPixels
Cell width / height6 / 4
Left / top / right / bottom margin2 / 1 / 4 / 3
Horizontal / vertical gap3 / 4
Padding / extrusion2 / 0

The complete grid has two columns and two rows. Padding processes all cells, at most 32; it has no frame-range control and does not detect artwork automatically.

2. Export transparent gutters

Select Create padded PNG. Download the PNG and manifest, or their ZIP. New gutters are transparent because extrusion is 0. Old diagnostic magenta gaps are discarded.

Actual twenty by sixteen padded sheet with transparent two-pixel gutters around each tile
Actual browser download: four allocated 10×8 cells, each containing 6×4 content.

3. Check content and allocated rectangles

Read the actual manifest. Content origins are (2,2), (12,2), (2,10), (12,10); every content rectangle is 6×4. Allocated cells start at (0,0), (10,0), (0,8), (10,8) and are 10×8.

The output dimensions are 2×(6+2×2)=20 and 2×(4+2×2)=16. Independent checks compared every content pixel and transparent gutter against the Canvas-decoded input. Browser hidden and partial-alpha RGB normalization remains a separate codec boundary.

4. A complete grid can still be wrong

Change the left/right margins to 1/5 while keeping the other settings. The column count still fits, but the crop shifts one pixel left. The recorded control produced 68 differing output pixels against the intended decoded-plane oracle. A valid grid count cannot identify the intended artwork.

Restore 2/4 before keeping a result. Fractional, negative, incomplete or oversized declarations fail; a complete wrong origin requires you to inspect the pixels.

5. Reproduce the separate software pack

In the extracted padding-trim-workflows directory run node --test fixture.test.mjs, node generate.mjs and node generate.mjs --check with Node 24. The generated references are separate from the actual browser downloads above.

Sources and next steps