Designing and Creating Graphics - Beginning iOS6 Games Development - page 322

In Figure A-10 , we see three different versions of an icon. In the middle is a vector presentation, nice
and smooth. On the left is the image produced by Illustrator when asked to export a 57x57 version
of the image in the middle. The image looks pixelated because it is scaled up so we can see the
quality of the rendering. The image on the right is the result of Illustrator creating an 114x114 image
and then having GIMP scale it down to 57x57 (Sinc Lanczos3). Even this simple two-step process
introduces noise. Notice the lighter pixels around the dot of the i on the right. Maybe in this case it
doesn't matter too much, but it seems to me that if you are going to spend the time (and money) to
create high-quality art, it is worth going the extra mile and preventing this type of issue.
Keeping with the ideas presented here about quality and rendering, the following section walks you
through an example of how to select the final image size for an application.
Creating Final Assets
We have taken a look at how to represent images with multiple resolutions and why that is important.
But when it comes to game art, we still have not answered the question, “How big should my images
be?” In this section, we will take an example game that runs on both the iPad and both versions of
the iPhone, and figure out the best sizes for images used in that game. We will be using the game
from Chapter 3, Coin Sorter.
Because we are working with three possible image sizes—one for the iPad and two for iPhone—we
should look at the relative sizes (in pixels) of these screens and get sense of the differences in size.
Figure A-11 shows the different screen sizes.
Figure A-11. Relative resolution of the different screens
In Figure A-11 , we see a rectangle representing the screen size for each of the iOS devices on the
market. The left-most image is the size of the iPhone 3GS (and its two predecessors). The second
rectangle from the left shows the size of the iPhone 4, which has four times as many pixels as the
iPhone 3GS. The third rectangle represents the size, in pixels, of the iPad 1 and iPad 2. Note that
the iPhone 4 has almost as many pixels as the iPad 1 and iPad 2. The rectangle all the way on the
right is the resolution for the iPad 3rd Generation. Let's take a look at how these different sizes affect
our decisions when it comes to laying out our game.