FNF Spritesheet to GIF — PNG + XML to Animated GIFs
Friday Night Funkin' characters come as a PNG plus a Sparrow XML full of names like "BF idle dance0000". Drop both files: every SubTexture becomes a frame, the name prefixes become animations, the trim offsets keep the character from jumping, and each animation exports as its own GIF, APNG or WebM.
A Friday Night Funkin' character is a PNG plus a Sparrow (Starling) XML atlas: each SubTexture is one frame, and frames that share a name prefix (BF idle dance0000, …0001) form one animation. Drop both files: Nerulio groups the prefixes into animations, keeps the trim offsets, and exports one GIF (or APNG, or WebM) per animation. The XML has no timing, so set each animation to the character's frameRate (24 fps when the character file gives none); a GIF stores 41.67 ms as 40 ms.
- Starling / Sparrow XMLVerified· Phaser 4.2
- GIF / APNGDecoded· Pillow
- Godot 4Verified· Godot 4.7.2
- Unity 6Verified· Unity 6000.5.3f1
- Phaser 3 / 4Verified· Phaser 3.90 + 4.2
- PixiJS 8Verified· PixiJS 8.21
- Aseprite JSONVerified· Phaser load.aseprite · PixiJS 8.21
- .asepriteVerified· Aseprite 1.3.18
- Spine / libGDXVerified· spine-canvas 4.2
- LÖVEVerified· LÖVE 11.5
- DefoldBuilt· Defold bob.jar 1.13.1
- GameMakerUNVERIFIED
- CSS spritesVerified· Chromium
How FNF describes a character's frames
The XML format comes from the Sparrow and Starling frameworks. Each SubTexture names a rectangle of the PNG (x, y, width, height). A trimmed frame adds frameX, frameY, frameWidth and frameHeight: the full frame size and where the trimmed rectangle sits inside it, written as negative numbers, so frameX="-3" means 3 px from the left. rotated="true" means the region was turned 90° clockwise on the sheet.
The game adds a JSON file per character in data/characters. With renderType sparrow, assetPath points at the PNG and XML (same name, no extension), and each animation lists a prefix (the SubTexture name without its frame number), a frameRate (24 by default) and optionally frameIndices, looped and offsets. The timing is therefore not in the XML.
Nerulio reads only the PNG and the XML. It groups names by stripping the trailing frame number, keeps every frame at its place inside frameWidth × frameHeight, and starts at 100 ms per frame. The character JSON is not read, so the rate, the frame subset and the loop setting are yours to set.
- SubTexture
- One frame: its name and its rectangle on the PNG.
- Prefix
- The animation name the game looks up: the SubTexture name without the trailing frame number.
- frameX / frameY
- Negative offsets of the trimmed rectangle inside the full frame.
- frameRate
- Frames per second of an animation in the character JSON; 24 when not given.
Example: one SubTexture and the timing maths
<SubTexture name="BF idle dance0003" x="1024" y="0" width="402" height="390"
frameX="-3" frameY="-2" frameWidth="408" frameHeight="394"/>
animation "BF idle dance", 4th frame (0003)
region 402 × 390 at (1024, 0) on the PNG
full frame 408 × 394, region drawn at (3, 2)
timing 24 fps → 1000 / 24 = 41.67 ms per frame
GIF 41.67 ms → 4 /100 s = 40 ms
14 frames 583 ms in the game → 560 ms in the GIF (4 % faster); APNG writes 42 ms → 588 msThe numbers are an illustration; your character's XML has its own. The rounding rule is fixed: GIF keeps whole hundredths, APNG whole milliseconds.
What maps to what
| In the XML / character JSON | In Nerulio | In the GIF |
|---|---|---|
| SubTexture name prefix | One animation per prefix, frames in natural order | One file per animation |
| x, y, width, height | The frame's region on the PNG | Frame pixels |
| frameX, frameY, frameWidth, frameHeight | Offset inside the full frame | Trimmed frames stay in place |
| pivotX, pivotY (if present) | Frame pivot; otherwise the bottom centre of the full frame | Frames aligned on the pivot |
| rotated="true" | Imported still turned; its export is UNVERIFIED | — |
| frameRate (character JSON) | Not read: frames start at 100 ms | Set it with Set all to fps before export |
| frameIndices, looped, offsets (character JSON) | Not read | Make a tag over the frames you need; repeat ×1 for a non-looping animation |
What it does
- SubTexture names grouped by prefix: "BF idle dance0000", "BF idle dance0001" … become the animation "BF idle dance", in natural order.
- frameX, frameY, frameWidth and frameHeight are kept, so every frame sits at its offset inside its full size.
- The XML has no timing, so frames start at 100 ms; Set all to fps retimes a whole animation at once. FNF mods often play at 24 fps (about 42 ms), but check your character file.
- One GIF per animation with the frames pivot-aligned and 1-bit transparency; APNG keeps soft edges exactly.
- The same frames can go on to Starling / Sparrow XML, Phaser, Godot or any other target.
How to do it
- Drop the character PNG and its .xml together.
- Read the Import panel: the frame count, how the names were grouped, frames lying outside the image.
- For each animation, select its tag and use Set all to fps in the Animation panel, or type milliseconds per frame.
- Press Enter to preview; onion skin (F3) shows whether the offsets line up.
- Open Pack & Export, choose Animated GIF (or APNG, or WebM video) and export: one file per animation.
Files you get
| File | What it is for |
|---|---|
bf_gif.zip | The download for the export name bf, with a folder bf_gif/. |
bf_gif/bf_BF_idle_dance.gif | One animation. Spaces and other characters outside letters, digits, dot and hyphen become _ in the file name. |
Match the game's timing, then export
- Open the character's JSON in
data/characters/and note, per animation, theprefix,frameRate(24 if missing),frameIndicesandlooped. - In Nerulio select the tag with that prefix and use Set all to fps with the
frameRate: 24 fps gives 41.67 ms per frame. - If the animation uses
frameIndices, drag a new tag over just those frames; ifloopedis false, set its repeat to ×1. - Press Enter to preview; onion skin (F3) shows whether the trimmed frames line up.
- Open Pack & Export, choose Animated GIF (or APNG for exact colours and soft edges) and export: one file per animation.
Check the result
- The number of frames in a GIF equals the number of SubTextures with that prefix, or the length of
frameIndices. - A 14-frame animation at 24 fps loops about every 0.56 s in the GIF (14 × 40 ms).
- Step with
,and.: the character's feet stay in place when the offsets were read correctly.
Sparrow XML attributes and what the Studio does with them
| XML attribute | What the Studio does |
|---|---|
| TextureAtlas imagePath | pairs the XML with its PNG |
| SubTexture name | frame name; the part before the trailing digits names the animation |
| x, y, width, height | the frame's region on the sheet |
| frameX, frameY | where that region sits inside the full frame (the XML stores them as negative numbers) |
| frameWidth, frameHeight | the full frame size, so every frame keeps its place |
| rotated="true" | imported still turned; its export is UNVERIFIED |
| pivotX, pivotY | the frame pivot, when present |
| no timing attribute | 100 ms per frame until you set it |
Troubleshooting
| Symptom | Likely cause | How to check | Fix |
|---|---|---|---|
| The GIF plays at the wrong speed | Sparrow XML has no timing, so every frame started at 100 ms | The Frame panel shows 100 ms | Set all to fps with the JSON's frameRate (24 by default) |
| Two animations merged into one | Their prefixes differ only by a trailing digit: left20000 reads as prefix left, frame 20000 | Import panel: how the names were grouped | Drag tags on the Timeline to split the frames by hand |
| Some frames are sideways | Their SubTexture has rotated="true"; the Studio keeps them as they lie on the sheet | Search the XML for rotated | Repack the character without rotation in the tool that made it; exporting rotated frames is UNVERIFIED |
| Frames are missing | Their rectangles lie outside the PNG, usually an XML from another version of the sheet | The Import panel counts frames outside the image | Use the PNG that belongs to this XML |
| Colours band or look posterised | Hi-res FNF art has far more than 255 colours; GIF's palette is reduced by median cut without dithering | The export note “More than 255 colours” | Export APNG (exact) or WebM video |
Other ways to do it
| Option | When it is the better choice |
|---|---|
| APNG from the same export | Exact colours, soft edges and millisecond timing: 24 fps becomes 42 ms per frame instead of 40. |
| Repack as Sparrow XML | You want to change or repack the character for the game rather than share a preview. |
| Record the game itself | You need the character with in-game offsets, camera and music. |
Engine exports and how each was checked
"Verified" means the exported files were loaded by the real engine or tool on real CC0 assets and the result was compared with the source. Anything that was not loaded is labelled as such.
| Target | Files | Check |
|---|---|---|
| Godot 4 | .tres SpriteFrames · .tscn AnimatedSprite2D · .png.import | Verified Godot 4.7.2Loaded by Godot; every animation frame drawn and compared with the source file. The scene uses Nearest filtering; rotation is never used. |
| Unity 6 | .unity.json · Editor/NerulioSpriteImporter.cs · AnimationClip | Verified Unity 6000.5.3f1Batch mode: sprite rects, pivots, pixels, clip keys and durations checked. |
| Phaser 3 / 4 | atlas JSON (multiatlas) · .anims.json | Verified Phaser 3.90 + 4.2Frames and animations drawn by both versions. |
| PixiJS 8 | spritesheet JSON · animations · anchor · meta.scale | Verified PixiJS 8.21Rotated and multi-page atlases included. |
| Aseprite JSON | hash / array · frameTags · slices | Verified Phaser load.aseprite · PixiJS 8.21Tags keep their direction and repeat count. |
| .aseprite | layers · tags · durations · slices | Verified Aseprite 1.3.18Opened and rendered by the Aseprite command line. |
| Spine / libGDX | .atlas | Verified spine-canvas 4.2Every region drawn by the Spine runtime, rotated and trimmed; libGDX itself was not run. |
| Starling / Sparrow XML | XML per page | Verified Phaser 4.2Phaser 3.90 draws trimmed XML frames wrongly (its own bug); the "Sparrow XML (Phaser 3)" preset turns trim off and passes in 3.90 and 4.2. |
| LÖVE | Lua quads · nerulio_atlas.lua · main.lua | Verified LÖVE 11.5Every frame drawn and every animation stepped through the shipped helper. |
| Defold | .atlas · .tilesource | Built Defold bob.jar 1.13.1Built by Defold's command-line builder; the built texture's UVs were read back. |
| GameMaker | spr_<name>_stripN.png · gamemaker.json | UNVERIFIEDNot loaded in GameMaker (no headless GameMaker). The strips are cut the way its strip importer cuts them. |
| CSS sprites | .css · preview .html | Verified ChromiumEvery class drawn from the shipped stylesheet. |
| GIF / APNG | one file per animation | Decoded PillowEvery frame and delay decoded again after export; APNG is exact. |
Evidence
GIF decoder: 408 of 408 frames identical to Pillow on 29 real GIFs; APNG 132 of 132 on 16 files. .aseprite: 231 corpus files imported, re-written and reopened in Aseprite 1.3.18 with the same tags, durations and pixels (231/231). Exports: 49 runs in the real engines on real CC0 assets, 47 pass — the 2 failures are Phaser 3.90's trimmed-XML bug, which the Phaser 3 preset avoids.
Limits
- The character JSON (
frameRate,frameIndices,looped,offsets) is not read. - Adobe Animate texture atlases (
animateatlas) and Packer TXT sheets are not read; only Sparrow XML. - No real FNF character is part of the recorded checks.
- A grid or island guess is a preview with a confidence; nothing is cut until you press Apply, and every choice has one-click alternatives.
- .aseprite files whose layers do not compose exactly (e.g. group opacity) are imported flattened, and the Import panel says why.
- Rotated frames in an imported atlas stay rotated; their export is UNVERIFIED.
- Images up to 32,768 px per side (268 million pixels), subject to your browser's memory.
Versions and sources
The XML reader is the Studio's general atlas importer, run on real assets through the UI (atlas data included); no actual FNF character is part of the recorded checks, and rotated frames stay UNVERIFIED. GIF output is checked by decoding with Pillow. The format description follows the Starling documentation; the character fields follow the official Friday Night Funkin' modding documentation.
Official documentation used
Questions
Why does the GIF play at the wrong speed?
Sparrow XML stores no timing, so every frame starts at 100 ms. Set the rate your mod uses. GIF stores hundredths of a second, so 24 fps (41.7 ms per frame) is written as 4 hundredths and the export lists the rounding; APNG stores milliseconds.
Some frames come out sideways. Why?
SubTextures marked rotated="true" are imported as they lie on the sheet, still turned, and exporting them is UNVERIFIED. If you have the source frames, pack them again without rotation.
Can I turn the FNF spritesheet into PNGs?
APNG writes one animated PNG per animation with every pixel exact, and every Pack & Export target writes a repacked PNG sheet with its data file.
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).