Create Sprite Sheet

A sprite sheet is an image containing many individual images. The sheet must be complemented with an image atlas object that contains the information of where in the sprite sheet each individual image can be found and what animations the images are used for.

Sprite sheets compatible with the Futureskill platform require that each individual image is exactly the same size in each sprite sheet. If they are not the same size the images will stretch to accomodate the size defined for the sprite_sheet element in the implementation code.

The Sprite sheet atlas must be a JSON compatible with the PIXI.js framework. A free tool that can be used to generate sprite sheets from individual sprite images is https://github.com/krzysztof-o/spritesheet.js.

1. 1. Using spritesheet.js

Each sprite image must be in the same folder and have the same name, except for a number that should indicate which animation fram that image is. If we have a number of images of skilly walking that we want to turn into a walking animation then they could be named skilly_walking_00001.png where the number in the name increases for each fram of animation.

If we want to turn the skilly_walking_*.png images into a sprite sheet we can run the command: spritesheet-js -f pixie.js -n skilly_walking_v1 skilly_walking_*.png Which will create the files skilly_walking_v1.png and skilly_walking_v1.json, where the png is the sprite sheet image and the json is the image atlas containing information about where each sprite is in the sheet.

The command above will not remove any white space or compress the image in any way. If we want to remove unnecessary whitespace and compress the image to 25% we can instead run the command: spritesheet-js -f pixie.js --scale 25% --trim -n res_25_skilly_walking_v1 skilly_walking_*.png Which will create the image res_25_skilly_walking_v1.png and the atlas res_25_skilly_walking_v1.json.