Spritesheet slicing tool

two in one spritesheet slicing and spritesheet player tool

Use this spritesheet slicing tool to export frames from your spritesheets. This spritesheet frame extractor tool will quickly cut up your spritesheets into their component frames as well as batch naming you can use this tool to resize the output frames on the fly. This is an experimental feature of the site and I expect different browser will have different image quality outputs, I've ran tests on chrome, ff , opera and edge and the image output quality is equal to photoshop.

Select spritesheet for slicing or animating

Set up frames

cols

rows

last frames empty?

1 frames

Original frame x scale=0px

Original frame y scale=0px

output frames file name

frame number at front

frame number at back

Output Scale

Output frame x scale =0px

Output frame y scale =0px

Output Quality

Antialiasing on (recommended)

cancel and restart

background fill on

show clipping lines

show numbers

frames per second

instructions

Uploading

To start simlply upload your spritesheet, once uploaded you will need to set how many columns and how many rows are on the spritesheet. The spritesheet slicer will automatically draw the cutting lines for you, so you can easily visualize where your frames fall.

Trailing empty frames

Sometimes spritesheets have empty frames at the end of the sheet. you can clip off the empty frames by selecting increasing the empty frames number.

output frame file names

You can use the rename input field to name your output frame png files. By defualt this is set to the name of the image you upload but you can change it here. You can also decide if you would like to append the frame number to the front of the file name. eg. "01_sprite_walk.png" or at the back of the file name eg. "sprite_walk_01.png" .

Output scaling options

This little tool also gives you the option of reducing the size of each frame on the fly. Just use the rescale slider or manually input your desired resize percentage to set the output scale. The tool will display the new target frame size according to your settings underneath the rescale slider

Antialias

If you're cutting up pixel art spritesheets you may find that the antialiaing interferes with the look of the spite, if so you can turn off inage smoothing. You can test this at anytime by toggling and seeing how it appears in the display area.

testing animations

If your spritesheet is an animated sprite y ou can run the animation any time you like to test that your cutting dimensions line up. Use the play button and the slideer to adjust the play through speed.

Exporting

Once your cutting configuration has been set you're ready to slice and export individual frames from your spritesheet.

disclaimer

This is an experimental feature of the site and I can't gaurantee the availabilty and functionailty which may vary across devices, I know already that it doesn't display well on mobile If it gets enough use I'll make the effort to make a more polished version. I can't make promises as to the the quality of the image export which will also vary according to your browser. The quality I'm seeing on chrome is extremely good and easily comparable with photoshop rescale and export quality.