Main Scene and Game State - Learn SpriteBuilder for iOS Game Development - page 207

Figure 7-2 . SpriteBuilder crops images in Sprite Sheets so that only the smallest possible rectangle enclosing
all nontransparent pixels remain. Here the dark gray area at the top is cut off
Figure 7-2 is the M_frontsmoke.png image with colorized highlights. The gray rectangle
at the top is the area SpriteBuilder cuts off because it contains only transparent pixels. The
image also highlights the semi-transparent pixels by using a solid color for any pixel that
isn't fully transparent. This emphasizes how even a single or just barely visible pixel can
significantly reduce how much SpriteBuilder can crop. The image in Figure 7-2 could be
optimized to increase the amount of cropping by removing the semi-transparent clouds of
pixels smeared upwards on both sides of the image.
This is a constant struggle for game developers: visual quality vs. memory usage/perform-
ance.
Figure 7-3 shows the Menu Sprite Sheet's preview image. You'll notice that the M_bg.png
image uses about the same space as the two M_monsters.png and M_frontsmoke.png im-
ages. Furthermore, some images are rotated to pack the images more efficiently in the
Sprite Sheet.