Loading JSON Atlas And Spritesheet In PIXI


Getting Started

Texture packer is an incredible tool that allows you to bundle multiple images into a single image. Today we are going to talk about using TexturePacker, and the benefits of doing so.In this quick tutorial we are going to cover the basics of using TexturePacker to take multiple image assets for your game and build a spritesheet as well as a atlas json. In this tutorial we will only be covering how to use TexturePacker to create these files, we will not cover how to load or use them in your game. This is coming in part two!

But first, an answer to the question why. Imagine if you have 100 images to load in your game. Typically, you would be required to make 100 requests to your server, wait for each response and store every response. That isn’t just additional overhead on CPU, it’s also a massive drain on the amount of data it takes to load your assets. Now imagine you are able to cram all 100 images, into 1 image with a piece of data that explains to your game where every single one of the 100 images is located inside this 1 large image. And thus, we have the premise for texture packer. Lets get started!

Downloading TexturePacker:

To begin we need to download our texture packing tool, in this case we will be using TexturePacker, however there are other tools available such as Leshy Sprtie Sheet tool https://www.leshylabs.com/apps/sstool/ here at Sprite-Storm we tend to use TexturePacker but there are alternatives.Step 1: Download TexturePacker from https://www.codeandweb.com/texturepacker/download

– TexturePacker is available for MacOS, Windows, and Linux.
– Install TexturePacker following the steps depending on your OS
– Please note that TexturePacker is not free software(however it does come with a 7 day free trial with unrestricted usage). After this free trial the cost is roughly $40 with a year of free upgrades.

Step 2: Open TexturePacker.

Using TexturePacker:

As we have stated before this is going to be an extremely basic tutorial on how to use TexturePacker
and how to export a spritesheet and json atlas. We will not cover the more advanced features of
TexturePacker in this particular tutorial.Today we will be using some assets found at https://opengameart.org/content/candy-pack-1 done by “lumimae”,
these assets are released under the CC0 license and therefore are legal to use for private and commercial use,
as far as our legal understanding goes.Note that if you do download these assets to test TexturePacker they already come with a spritesheet png file,
however they come with individual png’s as well and this is what we will be using to demo TexturePacker.

Step 3: Once TexturePacker is open you should see the main lets call it dashboard for the program



– Once again we will not be going over most of the features here just how to take some images and make a spritesheet as well as a json atlas.

Step 4: Select the assets you would like to TexturePack for this tutorial we will keep it simple, we will be packing the first 5 images in the “size 1” folder from our downloaded assets.



Step 5: Drag and drop these images into the TexturePacker dashboard where it states to drag and drop images.



– After this you should see that these images have already been combined into a single image with a preview in the main section of the TexturePacker dashboard.



– You also have a layout on the left hand side of TexturePacker which shows the individual sprites used.


Publish Settings:

Now we are ready to set up our spritesheet and atlas to be exported. There are a few different things we want to look at here.Step 6: Selecting our data format. TexturePacker comes with quite a few different data formats to export in, for this tutorial we will be setting this to PIXI js.


seeing as thats typically what we use here at Sprite-Storm. However you can also export for many different ones depending on how you are building your game.

Step 7: We will choose some settings for our texture itself. Including texture format(we will be using png for this tutorial) and our png opt level(which is the level of optimization for our png files) We will be setting the png opt level to 7 for our example.

We will also set our size constraintto POT(power of two) which will force the texture to have power-of-2 size
(2, 4, 8, 16, 32, 64, 128, 256…).

Publishing Our New TexturePacked Assets:

Step 8: We will select and click on Publish SpriteSheet in the upper tool bar on the right hand side.
– For this example we will be exporting as PixiJS(*.json) to our desktop.

– While publishing your texturepacked assets you will see this window.


– Once TexturePacker is done doing its thing you now have a JSON file and a new PNG spritesheet to be used in games!



– Discovered how to download TexturePacker.
– Brief summary and explanation of the TexturePacker dashboard.
– Learned how to upload individual png files to be TexturePacked into a json atlas and spritesheet.
– Published our new atlas and spritesheet to be used in our game!Thank you very much for reading. Please stay tuned for upcoming tutorials, including how to use your new atlas and spritesheet in your game, we will also cover advanced options in texture packer to make your life easier.