Video to Sprite Sheet Maker
Turn Video into Game-Ready Sprite Sheets
Film it once, animate it forever. Drop in any video clip and get a game-ready sprite sheet: one PNG grid plus JSON frame data that Unity and Godot understand. Free, no signup, nothing uploaded — your footage never leaves your browser.
PNG + JSON
One grid image plus frame coordinates for Unity & Godot.
100% Private
Built in your browser — your video is never uploaded.
Game-Ready
Uniform square cells, edge-to-edge, no labels.
What Is a Sprite Sheet, and Why Do Game Developers Need One?
A sprite sheet packs every frame of an animation into a single image, arranged in a uniform grid, accompanied by data that says where each frame lives. Instead of loading thirty-two separate PNGs for a walk cycle, a game engine loads one texture and steps through its cells over time. That single-texture approach renders faster, uses less memory, and keeps an animation's frames organized as one asset instead of a folder of loose files.
Traditionally, sprite sheets were drawn frame by frame by pixel artists — beautiful, but slow. Video changed the economics: film a motion once — a hand wave, a bouncing ball, smoke rising, a character turning — and convert the footage into frames. Each sampled frame becomes one cell of the sheet. What took an artist a day takes a camera ten seconds, and the result drops straight into Unity, Godot, GameMaker, or any engine that reads sprite grids.
This maker automates the whole conversion. It samples your clip at even intervals, crops every frame to an identical square (the uniform cell size engines expect), tiles the cells edge-to-edge with no gutters or labels, and writes a JSON sidecar file mapping each frame to its exact rectangle. You download two files — the PNG and the JSON — and you have a complete, engine-ready sprite sheet.
How to Make a Sprite Sheet from Video Online
- 1
Load your video
Drag and drop an MP4, MOV, or WEBM clip. It is decoded locally in your browser — nothing is uploaded.
- 2
Choose frame count
Pick 8, 16, 24, or 32 frames. Simple loops read well at 8; smoother actions want 16–24.
- 3
Set columns and frame size
Columns (2–6) control the grid shape; frame size (128, 256, or 512 px) sets each cell’s resolution. The sheet dimensions update accordingly.
- 4
Generate the sheet
Frames are sampled evenly across the clip, center-cropped to uniform squares, and tiled edge-to-edge into one PNG.
- 5
Download PNG + JSON
Get the sprite sheet image and its JSON frame-data file together, then import both into your engine.
What Game Developers Use Video Sprite Sheets For
Character Animation Loops
Film an actor walking, jumping, or attacking against a plain background, then convert the motion into a loopable sheet. Indie teams get realistic human motion without hand-drawing dozens of frames or buying motion-capture rigs.
Effects & Particles
Explosions, smoke, muzzle flashes, and magic effects are notoriously hard to draw convincingly. Real footage of fire, water, or dust converts into organic-looking effect sheets that read far better than procedural approximations.
2D Animation & Cutscenes
Rotoscoping — tracing over live footage — is a century-old animation technique. A video sprite sheet is its digital shortcut: the footage itself becomes the animation frames, ready to drop into a 2D pipeline or visual-novel engine.
Prototyping & Placeholders
Need animated placeholders while final art is in production? Convert stock or phone footage into temp sheets in minutes. Gameplay code gets built against real timing data, and artists replace the sheets later without touching the animation logic.
Understanding the JSON Frame Data
The PNG is only half the sprite sheet — the JSON tells software where each frame is. Every download includes a file like this, describing the exact rectangle of each cell:
{
"image": "walk_cycle_spritesheet.png",
"frameWidth": 256,
"frameHeight": 256,
"columns": 4,
"rows": 4,
"frameCount": 16,
"frames": [
{ "name": "frame_0000", "index": 0, "x": 0, "y": 0, "w": 256, "h": 256 },
{ "name": "frame_0001", "index": 1, "x": 256, "y": 0, "w": 256, "h": 256 },
{ "name": "frame_0002", "index": 2, "x": 512, "y": 0, "w": 256, "h": 256 },
...
]
}Frames run left-to-right, top-to-bottom, so frame order is animation order — play cells 0 through 15 in sequence and you replay the sampled motion. Because cells are uniform squares with no gutters, most engines can also auto-slice the sheet on the grid alone; the JSON exists for the cases where you need exact rectangles, like custom importers or web-based sprite renderers.
Sprite Sheet vs. Frame Extraction vs. Contact Sheet
All three start by pulling stills from video, but they serve different masters. Frame extraction gives you individual image files — one per frame — for editing, compositing, or datasets. A contact sheet composites frames into one labeled grid for human review: footage scanning, storyboards, archiving.
A sprite sheet is the machine-readable variant: edge-to-edge cells, no labels, uniform squares, plus coordinate data — built for software to consume, not people to read. If a person needs to look at the footage, make a contact sheet. If your game engine needs to play the footage, make a sprite sheet.
Tips for Game-Ready Sprite Sheets
Shoot against a plain background
Cells are small — busy backgrounds turn to noise at 128 px. A solid backdrop keeps the subject readable and makes the sheet far easier to work with in-engine.
Keep the camera locked off
A static camera means only the subject moves between frames, which is exactly what sprite animation wants. Camera shake becomes jitter in every cell.
Mind the texture budget
16 frames at 256 px in 4 columns is a 1024×1024 texture — comfortable. 32 frames at 512 px is 4096×2048, which strains mobile GPUs. Match cell size to how big the sprite appears on screen; bigger is not always better.
Video frames have no transparency
An honest limitation: unlike hand-drawn sprites, video frames are opaque rectangles. If you need transparency, key out the background in an editor after download, or composite the sheet over matching background colors in-engine.
Browser Processing Notice
No server upload required. The sheet is composited in your browser, so very long videos or 4K sources depend on your device memory. For game sprites, short clips work best anyway — trim to the motion you need before generating.
More Free Frame Tools
Frequently Asked Questions
What is a sprite sheet?▼
A sprite sheet is a single image that packs many animation frames into a uniform grid, plus data describing where each frame sits. Game engines load one texture instead of dozens of separate images, which is faster to render and easier to manage. A walk cycle, an explosion, a character idle animation — each becomes one PNG plus a list of frame rectangles the engine steps through over time.
How do I make a sprite sheet from a video?▼
Load your video into the tool above and choose how many frames the sheet should hold (8, 16, 24, or 32), how many columns the grid uses, and the pixel size of each frame cell. Click Generate Sprite Sheet: the tool samples frames evenly across the video, center-crops each to a uniform square, tiles them edge-to-edge into one PNG, and writes a matching JSON file with every frame’s x, y, width, and height. Download both files — that is your complete sprite sheet.
What is inside the JSON frame data file?▼
A plain-text map of the sheet: the image filename, frame width and height, column and row counts, the seconds between sampled frames, and a frames array where each entry has a name (frame_0000, frame_0001, …) plus its x, y, w, and h rectangle in pixels. It also includes short usage notes for Unity and Godot. Any engine or script that can read JSON can slice the PNG using these rectangles.
How do I use the sprite sheet in Unity?▼
Import the PNG into your Assets folder, select it, and set Texture Type to Sprite (2D and UI) with Sprite Mode set to Multiple. Open the Sprite Editor and slice the sheet: because every cell is a uniform square, you can use the automatic grid slice with the cell size you chose (128, 256, or 512 px), or enter the exact x/y/w/h rectangles from the JSON for precision. The sliced sprites can then drive a 2D animation clip.
How do I use the sprite sheet in Godot?▼
Add an AnimatedSprite2D node, create a new SpriteFrames resource, and add the PNG as a frame strip. In the import dialog Godot lets you define the grid: set the horizontal and vertical frame counts to match the columns and rows you chose (the JSON records both). Godot slices the sheet automatically, and you can preview and time the animation right in the editor.
How many frames should my sprite sheet have?▼
Match the motion, not the video length. A simple loop like a walk cycle or spinning coin reads well at 8 frames. Smoother actions — a jump, an attack swing, a particle burst — want 16 to 24. 32 suits longer or more detailed sequences. Remember the sheet grows with the frame count: 16 frames at 256 px in a 4-column grid is a 1024×1024 texture, a comfortable size for most engines. Start small; you can always regenerate with more frames.
What video formats work with the sprite sheet maker?▼
Anything your browser can play: MP4, MOV, and WEBM work best. The frames are sampled from the decoded video, so quality depends on your source — a crisp, well-lit clip with a steady camera produces far cleaner sprites than shaky, compressed footage. For character animation, footage shot against a plain background crops and reads best in small cells.
Is the sprite sheet maker really free? Is my video uploaded anywhere?▼
Yes to free, no to uploading. The entire pipeline — decoding, frame sampling, grid compositing, PNG and JSON encoding — runs locally in your browser with JavaScript and canvas. Your footage never leaves your device, there is no account, no watermark, and no limit on how many sheets you generate. That also means unreleased game footage and client work stay private by design.