> Turn a sprite sheet into a game-ready atlas + animation data. Load art, clean it, chop it into frames, group frames into animations, export. Here's the drill:

1 - Load Your Art

• Drag & drop a PNG (or any image) onto the big checkerboard area.
• Or hit Load Project to reopen a saved .json (artwork & frames stored together).

2 - Tool Mode

• Erase Color — click a flat colour to flood-erase it to transparent. Erase Tolerance = how far the colour may vary and still get wiped (bigger = greedier). Perfect for killing a solid background.
• Trim Sheet — drag a box on the canvas, nudge or resize it by the yellow corner, then press T to crop the whole sheet down to that box.
• Edit Frames — click the canvas to drop a frame (sized to Spacing, centred on your click). Drag to move (Shift = sideways only), drag the yellow corner to resize, right-click a frame for Duplicate / Delete.
• Spill Fix — shrinks every sprite edge inward to nibble off leftover background fringe. Drag Erosion Radius to preview live, then Confirm (or Cancel to revert).
• Auto Slice — finds separate sprites automatically. Set Alpha Threshold (what counts as solid), Min Area (ignore specks) & Padding, then smash Slice!. Frames appear in reading order (top→bottom, left→right).

3 - Sequences & Frames

• A project holds one or more Sequences (animations). + Add List makes one; click a sequence to edit it.
• Give it a Name, FPS and Loop — the preview window (top-right) plays the active sequence live.
• Grid fill: set X/Y (start corner), Spacing (cell size) and Sprite (art size, centred in each cell), then Fill Grid to auto-lay frames across the sheet. Tweak any number and the grid reflows instantly.
• The frame list shows each [x, y]; its little X deletes one. Clear Frames empties the sequence; Delete Sequence bins it.

4 - Export

• Save Project — a .json holding your frames + the embedded atlas. Reopen anytime with Load Project.
• Download Transparent Atlas — the cleaned-up image as a transparent PNG.
• Copy JSON (Game Ready) — just the sequence/frame data, straight to your clipboard for the game engine.

5 - Load It Into Pixi.js

Export the picture (Download Transparent Atlas) and the data (Copy JSON → save as sequences.json), then feed both to Pixi:

// load the atlas PNG + the exported sequences JSON
const atlas = await PIXI.Assets.load('atlas.png');
const seqs  = await (await fetch('sequences.json')).json();

// turn one sequence into a playable AnimatedSprite
function makeAnim(seq) {
  const base = atlas.baseTexture;
  const frames = seq.frames.map(f =>
    new PIXI.Texture(base, new PIXI.Rectangle(f.x, f.y, f.w, f.h)));
  const spr = new PIXI.AnimatedSprite(frames);
  spr.animationSpeed = seq.fps / 60;   // Pixi ticks at 60fps
  spr.loop   = seq.loop;
  spr.anchor.set(0.5);
  return spr;
}

// grab "walk", play it, drop it on the stage
const walk = makeAnim(seqs.find(s => s.name === 'walk'));
walk.play();
app.stage.addChild(walk);

> On Pixi v8 swap that Texture line for: new PIXI.Texture({ source: base, frame: new PIXI.Rectangle(f.x,f.y,f.w,f.h) }). For crisp pixels, use base.scaleMode = 'nearest'.

6 - Quick Keys

• T — apply the trim crop (Trim mode).
• Shift + drag — move a frame horizontally only.
• Right-click a frame — Duplicate / Delete.
• Esc — close this help screen.