🎞️ Sprite Animator

\n view source\n

\n\n

Drop sprite sheet

\n\n

\n loading…\n \n

\n\n

\n \n \n ⬆ Upload sheet\n \n \n \n

\n\n

\n Columns\n \n \n Rows\n \n \n Play\n \n \n Direction\n \n \n Speed 8 fps\n \n \n Zoom 2×\n \n \n

\n\n

Tip: you can also drag & drop or paste an image to load a new sheet. Set columns/rows to match its grid.

\n\n \n\n\n",[152],"b96c395a-5e3b-11f1-9366-1607ee4eb77e",["D",1780374603199],2,[28],"2c0cc7d4-5e39-11f1-a35a-1607ee4eb77e","app.js","2c0cc892-5e39-11f1-a35a-1607ee4eb77e",6,["D",1780373507028],"import defaultSprite from \"/default-sprite.js\";\n\nconst $ = (id) => document.getElementById(id);\nconst clampInt = (v, lo, hi) => Math.min(hi, Math.max(lo, Math.round(+v) || lo));\n\nconst canvas = $(\"view\");\nconst ctx = canvas.getContext(\"2d\");\nconst stage = $(\"stage\");\nconst stripEl = $(\"strip\");\n\nconst state = {\n img: null,\n cols: 4,\n rows: 4,\n fps: 8,\n scale: 2,\n mode: \"loop\", // \"loop\" | \"pingpong\"\n row: \"all\", // \"all\" | number\n playing: true,\n};\n\nlet frameIndex = 0;\nlet dir = 1;\nlet last = 0;\nlet acc = 0;\nlet raf = null;\n\n// ---------- geometry ----------\nfunction frameSize() {\n return {\n w: state.img.naturalWidth / state.cols,\n h: state.img.naturalHeight / state.rows,\n };\n}\n\nfunction activeCells() {\n if (state.row === \"all\") {\n const out = [];\n for (let r = 0; r < state.rows; r++)\n for (let c = 0; c < state.cols; c++) out.push([r, c]);\n return out;\n }\n return Array.from({ length: state.cols }, (_, c) => [state.row, c]);\n}\n\nfunction sequence() {\n const { w, h } = frameSize();\n return activeCells().map(([r, c]) => ({ sx: c * w, sy: r * h, sw: w, sh: h }));\n}\n\n// ---------- rendering ----------\nfunction applyScale() {\n const { w, h } = frameSize();\n canvas.style.width = Math.round(w * state.scale) + \"px\";\n canvas.style.height = Math.round(h * state.scale) + \"px\";\n}\n\nfunction resizeCanvas() {\n const { w, h } = frameSize();\n canvas.width = Math.round(w);\n canvas.height = Math.round(h);\n applyScale();\n}\n\nfunction render() {\n if (!state.img) return;\n const seq = sequence();\n if (!seq.length) return;\n if (frameIndex >= seq.length) frameIndex = 0;\n const f = seq[frameIndex];\n ctx.clearRect(0, 0, canvas.width, canvas.height);\n ctx.imageSmoothingEnabled = false;\n ctx.drawImage(state.img, f.sx, f.sy, f.sw, f.sh, 0, 0, canvas.width, canvas.height);\n highlightStrip();\n $(\"frameLabel\").textContent = `frame ${frameIndex + 1} / ${seq.length}`;\n}\n\n// ---------- frames strip ----------\nfunction buildStrip() {\n const { w, h } = frameSize();\n stripEl.innerHTML = \"\";\n activeCells().forEach(([r, c], i) => {\n const cv = document.createElement(\"canvas\");\n cv.width = Math.round(w);\n cv.height = Math.round(h);\n const cx = cv.getContext(\"2d\");\n cx.imageSmoothingEnabled = false;\n cx.drawImage(state.img, c * w, r * h, w, h, 0, 0, cv.width, cv.height);\n cv.className = \"thumb\";\n cv.title = `frame ${i + 1}`;\n cv.addEventListener(\"click\", () => {\n pause();\n frameIndex = i;\n render();\n });\n stripEl.appendChild(cv);\n });\n highlightStrip();\n}\n\nfunction highlightStrip() {\n [...stripEl.children].forEach((el, i) => el.classList.toggle(\"active\", i === frameIndex));\n}\n\n// ---------- animation loop ----------\nfunction tick(t) {\n if (!state.playing) return;\n if (!last) last = t;\n acc += (t - last) / 1000;\n last = t;\n const seq = sequence();\n const spf = 1 / state.fps;\n let advanced = false;\n while (acc >= spf) {\n acc -= spf;\n advanced = true;\n if (state.mode === \"pingpong\") {\n frameIndex += dir;\n if (frameIndex >= seq.length - 1) {\n frameIndex = seq.length - 1;\n dir = -1;\n } else if (frameIndex <= 0) {\n frameIndex = 0;\n dir = 1;\n }\n } else {\n frameIndex = (frameIndex + 1) % seq.length;\n }\n }\n if (advanced) render();\n raf = requestAnimationFrame(tick);\n}\n\nfunction startLoop() {\n if (!state.playing || !state.img) return;\n cancelAnimationFrame(raf);\n last = 0;\n raf = requestAnimationFrame(tick);\n}\nfunction play() {\n state.playing = true;\n $(\"playBtn\").textContent = \"⏸ Pause\";\n startLoop();\n}\nfunction pause() {\n state.playing = false;\n cancelAnimationFrame(raf);\n raf = null;\n $(\"playBtn\").textContent = \"▶ Play\";\n}\nconst toggle = () => (state.playing ? pause() : play());\n\n// ---------- row selector ----------\nfunction rebuildRowSelect() {\n const sel = $(\"rowSel\");\n const prev = sel.value;\n sel.innerHTML = ``;\n for (let r = 0; r < state.rows; r++) {\n const o = document.createElement(\"option\");\n o.value = String(r);\n o.textContent = `Row ${r + 1}`;\n sel.appendChild(o);\n }\n if (prev === \"all\" || (prev !== \"\" && +prev < state.rows)) sel.value = prev;\n else sel.value = \"all\";\n state.row = sel.value === \"all\" ? \"all\" : +sel.value;\n}\n\nfunction refresh() {\n if (!state.img) return;\n resizeCanvas();\n buildStrip();\n render();\n}\n\n// ---------- image loading ----------\nfunction loadImage(src, name) {\n const img = new Image();\n img.onload = () => {\n state.img = img;\n const { w, h } = { w: img.naturalWidth / state.cols, h: img.naturalHeight / state.rows };\n state.scale = clampInt(Math.round(180 / Math.max(w, h)), 1, 16);\n $(\"scale\").value = state.scale;\n $(\"scaleVal\").textContent = state.scale + \"×\";\n $(\"sheetName\").textContent = `${name} · ${img.naturalWidth}×${img.naturalHeight}`;\n frameIndex = 0;\n dir = 1;\n refresh();\n startLoop();\n };\n img.onerror = () => alert(\"Couldn't load that image.\");\n img.src = src;\n}\n\nfunction handleFile(file) {\n if (!file || !file.type.startsWith(\"image/\")) return;\n const reader = new FileReader();\n reader.onload = () => loadImage(reader.result, file.name);\n reader.readAsDataURL(file);\n}\n\n// ---------- controls ----------\nfunction bindControls() {\n $(\"cols\").addEventListener(\"input\", (e) => {\n state.cols = clampInt(e.target.value, 1, 64);\n frameIndex = 0;\n rebuildRowSelect();\n refresh();\n });\n $(\"rows\").addEventListener(\"input\", (e) => {\n state.rows = clampInt(e.target.value, 1, 64);\n frameIndex = 0;\n rebuildRowSelect();\n refresh();\n });\n $(\"fps\").addEventListener(\"input\", (e) => {\n state.fps = +e.target.value;\n $(\"fpsVal\").textContent = state.fps + \" fps\";\n });\n $(\"scale\").addEventListener(\"input\", (e) => {\n if (!state.img) return;\n state.scale = +e.target.value;\n $(\"scaleVal\").textContent = state.scale + \"×\";\n applyScale();\n });\n $(\"mode\").addEventListener(\"change\", (e) => {\n state.mode = e.target.value;\n dir = 1;\n });\n $(\"rowSel\").addEventListener(\"change\", (e) => {\n state.row = e.target.value === \"all\" ? \"all\" : +e.target.value;\n frameIndex = 0;\n refresh();\n });\n $(\"playBtn\").addEventListener(\"click\", toggle);\n $(\"resetBtn\").addEventListener(\"click\", () => {\n state.cols = 4;\n state.rows = 4;\n $(\"cols\").value = 4;\n $(\"rows\").value = 4;\n rebuildRowSelect();\n loadImage(defaultSprite, \"default sprite\");\n });\n}\n\nfunction bindDropAndPaste() {\n $(\"file\").addEventListener(\"change\", (e) => handleFile(e.target.files[0]));\n [\"dragenter\", \"dragover\"].forEach((ev) =>\n stage.addEventListener(ev, (e) => {\n e.preventDefault();\n stage.classList.add(\"drag\");\n })\n );\n [\"dragleave\", \"drop\"].forEach((ev) =>\n stage.addEventListener(ev, (e) => {\n e.preventDefault();\n stage.classList.remove(\"drag\");\n })\n );\n stage.addEventListener(\"drop\", (e) => handleFile(e.dataTransfer.files[0]));\n window.addEventListener(\"paste\", (e) => {\n const item = [...(e.clipboardData?.items || [])].find((i) => i.type.startsWith(\"image/\"));\n if (item) handleFile(item.getAsFile());\n });\n}\n\n// ---------- init ----------\nbindControls();\nbindDropAndPaste();\nrebuildRowSelect();\nloadImage(defaultSprite, \"default sprite\");\n",[163],"79a2fde0-5e3b-11f1-b956-1607ee4eb77e","README.md","79a2feda-5e3b-11f1-b956-1607ee4eb77e",8,["D",1780374496179],"# 🎞️ sprite-animator\n\nA browser-based sprite-sheet animator. Loads a default sheet, lets you set the grid\n(columns × rows), pick a row to play, and scrub the walk cycle. Drag-drop, paste, or\nupload any other sheet to animate it instead.\n\n**Live:** \n\n## Use it\n- **Columns / Rows** — match the sheet's grid. Frame size is derived automatically.\n- **Play** — animate a single row, or `All` to run every frame left-to-right, top-to-bottom.\n- **Direction** — `Loop` or `Ping-pong` (good for 3-frame RPG-Maker-style cycles).\n- **Speed / Zoom** — fps and nearest-neighbour scale (pixels stay crisp).\n- **Upload / drag-drop / paste** an image to swap sheets. Click a thumbnail to freeze a frame.\n\nThe bundled default is a 4×4 sheet — rows are **down / up / left / right**.\n\n## How it works\n\n```mermaid\nflowchart LR\n B[Browser] -->|GET /| M[main.ts · Hono]\n M -->|index.html| B\n M -->|app.js| B\n M -->|style.css| B\n M -->|default-sprite.js| B\n subgraph client [app.js]\n L[requestAnimationFrame loop] --> C[\"canvas drawImage()
source-rect per frame\"]\n end\n B --> client\n```\n\n| File | Role |\n| --- | --- |\n| `main.ts` | Hono server — serves the static files, `/source` redirect |\n| `index.html` | Markup + controls |\n| `style.css` | Styles |\n| `app.js` | All animation logic (geometry, loop, strip, upload/paste) |\n| `default-sprite.js` | Bundled default sheet as a base64 data-URI |\n\n## Swap the default sheet\nReplace the data-URI string exported from `default-sprite.js`. Anything an\n`` can load works (PNG/JPEG/GIF/WebP, data-URI or URL).\n",[170],"pulls","branches","forks","envVars",{"_183":61,"_185":61},"connections",{"_183":61,"_184":61},"count","unfilledCount","emptyCount",{"_43":169,"_32":170,"_30":171,"_136":-5,"_41":42,"_40":172,"_138":25,"_38":208,"_13":61,"_33":20,"_35":174,"_24":25,"_142":-5,"_193":209,"_27":210},{"_43":162,"_32":163,"_30":164,"_136":-5,"_41":42,"_40":165,"_138":25,"_38":205,"_13":61,"_33":34,"_35":167,"_24":25,"_142":-5,"_193":206,"_27":207},{"_43":158,"_32":28,"_30":31,"_136":-5,"_41":42,"_40":14,"_138":122,"_38":202,"_13":160,"_33":34,"_35":37,"_24":25,"_142":-5,"_193":203,"_27":204},{"_43":151,"_32":152,"_30":153,"_136":-5,"_41":42,"_40":154,"_138":25,"_38":199,"_13":61,"_33":20,"_35":156,"_24":25,"_142":-5,"_193":200,"_27":201},{"_43":144,"_32":145,"_30":146,"_136":-5,"_41":42,"_40":140,"_138":25,"_38":196,"_13":61,"_33":148,"_35":149,"_24":25,"_142":-5,"_193":197,"_27":198},{"_43":133,"_32":134,"_30":135,"_136":-5,"_41":42,"_40":137,"_138":25,"_38":192,"_13":140,"_33":20,"_35":141,"_24":25,"_142":-5,"_193":194,"_27":195},["D",1780373431584],"children",[],[134],["D",1780372844180],[],[145],["D",1780373402599],[],[152],["D",1780374603199],[],[28],["D",1780373507028],[],[163],["D",1780374496179],[],[170],["D",1780372844162],{"_95":94,"_103":99},{"_95":94,"_96":97,"_98":99,"_18":55,"_100":101,"_102":25},{"_13":84,"_32":85,"_43":42,"_86":44,"_87":-5,"_88":-5,"_89":-5,"_90":-5,"_91":-5,"_92":45,"_93":94},"ctx",{"_77":-5,"_124":248,"_249":250,"_251":252,"_253":25,"_254":25,"_255":25,"_256":122,"_257":-5,"_258":-7,"_259":-7,"_260":61,"_261":25,"_262":25,"_263":-5,"_264":25,"_265":25,"_266":25,"_267":-5},"ENV",{"_219":220,"_221":222,"_223":85,"_224":225,"_226":227,"_228":229,"_230":231,"_232":233,"_234":235,"_236":237,"_238":239,"_240":241,"_242":243,"_244":245,"_246":247},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","e87eb04e707cf64e7e532c8e8ec395f209e17f15","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

Diff · v9