Shelf packing
Stable ID order and first fitting square size. It is not a global optimizer.
01 / PNG → ATLAS → JSON
Arrange the sprites.
Inspect the edge.
Turn a small PNG batch into a square atlas and JSON hash. Everything happens in this browser; inspect every frame before downloading.
Open inspection bench ↓1–32 PNG2048² MAXNO TRIM / NO ROTATE
LOOSE / 10ATLAS / 01
02 / INSPECTION BENCH
From loose PNGs to an auditable atlas.
Deterministic shelf packing. No trim, rotation, or optimality claim.
ATLAS / —EMPTY
⌗Load PNGs or open the demo.
03 / EDGE LOGIC
The margin is not empty space.
Extrude copies the outermost pixel beyond the frame. Padding keeps occupied areas apart. FRAME shows both instead of hiding them behind a setting.
See edge anatomy →PADDINGEXTRUDECONTENT2 / 1 / FRAME
04 / TWO FILES
One image. One inspectable map.
"frame_01": {
"frame": { "x": 3, "y": 3,
"w": 32, "h": 28 },
"rotated": false,
"trimmed": false
}The PNG holds pixels. JSON describes each ID’s exact rectangle. FRAME does not import Phaser: it exports the documented hash schema so you can load both files in your project.
Read the format and loading example →05 / HONEST LIMITS
Small, deterministic, inspectable.
PNG local
No SVG, APNG, folders, ZIP, or image persistence.
JSON hash
Matches the described schema; it does not promise every engine or a tested runtime.
06 / FAQ
Before integration.
Do my files leave the browser?
FRAME does not send them: it reads, draws, and exports in your browser. A future hosted page would still receive normal page requests; see Privacy.
Why does the frame exclude extrude?
Coordinates point to original content. Extrude lives outside that rectangle and padding separates occupied areas.
Does it replace TexturePacker?
No. If you need trim, multipack, many formats, or CI, use a fuller tool. FRAME tests a small, inspectable workflow.
FRAME / LOCAL