Advantages Of Texture Atlases Over Sprite Sheets

Texture Atlases are similar to sprite sheets in that you group a lot of artwork into a single image. Texture Atlases however relay on another file, the atlas, which defines the x, y, width and height of the actual sprite on in the texture image. What is great about using texture atlases is that you can include images that are not perfectly square in the same sheet. Sprites generally are divisible by their width and height, images in texture atlases can be any size. Let’s look at an example:

And here is a sample of the JSON data I use to pull out each sprite:

{
	"filename": "alert-icon-air-on.png", "rotated": false,"trimmed": true,
	"frame": {"x":0,"y":276,"w":32,"h":29},
	"spriteSourceSize": {"x":0,"y":0,"w":32,"h":29},
	"sourceSize": {"w":32,"h":29}
}

The other huge advantage of texture atlases is not having to load in lots of individual sprite sheets for your game. Since I can put all of my entity and UI artwork in the same texture I can dramatically cut down on my game’s loading time. While most browsers cap out at 6 connections at a time, being able to put all of your artwork into less images, even if they are larger, will make your game load faster. Also, when you have all of your artwork in a single image you can perform more advanced compression on the entire set helping bring down your artwork size even more.

Here is a snapshot of the amount of requests my game was making before moving over to texture atlases:

And here is the optimized build where about 90% of the artwork is now being loaded via texture atlases:

As you can see, I was able to cut down 12% of my requests going from 200 down to 176. While that may not sound like a big savings, checkout the size of the game. I went from 6.8 mb down to 4.90 mb which is almost 23% reduction in file size. This is huge if you are trying to run your HTML5 game on mobile browsers and also improves the memory footprint on any platform.

I have been playing around with a few different texture packers and settled on a free one called ShoeBox. While it wasn’t the most advanced one out there, it was free and has some great options for generating bitmap fonts which are another critical thing you will need to in your game in order to consistently rendered fonts on different devices.

There are even more advantages to texture atlases, especially as you get into performance in 2d games being rendered in 3d engines like Unity or DirectX. If you have been using sprite sheets up until this point I highly suggest testing out texture atlases and seeing if it helps out. The best part is that you can even automate generating the texture atlases as part of your build routine which is what I have been doing.