Game Development Reference
In-Depth Information
into a single image. Texture atlases, however, rely on another file, the atlas, which defines
the x,y (width and height) of the actual sprite 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 (
Figure 5-15
).
Figure 5-15. An example of a texture atlas for Super Jetroid.
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 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 dra-
matically cut down on my game's loading time. While most browsers cap out at six connec-
tions 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 art-
work size even more.
