Sprite Forge — sprite sheet animator

\n\n\n\n

Sample · walk cycle

\n \n \n \n

\n\n

\n \n frame 0 / 0\n — px\n

\n\n

\n Frames\n

\n \n \n

Click a frame to play that row.

\n\n \n

\n\n\n\n\n\n\n",[100],"b96c395a-5e3b-11f1-9366-1607ee4eb77e",["D",1780374603199],"// Built-in sample sprite sheet.\n// A 64x96 PNG: 4 columns x 4 rows (16x24 px cells) walk cycle, recovered to\n// native pixel resolution and embedded as base64 so the app works on first\n// load with no upload required.\n// Rows (top -> bottom): walk-down, walk-up, walk-side, walk-side(alt).\n\nexport const SAMPLE_META = {\n id: \"sample\",\n name: \"Sample \\u00b7 walk cycle\",\n cols: 4,\n rows: 4,\n fps: 6,\n contentType: \"image/png\",\n builtin: true,\n createdAt: 0,\n};\n\nexport const SAMPLE_B64 =\n \"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\";\n",[90],"ed7c8fe6-5e3c-11f1-bec0-1607ee4eb77e",["D",1780375120044],"// Sprite Forge — client. Vanilla JS, canvas-based sprite-sheet animation.\n// Talks to the JSON API in main.ts; sheets (incl. the built-in sample) come\n// from /api/sheets and their pixels from /api/sheets/:id/image.\n\nconst $ = (id) => document.getElementById(id);\nconst clamp = (n, lo, hi) => Math.min(hi, Math.max(lo, n));\n\n// ---- DOM refs ----\nconst canvas = $(\"canvas\");\nconst ctx = canvas.getContext(\"2d\");\nconst stage = $(\"stage\");\nconst stageTitle = $(\"stage-title\");\nconst playBtn = $(\"play-btn\");\nconst frameReadout = $(\"frame-readout\");\nconst dimsReadout = $(\"dims-readout\");\nconst strip = $(\"strip\");\nconst gallery = $(\"gallery\");\n\nconst colsInput = $(\"cols\");\nconst rowsInput = $(\"rows\");\nconst fpsInput = $(\"fps\");\nconst fpsVal = $(\"fps-val\");\nconst scaleInput = $(\"scale\");\nconst scaleVal = $(\"scale-val\");\n\nconst modeToggle = $(\"mode-toggle\");\nconst dirToggle = $(\"dir-toggle\");\nconst bgToggle = $(\"bg-toggle\");\n\nconst saveRow = $(\"save-row\");\nconst saveBtn = $(\"save-btn\");\nconst saveStatus = $(\"save-status\");\nconst uploadBtn = $(\"upload-btn\");\n\n// modal\nconst modal = $(\"modal\");\nconst mClose = $(\"m-close\");\nconst mCancel = $(\"m-cancel\");\nconst mAdd = $(\"m-add\");\nconst drop = $(\"drop\");\nconst fileInput = $(\"file\");\nconst previewWrap = $(\"preview-wrap\");\nconst previewImg = $(\"preview\");\nconst previewGrid = $(\"preview-grid\");\nconst dropText = $(\"drop-text\");\nconst mName = $(\"m-name\");\nconst mCols = $(\"m-cols\");\nconst mRows = $(\"m-rows\");\nconst mFps = $(\"m-fps\");\nconst mError = $(\"m-error\");\n\n// ---- state ----\nconst state = {\n sheets: [],\n sheet: null,\n img: null,\n imgW: 0,\n imgH: 0,\n cols: 4,\n rows: 4,\n fps: 6,\n scale: 4,\n mode: \"row\", // \"row\" | \"all\"\n dir: \"loop\", // \"loop\" | \"pingpong\"\n row: 0,\n bg: \"checker\",\n playing: true,\n seq: [], // global frame indices to play, in order\n pos: 0, // index into seq\n cur: 0, // current global frame index\n lastTs: 0,\n};\n\nconst imageUrl = (s) => `/api/sheets/${s.id}/image?v=${s.createdAt}`;\nconst frameW = () => Math.max(1, Math.floor(state.imgW / state.cols));\nconst frameH = () => Math.max(1, Math.floor(state.imgH / state.rows));\n\n// ---- sequence / drawing ----\nfunction baseSeq() {\n const total = state.cols * state.rows;\n if (state.mode === \"all\") return Array.from({ length: total }, (_, i) => i);\n const start = clamp(state.row, 0, state.rows - 1) * state.cols;\n const out = [];\n for (let i = 0; i < state.cols && start + i < total; i++) out.push(start + i);\n return out;\n}\n\nfunction buildSeq() {\n const base = baseSeq();\n state.seq =\n state.dir === \"pingpong\" && base.length > 2\n ? base.concat(base.slice(1, -1).reverse())\n : base;\n if (state.pos >= state.seq.length) state.pos = 0;\n}\n\nfunction setupCanvas() {\n canvas.width = frameW() * state.scale;\n canvas.height = frameH() * state.scale;\n ctx.imageSmoothingEnabled = false;\n}\n\nfunction drawFrame(idx) {\n ctx.clearRect(0, 0, canvas.width, canvas.height);\n if (!state.img) return;\n const fw = frameW();\n const fh = frameH();\n const sx = (idx % state.cols) * fw;\n const sy = Math.floor(idx / state.cols) * fh;\n ctx.drawImage(state.img, sx, sy, fw, fh, 0, 0, fw * state.scale, fh * state.scale);\n}\n\nfunction updateReadout() {\n frameReadout.textContent = state.seq.length\n ? `frame ${state.pos + 1} / ${state.seq.length}`\n : \"frame 0 / 0\";\n dimsReadout.textContent = state.img ? `${frameW()}×${frameH()} px` : \"— px\";\n}\n\n// Restart on anything that changes geometry or the sequence.\nfunction restart() {\n buildSeq();\n setupCanvas();\n if (state.pos >= state.seq.length) state.pos = 0;\n state.cur = state.seq.length ? state.seq[state.pos] : 0;\n state.lastTs = 0;\n drawFrame(state.cur);\n highlightStrip();\n updateReadout();\n}\n\n// rAF loop — reads fps & playing live, so changing them never restarts.\nfunction loop(ts) {\n requestAnimationFrame(loop);\n if (!state.seq.length) return;\n if (!state.playing) {\n state.lastTs = ts;\n return;\n }\n if (!state.lastTs) state.lastTs = ts;\n if (ts - state.lastTs >= 1000 / state.fps) {\n state.lastTs = ts;\n state.pos = (state.pos + 1) % state.seq.length;\n state.cur = state.seq[state.pos];\n drawFrame(state.cur);\n highlightStrip();\n updateReadout();\n }\n}\n\n// ---- frame strip (shows the whole grid) ----\nfunction renderStrip() {\n strip.innerHTML = \"\";\n if (!state.img || !state.sheet) return;\n const total = state.cols * state.rows;\n const url = imageUrl(state.sheet);\n for (let i = 0; i < total; i++) {\n const col = i % state.cols;\n const r = Math.floor(i / state.cols);\n const cell = document.createElement(\"div\");\n cell.className = \"frame-cell\";\n cell.dataset.idx = i;\n cell.style.backgroundImage = `url(\"${url}\")`;\n cell.style.backgroundSize = `${state.cols * 100}% ${state.rows * 100}%`;\n cell.style.backgroundPosition = `${state.cols > 1 ? (col / (state.cols - 1)) * 100 : 0}% ${\n state.rows > 1 ? (r / (state.rows - 1)) * 100 : 0\n }%`;\n const tag = document.createElement(\"span\");\n tag.className = \"idx\";\n tag.textContent = i;\n cell.appendChild(tag);\n cell.addEventListener(\"click\", () => {\n state.mode = \"row\";\n reflectMode();\n state.row = r;\n state.playing = true;\n reflectPlay();\n restart();\n const local = state.seq.indexOf(i);\n if (local >= 0) {\n state.pos = local;\n state.cur = i;\n drawFrame(i);\n highlightStrip();\n updateReadout();\n }\n });\n strip.appendChild(cell);\n }\n highlightStrip();\n}\n\nfunction highlightStrip() {\n for (const cell of strip.children) {\n const i = +cell.dataset.idx;\n const r = Math.floor(i / state.cols);\n cell.classList.toggle(\"current\", i === state.cur);\n cell.classList.toggle(\"in-row\", state.mode === \"row\" && r === state.row);\n }\n}\n\n// ---- gallery ----\nfunction renderGallery() {\n gallery.innerHTML = \"\";\n for (const s of state.sheets) {\n const card = document.createElement(\"div\");\n card.className = \"sheet-card\" + (state.sheet && s.id === state.sheet.id ? \" active\" : \"\");\n\n const thumb = document.createElement(\"div\");\n thumb.className = \"sheet-thumb\";\n thumb.style.backgroundImage = `url(\"${imageUrl(s)}\")`;\n thumb.style.backgroundSize = `${s.cols * 100}% ${s.rows * 100}%`;\n thumb.style.backgroundPosition = \"0% 0%\";\n\n const info = document.createElement(\"div\");\n info.className = \"sheet-info\";\n const name = document.createElement(\"div\");\n name.className = \"sheet-name\";\n name.textContent = s.name;\n const meta = document.createElement(\"div\");\n meta.className = \"sheet-meta\";\n meta.textContent = `${s.cols}×${s.rows} · ${s.fps} fps`;\n info.append(name, meta);\n\n card.append(thumb, info);\n\n if (s.builtin) {\n const tag = document.createElement(\"span\");\n tag.className = \"sheet-tag\";\n tag.textContent = \"SAMPLE\";\n card.appendChild(tag);\n } else {\n const del = document.createElement(\"button\");\n del.className = \"sheet-del\";\n del.type = \"button\";\n del.textContent = \"✕\";\n del.title = \"Delete sheet\";\n del.addEventListener(\"click\", (e) => {\n e.stopPropagation();\n deleteSheet(s);\n });\n card.appendChild(del);\n }\n\n card.addEventListener(\"click\", () => selectSheet(s.id));\n gallery.appendChild(card);\n }\n}\n\nasync function selectSheet(id) {\n const s = state.sheets.find((x) => x.id === id);\n if (!s) return;\n state.sheet = s;\n state.cols = s.cols;\n state.rows = s.rows;\n state.fps = s.fps;\n state.row = 0;\n state.pos = 0;\n\n colsInput.value = s.cols;\n rowsInput.value = s.rows;\n fpsInput.value = clamp(s.fps, 1, 60);\n fpsVal.textContent = `${s.fps} fps`;\n stageTitle.textContent = s.name;\n saveRow.hidden = !!s.builtin;\n saveStatus.textContent = \"\";\n\n renderGallery();\n await loadImage(s);\n renderStrip();\n restart();\n}\n\nfunction loadImage(s) {\n return new Promise((resolve) => {\n const img = new Image();\n img.onload = () => {\n state.img = img;\n state.imgW = img.naturalWidth;\n state.imgH = img.naturalHeight;\n resolve();\n };\n img.onerror = () => {\n state.img = null;\n state.imgW = 0;\n state.imgH = 0;\n resolve();\n };\n img.src = imageUrl(s);\n });\n}\n\nasync function refreshSheets() {\n const res = await fetch(\"/api/sheets\");\n state.sheets = await res.json();\n renderGallery();\n}\n\n// ---- save / delete ----\nasync function saveGrid() {\n if (!state.sheet || state.sheet.builtin) return;\n saveStatus.textContent = \"Saving…\";\n try {\n const res = await fetch(`/api/sheets/${state.sheet.id}`, {\n method: \"PATCH\",\n headers: { \"content-type\": \"application/json\" },\n body: JSON.stringify({ cols: state.cols, rows: state.rows, fps: state.fps }),\n });\n if (!res.ok) throw new Error();\n const updated = await res.json();\n const i = state.sheets.findIndex((x) => x.id === updated.id);\n if (i >= 0) state.sheets[i] = updated;\n state.sheet = updated;\n saveStatus.textContent = \"Saved ✓\";\n renderGallery();\n } catch {\n saveStatus.textContent = \"Save failed\";\n }\n}\n\nasync function deleteSheet(s) {\n if (s.builtin) return;\n if (!confirm(`Delete \"${s.name}\"?`)) return;\n await fetch(`/api/sheets/${s.id}`, { method: \"DELETE\" });\n const wasCurrent = state.sheet && state.sheet.id === s.id;\n await refreshSheets();\n if (wasCurrent) await selectSheet(\"sample\");\n}\n\n// ---- upload modal ----\nlet pendingFile = null;\nlet pendingUrl = null;\n\nfunction openModal() {\n modal.hidden = false;\n mError.textContent = \"\";\n}\n\nfunction closeModal() {\n modal.hidden = true;\n pendingFile = null;\n if (pendingUrl) {\n URL.revokeObjectURL(pendingUrl);\n pendingUrl = null;\n }\n fileInput.value = \"\";\n previewWrap.hidden = true;\n previewImg.removeAttribute(\"src\");\n dropText.textContent = \"Drop an image here · click to browse · or paste\";\n mError.textContent = \"\";\n mName.value = \"\";\n}\n\nfunction setPreviewFile(file) {\n if (!file || !file.type.startsWith(\"image/\")) {\n mError.textContent = \"Please choose an image file.\";\n return;\n }\n mError.textContent = \"\";\n pendingFile = file;\n if (pendingUrl) URL.revokeObjectURL(pendingUrl);\n pendingUrl = URL.createObjectURL(file);\n previewImg.onload = () => {\n previewWrap.hidden = false;\n dropText.textContent = file.name;\n drawPreviewGrid();\n };\n previewImg.src = pendingUrl;\n if (!mName.value.trim()) mName.value = file.name.replace(/\\.[^.]+$/, \"\");\n}\n\nfunction drawPreviewGrid() {\n if (!previewImg.naturalWidth || previewWrap.hidden) return;\n previewGrid.width = previewImg.clientWidth;\n previewGrid.height = previewImg.clientHeight;\n const g = previewGrid.getContext(\"2d\");\n g.clearRect(0, 0, previewGrid.width, previewGrid.height);\n const cols = clamp(parseInt(mCols.value) || 1, 1, 64);\n const rows = clamp(parseInt(mRows.value) || 1, 1, 64);\n g.strokeStyle = \"rgba(91,227,139,0.85)\";\n g.lineWidth = 1;\n for (let i = 1; i < cols; i++) {\n const x = Math.round((i * previewGrid.width) / cols) + 0.5;\n g.beginPath();\n g.moveTo(x, 0);\n g.lineTo(x, previewGrid.height);\n g.stroke();\n }\n for (let j = 1; j < rows; j++) {\n const y = Math.round((j * previewGrid.height) / rows) + 0.5;\n g.beginPath();\n g.moveTo(0, y);\n g.lineTo(previewGrid.width, y);\n g.stroke();\n }\n}\n\nasync function addSheet() {\n if (!pendingFile) {\n mError.textContent = \"Pick an image first.\";\n return;\n }\n const fd = new FormData();\n fd.append(\"file\", pendingFile);\n fd.append(\"name\", mName.value.trim());\n fd.append(\"cols\", mCols.value);\n fd.append(\"rows\", mRows.value);\n fd.append(\"fps\", mFps.value);\n mAdd.disabled = true;\n mError.textContent = \"\";\n try {\n const res = await fetch(\"/api/sheets\", { method: \"POST\", body: fd });\n if (!res.ok) {\n const e = await res.json().catch(() => ({}));\n throw new Error(e.error || \"Upload failed\");\n }\n const meta = await res.json();\n await refreshSheets();\n await selectSheet(meta.id);\n closeModal();\n } catch (err) {\n mError.textContent = err.message || \"Upload failed\";\n } finally {\n mAdd.disabled = false;\n }\n}\n\n// ---- reflect UI state ----\nfunction reflectPlay() {\n playBtn.textContent = state.playing ? \"⏸ Pause\" : \"▶ Play\";\n}\nfunction setSeg(group, attr, val) {\n for (const b of group.querySelectorAll(\".seg-btn\")) b.classList.toggle(\"is-on\", b.dataset[attr] === val);\n}\nfunction reflectMode() {\n setSeg(modeToggle, \"mode\", state.mode);\n}\nfunction reflectDir() {\n setSeg(dirToggle, \"dir\", state.dir);\n}\n\nfunction applyGrid() {\n state.cols = clamp(parseInt(colsInput.value) || 1, 1, 64);\n state.rows = clamp(parseInt(rowsInput.value) || 1, 1, 64);\n colsInput.value = state.cols;\n rowsInput.value = state.rows;\n if (state.row >= state.rows) state.row = state.rows - 1;\n renderStrip();\n restart();\n}\n\n// ---- bindings ----\nfunction bindControls() {\n for (const btn of document.querySelectorAll(\"[data-step]\")) {\n btn.addEventListener(\"click\", () => {\n const input = btn.dataset.step === \"cols\" ? colsInput : rowsInput;\n input.value = clamp((parseInt(input.value) || 1) + +btn.dataset.delta, 1, 64);\n applyGrid();\n });\n }\n colsInput.addEventListener(\"change\", applyGrid);\n rowsInput.addEventListener(\"change\", applyGrid);\n\n fpsInput.addEventListener(\"input\", () => {\n state.fps = clamp(parseInt(fpsInput.value) || 1, 1, 60);\n fpsVal.textContent = `${state.fps} fps`;\n });\n scaleInput.addEventListener(\"input\", () => {\n state.scale = clamp(parseInt(scaleInput.value) || 1, 1, 12);\n scaleVal.textContent = `${state.scale}×`;\n restart();\n });\n\n playBtn.addEventListener(\"click\", () => {\n state.playing = !state.playing;\n reflectPlay();\n });\n\n for (const b of modeToggle.querySelectorAll(\".seg-btn\"))\n b.addEventListener(\"click\", () => {\n state.mode = b.dataset.mode;\n reflectMode();\n restart();\n });\n for (const b of dirToggle.querySelectorAll(\".seg-btn\"))\n b.addEventListener(\"click\", () => {\n state.dir = b.dataset.dir;\n reflectDir();\n restart();\n });\n for (const b of bgToggle.querySelectorAll(\".seg-btn\"))\n b.addEventListener(\"click\", () => {\n state.bg = b.dataset.bg;\n stage.dataset.bg = state.bg;\n setSeg(bgToggle, \"bg\", state.bg);\n });\n\n saveBtn.addEventListener(\"click\", saveGrid);\n uploadBtn.addEventListener(\"click\", openModal);\n}\n\nfunction bindModal() {\n fileInput.addEventListener(\"change\", () => {\n if (fileInput.files[0]) setPreviewFile(fileInput.files[0]);\n });\n mCols.addEventListener(\"input\", drawPreviewGrid);\n mRows.addEventListener(\"input\", drawPreviewGrid);\n mClose.addEventListener(\"click\", closeModal);\n mCancel.addEventListener(\"click\", closeModal);\n mAdd.addEventListener(\"click\", addSheet);\n modal.addEventListener(\"click\", (e) => {\n if (e.target === modal) closeModal();\n });\n\n drop.addEventListener(\"dragover\", (e) => {\n e.preventDefault();\n e.stopPropagation();\n drop.classList.add(\"dragging\");\n });\n drop.addEventListener(\"dragleave\", (e) => {\n e.stopPropagation();\n drop.classList.remove(\"dragging\");\n });\n drop.addEventListener(\"drop\", (e) => {\n e.preventDefault();\n e.stopPropagation();\n drop.classList.remove(\"dragging\");\n const f = e.dataTransfer?.files?.[0];\n if (f) setPreviewFile(f);\n });\n}\n\nfunction bindGlobal() {\n window.addEventListener(\"dragover\", (e) => e.preventDefault());\n window.addEventListener(\"drop\", (e) => {\n e.preventDefault();\n if (!modal.hidden) return;\n const f = e.dataTransfer?.files?.[0];\n if (f && f.type.startsWith(\"image/\")) {\n openModal();\n setPreviewFile(f);\n }\n });\n window.addEventListener(\"paste\", (e) => {\n const item = [...(e.clipboardData?.items || [])].find((i) => i.type.startsWith(\"image/\"));\n if (!item) return;\n const f = item.getAsFile();\n if (f) {\n openModal();\n setPreviewFile(f);\n }\n });\n window.addEventListener(\"keydown\", (e) => {\n if (e.code !== \"Space\") return;\n const t = e.target;\n if (t && (t.tagName === \"INPUT\" || t.tagName === \"TEXTAREA\" || t.isContentEditable)) return;\n if (!modal.hidden) return;\n e.preventDefault();\n state.playing = !state.playing;\n reflectPlay();\n });\n}\n\n// ---- init ----\nfunction init() {\n bindControls();\n bindModal();\n bindGlobal();\n refreshSheets().then(() => selectSheet(\"sample\"));\n requestAnimationFrame(loop);\n}\ninit();\n",[125],"02753c90-5e3d-11f1-ad24-1607ee4eb77e",["D",1780375155226],"# 🎞️ sprite-animator\n\n**Sprite Forge** — a browser sprite-sheet animator. Loads a built-in sample sheet,\nlets you set the grid (columns × rows), pick a row to play, scrub frames, and tune\nspeed/zoom. Upload, drag-drop, or paste any other sheet to animate it instead;\nuploaded sheets persist and show up in the gallery.\n\n**Live:** \n\n## Use it\n- **Columns / Rows** — match the sheet's grid. Frame size is derived automatically.\n- **Single row / All frames** — play just one row, or every frame left-to-right, top-to-bottom.\n- **Loop / Ping-pong** — ping-pong bounces back through the frames (nice for short cycles).\n- **Speed / Zoom** — fps and nearest-neighbour scale, so pixels stay crisp.\n- **Upload / drag-drop / paste** an image to add a sheet. Click any frame in the strip to play that row.\n- **Save grid to sheet** stores the columns/rows/fps you dialled in for an uploaded sheet.\n\nThe bundled sample is a 4×4 sheet — rows are **down / up / side / side**.\n\n## How it works\n\nThe server is static + a small JSON API. The sample sheet is embedded as base64 and\nserved like any other sheet; uploads live in blob storage. All animation happens\nclient-side on a `

Sample · walk cycle

Add a sprite sheet

History