SpriteCocktail

named PNG fragments + transforms + frames → animation sheets, left & right
Project
project not saved
session data unchanged
Raw Project Data editor not synchronized

Backroom access to the complete project object: part definitions, embedded artwork, animation data, sheet layout, render options and editor state. Editing this text does nothing until Apply Edited JSON is pressed. Reload Current discards unapplied text and rebuilds it from the live app.

1 · Parts

Parts are defined by the loaded project; add your own with + Add Part. Each part: load its own PNG, or grab it from the source image below. Draw art facing RIGHT. Cleared (×) parts render nothing; parts without art use their project default or a red placeholder marker. Per-part settings: global offset (native px; X reverses when mirrored), pivot (what the frame's X/Y anchors: 0,1 = bottom-left, 0.5,0.5 = center), rotation pivot (optional part-local native-pixel X/Y; blank uses the placement pivot), morph seams (artist-approved rows/columns inserted/removed by frame morph values), and whether the art flips when a pose is mirrored.

2 · Select from an image
no selection

Drag a rectangle around a part, then press "use sel" on the part above. Transparent edges are trimmed automatically.

3 · Preview
4 · Frame Builder
Control changes always update the JSON text; Active Rendering previews them immediately without applying.
ready no active frame

Paste one frame object or just its contents. Uses the same renderFrame() path as the sheet. Every part uses the same transform: partId: [x, y, z, rotation, morphX, morphY] (trailing zeros optional). Repeat the same part without defining another PartDef using spark: [[x,y,z], [x,y,z], ...]. X/Y anchor at the part's pivot; Z is explicit draw order; rotation is degrees around the part's rotation pivot; morph values are discrete pixel-row/column surgery on the part's seams, not scaling. Reserved keys: mirror holds per-part overrides applied only to the mirrored pose (null = hide, array = replace/introduce, object = partial e.g. {z: 40}); mirrorFlipsArt: false keeps artwork unflipped for front/back views.

5 · Spritesheet