Placeholder image
create a spritesheet with Shoebox
  posted 15 Nov, 2016
written by evansbsr


One of the challlenging parts of creating a 2D game is managing your graphic assets. This situation becomes even more difficult should you decide to have animated sprites. Thankfully spritesheets are here to help.

For this tutorial you will need to download the Shoebox app.

download assets for tutorial

source assets

load your images into shoebox

Shoebox has a simple drag-and-drop interface that makes it easy to work with your graphic files. All you need to do is have all the graphic assets you'd like your spritesheet to have in one folder. Once you've opened the Shoebox app, select all the files and drag them onto the spritesheet button. (Tip: if you have all your files in one folder you can drag the folder itself onto the spritesheet button).

choose your settings

After you've dragged your images onto the spritesheet button the shoebox app will present you with an interface that shows you a preview of what your spritesheet will look like. At the bottom right corner of the preview window you'll see three buttons : helpsettings and close. Click on the settings button.

Upon clicking on settings a new window will appear. Here you can choose between various settings for your spritesheet. For the purposes of the tutorial we won't go into all the available options. There are two things we'll do here. First, make sure that the template option is set to pixi.jsas that is what we'll be using in the next tutorial to play around with our new spritesheet. Second, go the the option for File Name and change the extension of the file from .js to .json. After that click Apply to save the settings.



Next go back to the spritesheet preview window and click saveShoebox will now save the spritesheet that you saw in the preview window to an actual image file together with a JSON file that both share the name you specified in the settings. In this instance the files created are named sprites.png and sprites.json. Check the folder where you dragged the original source images from to see your new spritesheet. If you've followed the tutorial with the original source images linked to above you should have something that looks ike this.

And there you have it! Your brand new spritesheet is good to go. Check out the next tutorial to find out how to load this spritesheet into the pixi.js rendering engine.