Game Development Reference
In-Depth Information
Mutli-Resolution Images
There are several cases where an application has two different images files, at different resolutions,
that are being used as the same logical image in the application. This is done so that the application
can provide the best user experience based on which device the user has. The ideal situation for
any application is to display images at a 1:1 ratio (number of pixels in the image to the number of
pixels on the screen). We want to avoid scaling wherever possible, because the scaling produces
lower-quality images and is an extra and potentially expensive operation.
Apple computers seem to really excel at scaling images. If you have the opportunity, try playing an
old-fashioned DVD (not a high-definition video) on one of the new 27-inch iMacs. When played in
full-screen mode, the images are scaled up a lot, yet still look excellent. Whatever this magic scaling
algorithm is, it seems to be included in iOS devices as well. As a result, it is tempting to simply use
from a 3D representation or from vector art—it makes sense to render each image twice, once for
high resolution and then again for low resolution.
A Multi-Resolution Example
Let's look at an example. Say you are creating an icon for your application with Adobe Illustrator
(or similar application). If you create a new file that is 57 pt x 57 pt, you can export this file at 72 dpi
and get an image that is 57 pixels x 57 pixels—perfect for the low-res iPhone icon. You can then
export this image again at 144 dpi and get an image that is 114 pixels x 114 pixels, which is perfect
for the retina version of the iPhone. To make the icon for the iPad, you can export again at 92 dpi,
making an image that is 72 pixels x 72 pixels. Figure
A-10
shows the difference between rendering at
different scales and scaling down.
Figure A-10.
Rendering verses scaling
