What a spritesheet is and why you need to separate frames

A spritesheet is a single image file that contains many smaller pictures arranged in a grid — in Friday Night Funkin' (FNF), one spritesheet might hold all 12 frames of a character's idle animation, or all 20 frames of a dance move. When the game runs, it displays each frame in sequence to create the illusion of movement.

You need to extract individual frames when you want to edit them separately — to change a character's colors, fix a drawing mistake in one pose, or create a new animation by mixing frames from different spritesheets. Most image editors cannot work on a spritesheet as-is; they need you to isolate each frame first.

The process involves three steps: opening the spritesheet in an image editor, identifying where each frame begins and ends, and saving each one as its own file. The tools are free and the method is the same whether you are working with a character, a background object, or a stage prop.

Key Takeaways

  • A spritesheet is a grid of animation frames in one image file, and you must separate them before editing individual poses.
  • Free tools like Aseprite (paid but has a free trial), GIMP, or Photoshop can all extract frames if you know the pixel dimensions of each one.
  • FNF spritesheets usually follow a standard layout — find the frame width and height by dividing the total image size by the number of rows and columns.
  • The fastest method is to use the crop tool to select one frame at a time, then export it as a separate PNG file with a numbered name.
  • If the spritesheet has transparency (a checkered background in your editor), make sure your export settings preserve it so frames blend correctly in the game.

Finding the frame dimensions of your spritesheet

Before you can extract frames, you need to know how wide and tall each one is. Open your spritesheet in any image editor — GIMP (free), Photoshop, or Aseprite all work. Look at the full image size, usually shown in the title bar or in the Image menu under Canvas Size or Image Properties.

Count how many frames appear across the top row and how many rows exist in total. If the spritesheet is 1200 pixels wide and has 4 frames across, each frame is 300 pixels wide (1200 ÷ 4). If it is 800 pixels tall and has 3 rows, each frame is about 267 pixels tall (800 ÷ 3). Write these numbers down — you will use them for every frame you extract.

Some FNF spritesheets are not perfectly square or evenly spaced. If the numbers do not divide evenly, look at the actual space between frames in the image and measure manually. Zoom in to 200% or 300% so you can see the pixel grid clearly, then count the empty space between one frame and the next.

Using the crop tool to isolate each frame

The crop tool is the fastest way to extract frames one at a time. In GIMP, select the Rectangle Select Tool (the dotted rectangle icon in the toolbox). In Photoshop, use the Crop Tool directly. Set the tool options to use fixed dimensions — enter the frame width and height you calculated in the previous step.

Click on the top-left corner of the first frame and drag to select it. The selection should snap to exactly the size you specified. If your editor has a "Fixed Size" or "Constrain" option, turn it on so every selection is identical. Once the frame is selected, go to Image menu and choose Crop to Selection (GIMP) or Crop (Photoshop).

Now you have a single frame isolated. Before you move to the next one, export this frame as a PNG file with a numbered name like "character_idle_01.png". Go to File > Export As, choose PNG format, and save it to a folder you created for extracted frames. Do not use File > Save, which saves in the editor's native format and overwrites your work.

Extracting multiple frames without losing the original

If you crop the spritesheet directly, you will destroy it after the first frame. Instead, make a duplicate of the spritesheet for each frame you extract. In GIMP, go to Image > Duplicate. In Photoshop, go to Image > Duplicate. This creates a copy you can crop without touching the original.

Open the duplicate, crop it to the first frame, export it, then close the duplicate without saving. Go back to the original spritesheet, duplicate it again, crop to the second frame, and repeat. This takes longer than using a script, but it is reliable and works in any editor.

If you have many frames to extract (20 or more), consider using Aseprite, which has a built-in "Export Sprite Sheet" feature that can reverse the process — it can split a spritesheet into individual files automatically if you tell it the frame size. Aseprite costs money, but it includes a free trial long enough to extract a full spritesheet.

Preserving transparency so frames work in the game

FNF characters and objects use transparency — the areas around the drawn character are invisible so the background shows through. In your image editor, transparent areas appear as a checkered pattern. When you export each frame, you must keep this transparency intact or the frame will have a solid background that covers the game world.

In GIMP, go to File > Export As, choose PNG format, and click Export. In the PNG export dialog, make sure "Save background color" is unchecked. In Photoshop, go to File > Export As, choose PNG, and in the export options make sure transparency is enabled (it usually is by default for PNG).

After you export, open the PNG file in your editor to verify the checkered pattern is still there. If you see a white or solid background instead, re-export with transparency enabled. This is the most common mistake — frames that look correct in the editor but appear with a white box around them in the game.

Organizing and naming extracted frames

Create a folder for each animation or character, then name the extracted frames in a way that makes sense when you sort them alphabetically. Use a format like "idle_01.png", "idle_02.png", "idle_03.png" rather than "frame1.png", "frame2.png", because the numbers will sort correctly and you will know which animation each frame belongs to.

If you extracted frames from multiple spritesheets — say, one for idle, one for attack, one for hurt — use a prefix that tells them apart: "idle_01.png", "attack_01.png", "hurt_01.png". When you import them back into FNF or another game engine, the names will help you find the right frame quickly.

Keep the original spritesheet file in a separate folder labeled "source" or "originals". If you need to re-extract frames later or make changes, you will have the original to work from instead of trying to reconstruct it from individual frames.

Frequently Asked Questions

What if the spritesheet has frames of different sizes?

Some spritesheets do not use a uniform grid — a jumping animation might have taller frames than an idle animation. Measure each frame individually and extract them one at a time using the crop tool with custom dimensions for each one. This is slower but necessary if the frames are not all the same size.

Can I use an online tool to split spritesheets automatically?

Yes — websites like Sprite Sheet Splitter or Aseprite's online converter can split a spritesheet if you tell them the frame width and height. Upload your spritesheet, enter the dimensions, and read a ZIP file with all frames extracted. This is faster than doing it manually in an editor, though you still need to know the frame size first.

Why do my extracted frames have a white background instead of transparency?

You exported as JPEG instead of PNG, or you did not enable transparency in the export settings. JPEG does not support transparency — always use PNG. Open the frame again, go to File > Export As, choose PNG format, and make sure transparency is enabled before you save.

Do I need to edit each frame separately, or can I edit them all at once?

If you want to make the same change to every frame — like adjusting the color or brightness — you can edit the original spritesheet before extracting. If you want to change only one frame, extract it first, edit it, and then re-import it into the spritesheet or use it as-is in your game project.

What happens if I crop the spritesheet wrong and cut off part of a frame?

The frame will look incomplete or cut off in the game. If this happens, undo the crop (Ctrl+Z or Cmd+Z), measure the frame dimensions again, and try once more. If you already exported the bad frame, delete it and re-extract using the correct dimensions from the original spritesheet.