Create Sprite Sheets
Learn how to create Sprite Sheets with Texture Packer
What are Sprite Sheets & Why Use Them
A Sprite Sheet is a collection of several Images/Textures into one single file. We use Sprite Sheets because there are faster to process. When you copy some files into your computer, you can notice that it is faster to copy one (1) file of 100 Mb than a hundred (100) files of 100 Mb. The same phenomenon happens inside your GPU. It will take less time for the GPU to load one big Image than to load several little Images.
The picture below shows how eight (8) images files have been combined into one (1) single sprite sheet.
Create Sprite Sheets with Texture Packer
Texture Packer is an Image Editor Tool especially created for Video Games. As its name suggests, its main job is to Pack Textures or simply say to create Sprite Sheets. You can access Texture Packer website through the Download Page. Texture Packer is available in a free and a paid version. The free version has fewer features, but that’s good enough for us.
The goal here, is to generate two files. An Image file (PNG) containing all your textures and a JSON file describing how to extract each texture. The two files need to have the same name, Example : my_sprite_sheet.png and my_sprite_sheet.json. Once you have the two files you can copy them inside your project resource/texture folder.
There are mainly three steps to create a Sprite Sheet :
- Step 1 – Import all your sprites : Click on the button Add Sprites and select all the images you have
- Step 2 – Configure the output
- The Framework has to be set at JSON (Array)
- The Data file is our JSON file
- The Texture file is our Sprite Sheet
- Step 3 – Generate the Sprite Sheet : Click on the button Publish Sprite Sheet and Texture Packer will generate the JSON and the Image files
Split Sprite Sheets with Shoe Box
Shoe Box is a tool similar to Texture Packer, you can use it to create Sprite Sheets. Contrary to Texture Packer, Shoe Box is completely free. You can access the Shoe Box website through the Download Page.
- How to Install Shoe Box ? : Shoe Box is an Adobe Air application, before you can install it, you need to install Adobe Air first.
Earlier you learned how to create Sprite Sheets with Texture Packer. However, when you search for free or paid sprites on the internet they usually come already packed into one image file. The problem here is that you have a Sprite Sheet but you don’t have the JSON file to extract it. The solution is to break your Sprite Sheet into the original images, then use Texture Packer to generate a new Sprite Sheet and the JSON file.
Texture Packer can extract images from a Sprite Sheet, but you have to pay for that, this is why we are going to use Shoe Box.
Shoe Box is pretty simple to use, most of its actions are done by Drag and Drop. If you have a Sprite Sheet like the one below, you simply have to drag your image on the button Extract Sprites, a new window will open up, and then, you just have to save the generated images.
