Make an animation with Sprited

Sprited is an open source animation editor I have developed to create spritesheet and animations for 2d games.
You can then use the animations exported in your game.

The tool is still in development and can be compiled and used in Windows / Mac OS / Linux.
You can find it here : https://github.com/NicolasPerdu/Sprited

Workflow of Sprited

• (Optional) Import already existing spritesheets to make individual images
• Create a folder containing all the images you want to have in the spritesheet
• Create a spritesheet from the folder
• Create animations using the sprites
• Play the animations to see if it’s looking good and set the fps.
• Save the spritesheet and the project in json

Create a spritesheet from multiple images

You need to have all the images you need to import in the same folder. The images need to be a format readable by opencv : cv::imread for the moment you can use :

• Windows bitmaps – *.bmp, *.dib
• JPEG files – *.jpeg, *.jpg, *.jpe
• JPEG 2000 files – *.jp2
• Portable Network Graphics – *.png
• WebP – *.webp
• Portable image format – *.pbm, *.pgm, *.ppm *.pxm, *.pnm
• Sun rasters – *.sr, *.ras
• TIFF files – *.tiff, *.tif
• OpenEXR Image files – *.exr
• Radiance HDR – *.hdr, *.pic
• Raster and Vector geospatial data supported by GDAL

Then click on the menu File and select Import Sprites…, you will need to choose the folder containing all the sprites.

After the importation is complete you should have something like this :

Slicing an existing spritesheet

If you don’t have individual images you can import an already existing spritesheet and slice it to obtain the individual sprites.
To slice the spritesheet you have two options, using the contours detection of opencv by pressing the Slice Contour button or using the grid slicing by pressing the Grid button.
For the grid slicing to work you need to have the sprites in the spritesheet aligned on a grid and with the same size, then fill the width and the height of the sprites before clicking on the button Grid. You can redo it multiple time if the slicing is not good.

Create an animation with Sprited

After importing the spritesheet you can create an animation by going on the tab Animation.
Then click on the + button to add a new animation, you will need to enter the name of the animation.

You need to fill two columns for the animation to work, the first one are the sprite numbers and the second one is the number of frames the sprites should be displayed.

How to find the sprite numbers ?

You will need to open the editor, for that click on the Editor Tab on the right menu, then click on Open Editor, you should have something like this but with an empty array.

You can see I have two animations up and down already filled.

Playing the Animation

After creating the animation they will appear in the combo box next to the stop button, you can select the animation you want to display.
Then click on Play to play the animation, if the animation is too fast reduce the fps, the default is 60 fps.