How to Move Individual Frames in an FNF Spritesheet

Friday Night Funkin' modding has a surprisingly active creative community, and one of the most common technical hurdles new modders hit is manipulating spritesheets — specifically, repositioning individual frames without breaking the entire animation. Whether you're fixing an off-center idle pose or rebuilding a character from scratch, understanding how FNF spritesheets work is the foundation for doing it right.

What Is an FNF Spritesheet, Actually?

An FNF spritesheet is a single image file (usually a .png) that contains every animation frame for a character or object laid out in a grid or freeform arrangement. It's paired with an XML file (sometimes a .json) that maps each frame by name, position, and size — telling the game engine exactly where to find each frame within that image.

The engine FNF uses (HaxeFlixel) reads the XML to locate frames at runtime. So when you "move" a frame, you're not just dragging pixels — you're also updating the coordinate data in that paired data file. Miss that step, and the game will still try to render the frame from the old position, producing glitches or blank sprites.

The Two Parts You Always Edit Together

Editing one without the other is the most common mistake beginners make. Always treat them as a paired set.

Tools Used to Move FNF Spritesheet Frames

Adobe Animate / Flash-Based Workflows

The "original" FNF pipeline was built around Adobe Animate, which exports spritesheets and XML simultaneously. If you're working in Animate, you move frames on the canvas and re-export — the XML regenerates automatically. This is the cleanest workflow but requires a paid tool and some familiarity with timeline-based animation.

Texture Packer

TexturePacker is a dedicated spritesheet tool that lets you import individual frame images, arrange them, and export a packed spritesheet with a matching data file. If you want to reposition a frame, you adjust its source image or padding settings and re-pack. It supports the Sparrow/Starling XML format that FNF uses natively.

Free Spritesheet Tools (Shoebox, Free Texture Packer)

Free Texture Packer is a no-cost alternative that handles the same XML export format. Shoebox can unpack and repack sheets. These are popular with modders who want to avoid subscription software. Functionality is similar, though the interface is less polished.

Manual XML Editing

For small adjustments — nudging a frame a few pixels, fixing an offset — some modders skip the visual tools entirely and edit the XML directly in a text editor. Each frame entry looks something like this:

<SubTexture name="BF idle dance0000" x="0" y="0" width="194" height="204" frameX="-3" frameY="0" frameWidth="200" frameHeight="204"/> 

The x and y attributes are where the frame sits in the spritesheet image. The frameX and frameY attributes handle character offset within the frame bounds — this is where a lot of positioning errors originate. Adjusting frameX/frameY can shift how a character appears in-game without moving anything in the image itself.

🎮 Understanding Frame Offsets vs. Frame Position

This distinction trips up a lot of modders:

• Frame position (x, y in the XML): Where the frame crop starts on the .png image.
• Frame offset (frameX, frameY): How the cropped frame is positioned relative to the sprite's origin point in-game.

Moving a frame in the image requires updating x and y. Fixing how a character "sits" in an animation without touching the image usually means adjusting frameX and frameY. Many visual glitches — characters floating, limbs misaligned, sprites snapping to wrong positions — trace back to offset values rather than actual image positioning.

Step-by-Step: Moving a Frame Using Free Texture Packer

1. Unpack your existing spritesheet using a tool like Shoebox to extract individual frame images.
2. Modify the frame you want to reposition (resize its canvas, adjust padding, or move its content).
3. Re-import all frames into Free Texture Packer.
4. Set the export format to Sparrow (XML) to match FNF's expected format.
5. Re-export the .png and .xml together.
6. Replace both files in your mod's assets folder.
7. Test in-game and check for offset issues — adjust frameX/frameY in the XML if the character's position feels off.

Variables That Affect How This Goes for You

Not every modder is starting from the same place, and the process varies significantly depending on a few factors:

• Source format: Did the original mod use XML or JSON? Some FNF engines and forks (Psych Engine, Kade Engine, etc.) handle atlas formats differently.
• Tool familiarity: Manual XML editing is faster if you're comfortable with code. Visual tools are more forgiving if you're not.
• Frame count and complexity: A simple 4-frame idle is easy to repack. A multi-hundred-frame boss character with freeform packing is a different challenge.
• Which FNF engine fork you're modding: Psych Engine, for example, has its own offset editor built into the debug menu, which can save you from manual XML tweaking for positioning adjustments specifically.
• Whether you have the original source files: Modding from exported assets only (no original Animate files) means you're always working upstream — unpacking first, then repacking.

The right approach depends heavily on your engine, your source files, and how many frames you're moving. What's a two-minute XML fix for one setup can be a full repack workflow for another. ✏️