Game Development Reference
Splitting the stripes into individual images is not only helpful for drawing the images at
the correct z-order. Strictly speaking, the images bg5.png and bg6.png can be at
the same z-order because they don't overlap, yet I chose to save them into separate
files. In Figure 7-3 you can see these two files as the two topmost stripes. Notice how
little space they actually use up in the texture atlas; that's because TexturePacker re-
moved most of the surrounding transparent parts of these images.
Now suppose I left both these stripes in the same 960 × 640 image—one would be at
the top and the other at the bottom of the image, with a big gaping hole of transparency
in between them. TexturePacker can't remove the transparent part between the two
sprites, so they would have remained as a 960 × 640 image in the texture atlas, which is
a lot more space than they take up as individual images.
Splitting the stripes into individual images also helps maintain a high framerate. The
iOS devices are very limited in fill rate (that is, the number of pixels they can draw
every frame). Because images frequently overlap each other, the iOS device often has
to draw the same pixel several times in every frame. The extreme scenario would be a
full-screen image on top of another full-screen image. You can see only one of the two
images, but the device actually has to draw both. The technical term for that is over-
draw . Separating the background into individual stripes with as little overlap as pos-
sible reduces the number of pixels drawn.
Tip By using 16-bit textures (RGB565, RGBA5551, and RGBA4444) or even
PVR compressed textures, you can improve the rendering performance of your
game. Of course, you lose some image quality, but in many cases it's hardly no-
ticeable on the iPhone screen, even if you do see some artifacts on your com-
puter's screen. TexturePacker lets you reduce the color depth of your images
while retaining most of the image quality through dithering techniques. And if
you experience long load times, saving images in the compressed pvr.czz
format is worth a try because this particular image file format loads noticeably
faster than other ones.
Re-creating the Background in Code
You may be wondering by now how you can put these images back together in the
source code without spending a lot of time properly positioning these stripped-down