GDevelop Sprite Sheet — Cut It into Frame Images First
GDevelop's sprite object builds each animation from separate images, one per frame, so a single sprite sheet has to be cut before you can use it. The classic Sprite Lab finds the frames, lets you fix any box, and downloads a ZIP with one PNG per frame, numbered in order and ready to add to an animation.
A GDevelop sprite object builds each animation from separate images, one per frame, so a sprite sheet has to be cut first. Nerulio has no GDevelop export: what it gives you is plain PNG frames. Its Sprite Lab measures the grid and downloads a ZIP with one equal-size PNG per frame, numbered in reading order (hero_001.png …). In GDevelop you add one row's images to each animation, set the time between frames in seconds (1 ÷ FPS; the default is 0.08 s) and turn loop on. Nothing here was loaded in GDevelop; its steps come from the GDevelop wiki.
- Frame PNGsMeasured· Pillow
What GDevelop expects from a sheet
In GDevelop a Sprite object has animations, and each animation is a list of images played in the order shown. Every animation has one value for the time between two frames, in seconds (0.08 s by default), and a loop toggle; without loop an animation plays once and stops on its last frame. Animations get names that your events use with "Change the animation (by name)".
The editor itself does not slice a PNG into frames. GDevelop offers two ways around that: the built-in Piskel editor can import a sprite sheet for one animation whose frames are evenly spaced, and the Sprite Sheet Animations extension animates a Tiled Sprite from a sheet by rows and columns or from a TexturePacker pixi.js-style JSON. Otherwise you import frame images.
Every sprite starts with an Origin point at the top-left corner of the image (it positions the object) and a Center point at half the image size (it rotates and flips around it). If the frame images of one animation differ in size, those points fall on different parts of the art and the character shifts; equal-size frames avoid that, and GDevelop can share the same points across all images of an animation.
Nerulio's part is the cutting. In Grid mode the Sprite Lab measures cell size, margin and spacing, so every PNG has the cell's size; Auto mode finds sprites separated by transparency on an uneven sheet, and its Normalize step puts them on one common canvas. Pixels are copied, not redrawn, and a colour key can clear an opaque backdrop first. The ZIP carries no timing, names or hitboxes.
- Time between frames
- GDevelop's per-animation frame time in seconds; 1 ÷ FPS.
- Loop
- Off by default: the animation plays once. On: it repeats.
- Origin / Center
- Default sprite points: top-left corner, and half the image size.
- Scale mode (Sampling)
- Project setting; "nearest" keeps pixel art sharp.
Worked example: a three-row sheet
hero.png 512 × 192 px: 3 rows (idle, run, attack) × 8 columns of 64 × 64
Sprite Lab, Grid: cell 64 × 64 → hero-frames.zip with 24 PNGs of 64 × 64
hero_001 … hero_008 = idle hero_009 … hero_016 = run hero_017 … hero_024 = attack
GDevelop sprite object "Hero": 3 animations of 8 images
run at 12 FPS → time between frames = 1 / 12 = 0.083 s
idle at 100 ms → 0.1 s GDevelop default 0.08 s = 12.5 FPS
Origin (0, 0) top-left Center (32, 32) = half of 64 × 64One run cycle then takes 8 × 0.083 ≈ 0.67 s. A frame that should hold twice as long can be added twice, because one animation has only one frame time.
What it does
- Grid mode measures cell size, margin and spacing, so every PNG comes out the same size and the frames stay lined up when GDevelop plays them.
- Auto mode finds sprites separated by transparent gaps on an uneven sheet and keeps small detached parts, such as a hat or a sword, with their body.
- Files are named after the sheet with a zero-padded number (hero_001.png, hero_002.png …), so a file picker lists them in frame order.
- Pixels are copied, not redrawn: each PNG was measured equal to the box outlined on the sheet, with nothing scaled or smoothed.
- A colour key under Advanced clears an opaque backdrop, such as magenta, before the frames are cut.
- Scope, stated plainly: we did not open these files in GDevelop; the steps in the table are GDevelop's usual ones.
How to do it
- Drop the sprite sheet on the Sprite Lab.
- Choose Grid for an even sheet, or Auto for an uneven one, and look over the boxes.
- Drag or type any box that is off, and keep the frames in reading order.
- Download the frame PNGs as a ZIP and unzip it.
- In GDevelop, add one animation's images to the sprite object in order, set the time between frames and turn loop on or off.
Files you get
The classic Sprite Lab's frames download (not a GDevelop export):
| File | What it is for |
|---|---|
hero-frames.zip | One PNG per frame, named after the sheet. |
hero_001.png … | Frames in reading order, zero-padded to at least three digits so a file picker keeps them in order; each PNG is the cell size in Grid mode. |
Build the animations in GDevelop (from the GDevelop wiki; not run here)
- Unzip the frames. In GDevelop, add a new object, choose Sprite and name it.
- Click Add an animation and give it a name (idle). Add images and select
hero_001tohero_008together; GDevelop plays them in the order shown. - Set the time between frames next to the clock icon: 1 ÷ FPS in seconds, for example 0.1 for 10 FPS.
- Turn loop on for idle and run; leave it off for a one-shot attack.
- Repeat for each row, then switch animations in events with "Change the animation (by name)".
- For pixel art, set the project's Scale mode (Sampling) to nearest in the game properties.
- If the object should stand on its feet, move the Origin point in Edit points and keep the points shared by all images of the animation.
Check the result
- Each animation lists its images in file order: idle 001–008, run 009–016, attack 017–024.
- In the preview the run cycle takes about 0.67 s at 0.083 s per frame.
- The character does not shift between frames: all images are 64 × 64.
- Zoomed in, pixel edges stay hard with Scale mode nearest.
From the ZIP to a GDevelop animation
| Step in GDevelop | What you use from the ZIP | Tip |
|---|---|---|
| Add the frame images in order | The PNGs of one row, e.g. hero_001 to hero_008 | Zero-padded names keep the order in the file picker |
| One animation per action | One group of files per row of the sheet | Name each animation the way your events refer to it |
| Set the time between frames | Your frame time in seconds, e.g. 0.1 for 10 fps | The ZIP holds no timing; one value covers the whole animation |
| Loop | On for idle and walk cycles, off for one-shot attacks | Decide it per animation |
| Frame size | Every PNG the same size when cut by Grid | Mixed sizes are what make a character shift |
Nothing here was run in GDevelop; the rows name the usual steps of its object editor. The PNGs themselves were measured equal to their boxes on the sheet.
Troubleshooting
| Symptom | Likely cause | How to check | Fix |
|---|---|---|---|
| The animation plays once and stops | Loop is off by default | The loop toggle of that animation | Turn loop on |
| Frames play in the wrong order | Files were picked in another order, or names without zero padding sort 1, 10, 2 | Image order in the animation | Use the zero-padded names from the ZIP, and reorder images if needed |
| The character wobbles | The frames have different sizes (cut by Auto), so origin and center land on different art | Compare the image sizes | Cut with Grid, or run Normalize before downloading; share points across the animation |
| Sprites are blurry | Scale mode is linear | Game properties › Scale mode | Set it to nearest |
| An uneven GIF timing plays evenly | One animation has one time between frames | Compare with the source delays | Add long frames twice, or split the action into two animations |
| Piskel's import cuts the sheet wrong | Its frame size does not match, or the sheet holds several animations | The frame boxes in Piskel's Import and Merge window | Enter the real frame size for one animation, or cut with the Sprite Lab; see frame size |
Other ways to do it
| Option | When it is the better choice |
|---|---|
| GDevelop's built-in Piskel: Import as Sprite sheet | One animation with evenly spaced frames: no other tool, and the frames land in the animation directly. |
| The Sprite Sheet Animations extension | You want to keep one image on a Tiled Sprite and drive frames by row and column or from TexturePacker's pixi.js JSON. Nerulio's PixiJS export writes a similar frames + animations layout, but it was never tried with this extension. |
| Separate frames for any tool | The same cutting, explained for every engine: sprite sheet to PNG frames. |
Outputs and how each was checked
"Measured" means the downloaded file was opened again outside the page (Pillow, numpy or an independent parser) and the property was measured. Loading these files in a game engine was not tested.
| Target | Files | Check |
|---|---|---|
| Frame PNGs | <sheet>-frames.zip (one PNG per frame) | Measured PillowEvery frame PNG equals its outlined box on the sheet (Chromium and Firefox). No position data in the ZIP. |
Evidence
Frames re-read from the ZIP equal their regions of the source sheet pixel for pixel.
Limits
- Nerulio has no GDevelop export: only PNG frames, without timing, names or hitboxes.
- Nothing was loaded in GDevelop; the GDevelop steps come from its wiki.
- One time between frames per GDevelop animation: uneven timing needs repeated frames.
- The classic Lab has no timeline or tags; use the Studio for animations.
- Frames are cut by alpha islands or a grid you confirm.
- Very large sheets are sliced in bands; the page shows progress.
Versions and sources
Nerulio's part: the Sprite Lab cuts the sheet and every PNG in the ZIP was measured equal to its box on the sheet, with nothing scaled or smoothed. GDevelop was not run. The object, animation, loop, frame-time, points, Piskel and Scale mode details come from the GDevelop 5 wiki.
Official documentation used
Questions
Why cut the sheet outside GDevelop?
Its sprite animations are made of individual frame images. Cutting here gives you those images with exact pixels and a predictable order, and you can check every box before a file is written.
One sheet holds several animations. How do I split them?
Download the ZIP once. The files follow the sheet's reading order, row by row, so in GDevelop you create one animation per row (idle, walk, attack …) and add that row's files to it.
My animation wobbles after import.
Frames of different sizes can shift against each other when they play. Cut with Grid to get equal boxes, or run the Normalize step to put every frame on one common canvas before you download.
Does the ZIP carry timing or hitboxes?
No, only the PNGs. Timing and collision masks are set in GDevelop. If you also need an engine atlas with per-frame timing for Godot, Unity or Phaser, open the same sheet in the Studio.
Is it free, and do I need an account?
Everything on these pages is free and works without an account. There is no watermark and no export that is held back.
Are my sprites uploaded?
No. The Studio decodes, packs and exports in this browser tab. Projects are autosaved in the browser (IndexedDB) and can be saved as a .nerulio file.
Does it need Aseprite or an engine plugin installed?
No. .aseprite files are read and written in the browser, and each engine bundle carries what that engine needs (for Godot, the import settings and scene; for Unity and the Godot TileSet, a small editor script).