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

Naming Conventions
At the time of this writing, there are three different screen resolutions that must be accounted for
when creating an application. It is very common to want to use different images based on which
one of the three resolutions the application is running on. To support these resolutions, a naming
convention was created to facilitate this in a mostly painless way. The idea is that by naming the
images in a particular way, a different image will be loaded depending on the device. So there is no
need to test which device you are using in your code. The pattern for this naming convention is

Basename[@2x][~iphone|~pad].extension

So, basename can be whatever you want—for example, “background”. You can then optionally
append an @2x to indicate that image is for a high-resolution display, like the retina display of the
iPhone 4. After indicating whether the image is a high-resolution version, you can specify a device
class, either iPhone or iPad. Lastly, you add the extension as you normally would. Table A-1 shows
how this naming convention works for an image that would otherwise be called background.png.

Table A-1. Naming Convention for a Background Image in Portrait

Device Filename Resolution of image in Pixels

iPhone 3GS, iPod Touch 3 rd Generation background~iphone.png 320x480

iPhone 4, iPod Touch 4 th Generation background@2x~iphone.png 640x960

iPad 1, iPad 2, iPad mini background~ipad.png 1024x768

iPad 3 rd and 4 th Generation background@2x~ipad.png 2048x1536

In Table A-1 , we see in the first column a set of devices for each row. In order to provide a full-screen,
portrait background image for each set of devices, we name our background file as shown in the
second column. The right-most column shows the resolution of the image in pixels. In the sample
code for this appendix, the background image of the application is configured to support the devices
available in the emulator. I have changed each background image to include text indicating which file
is being loaded. Figure A-6 shows the different devices with the different images.