Animated Spritesheet stitcher tool

A lightweight tool for creating multiple animated spritesheets from individual frames. Create and edit multiple spritesheets on the fly. Works fast and in local with no uploading or downloading files.

Key features include.

Simple, quick clean and easy interface
Multiple spritesheets and batch editing
Batch exporting
Frame Padding
Animation previewing
True frame resizing with no pixel splitting
Sprite recentering using padding
col and row editing
Export with JSON slice data or css objects

Instructions

Creating a new spritesheet

On the left side context panel select the sheets tab and use the "create spritesheet button" to open the frame import dialog.

Importing frames

Use the "select frames from local " button to select frames for your spritesheets. This tool is for creating and editing animated spritesheets and therefore expects frames to be of equal size. If you upload frames that are not of equal size spritesheet stitcher will resize all frames to the same dimensions as the first frame uploaded. If you are not creating an animated spritesheet and are using frames of unequal size you will probably need to use a texture packing tool.(coming soon to the site).
If you wish to add frames that are located in different folders, first create the spritesheet then later append frames.

Viewing the spritesheet palette

Each time you create a new spritesheet a new spritesheet object will be added to the palette in the left hand menu under the sheets tab. You can select the spritesheet you wish to edit by clicking on the corresponding spritesheet in the palette.

The spritesheet Inspector

When you create or select a new spritesheet the spritesheet will appear and the "Spritesheet Inspector" Will open on the right hand side. You can select and edit all aspects of the spritesheet using the properties listed in the spritesheet inspector.
You can close the spritesheet inspector if anytime. If you wish to re-open the spritesheet inspector select the spritesheet from the palette in the sheets tab.

Selecting a good spritesheet layout

Using the spritesheet inspector for a selected spritesheet you can select set your desired amount of columns or rows. When you create a new spritesheet the stitching tool will try to create the optimum value of rows and columns to create a squar shaped spritesheet. You can manually set the columns and rows using the row and column dialog in the layout section in the spritesheet inspector.

Testing frame order

Spritesheet stitcher will order frames alphanumerically by file name. It may be the case that the frame order generated is incorrect. You can check this by running the animation. Use the play button in the "spritesheet inspector" to test if your frame order is correct. If the order of frames on the spritesheet is incorrect you can reorder and swap frames by following the instructions below.

Selecting a frame in a spritesheet

You can select and review individual frames in a spritesheet by left clicking with the mouse over the frame you wish to inspect. Selecting a frame will open the frame inspector dialog.You can use the information in the frame inspector to test that the frame is in the correct order.

Changing frame order

There are two ways to change frame order in a spritesheet. You can move frames up and down in position by manually entering the frame number in the frame inspector dialog or you can switch two selected frames.

Manually setting frame position

To set a frame position manually select the frame you wish to change to open the frame inspector dialog box. In the frame inspector find the frame position number and enter the new value you wish to set. If you set a frame position that is lower than 1 or higher than the amount of frames in the animation the frame will not change position.

Switching frame positions with another frame

Instead of manually setting a frame position you can swap the frame with another frame on the sheet. To swap a frame first select one of the frames you wish to swap then press "s" on the keyboard and select the second frame. The frames should swap

Removing a frame from the spritesheet

You can delete frames from the spritesheet by selecting them then using the remove frame button in the frame inspector. If you remove the the final remaining frame from a spritesheet the spritesheet will be deleted and you will have to create a new spritesheet.

Adding new frames to an existing spritesheet

You can add new frames to existing spritesheets by selecting the append frame button in the layout section of the "spritesheet inspector panel" Remember this tool expects frames to be of equal size throughout the spritesheet. If you upload a frame that is not of equal size the spritesheet stitcher tool will automatically resize it, which will most likely affect the animation.

Spritesheet dimensions

You can check the dimensions of the spritesheet using the spritesheet inspector panel. Make sure that your spritesheet is a reasonable size. If your spritesheet exceeds 2048 pixels on either side the dimensions will display in red.

Resizing frames in your spritesheet

If your spritesheet is too large you can resize the spritesheet by a percentage factor using the slider in the Spritesheet inspector panel". You can check that your spritesheet is at an appropriate size by checking the updated spritesheet dimensions. If you are working on multiple spritesheets with frames of the same dimension, as may be the case if you are creating spritesheets using key-frame animations from assets downloaded from this site. then you can use the apply percentage reduction button to all spritesheets in your palette. Remember this setting won't apply to any new spritesheets you create so you will have to go back and reapply.

Adding padding to frames in the spritesheet

If your sprite is very off-center, you can recenter it by adding padding to any side of a frame. You can determine how close to the center of the frame your sprite is by viewing the center point of the frame on the spritesheet. The center point is indicated by a green square and cross hairs. If you are working on multiple spritesheets of the same character you can also apply padding settings to all spritesheets in your palette. Remember this setting won't apply to any new spritesheets you create so you will have to go back and reapply.

Deleting a spritesheet

If you want to remove a spritesheet you can delete it using the "trash bin" icon in your spritesheet palette found in the sheets tab in the left hand panel.

Exporting spritesheets

This tool has two methods for exporting spritesheets. You can use the quick export button in the spritesheet inspector to save a single spritesheet or you can use the batch export tab in the left hand panel. The simple export panel is very handy if you are only working on one single spritesheet and do not need the associated slice data. The quick export will save you from unzipping and extracting files once saved on your local drive.

Quick export

The quick export button can be found by selecting the spritesheet you wish to export and scrolling down to the bottom of the spritesheet inspector.

Batch export

If you are working on multiple spritesheets or you would like slice data for a single spritesheet use the batch export operations in the batch export panel under the left hand batch export tab.
Using batch export you can neatly export all spritesheets in one operation, you can decide to include slice data in JSON format or slice data in Css format if you are creating spritesheet animations for websites. Spritesheets can be saved in their own folder or you can dump everything into one folder.

Thanks and enjoy

I hope you find this little tool useful, If you would like to discuss the tool you can join me and other users on our discord channel. If you need other slice data formats you can let me know their and I will try to update the tool for you.