As mentioned previously, iOS games can be executed on devices with different resolutions and screen sizes. This is the reason why it's important to keep in mind the following table, which shows the different families of resolutions and their required file names:
|
iPhone 6 Plus |
iPhone 6 |
iPhone 4s, iPhone 5 |
iPad Retina |
iPad | |
|---|---|---|---|---|---|
|
Devices |
iPhone 6 Plus, iPhone 6s Plus |
iPhone 6, 6s |
iPhone 4s iPhone 5, 5C, 5S iPod Touch 5G |
iPad Air, Air 2, iPad mini Retina |
iPad, iPad 2, iPad mini |
|
Resolution |
1242 x 2208 |
750 x 1334 |
640 x 960 640 x 1136 |
1536 x 2048 |
768 x 1024 |
|
File name |
file@2x~iphone.png |
file@2x~ipad.png |
Note that we are showing the devices supported by iOS 9, which is the version that we are using for development purposes.
The above table corresponds to the five resolution families that are available at the time of writing this chapter. In the table, you will see the different devices of each family, their resolutions, and the names that you will need to specify for each of them.
The filenames are composed of a prefix (the filename) and a suffix that can be @3x, @2x~iphone, @2x, @2x~ipad, or @1x (in this case, the suffix can be omitted), depending on the devices that you want the game to be available on.
Providing the needed files will not only result in a better resolution, but also will avoid the programmatic upscaling or downscaling of the image, thus improving the game's performance. Upscaling an image will result in smudgy-looking images but, on the other hand, downscaling images will allow you to reuse a high-resolution image for lower resolution devices. However, this approach is not recommended due to the waste of memory that a non-retina display could lead to.
From now on, when we add a new image to the game, we will need to include the corresponding @2x, @2x~iphone, @2x~ipad and @3x files, if available. Let's add the required images by performing the following steps:
In the project navigator, right-click on Art and select Add Files to "InsideTheHat"….
You'll find
[email protected],rabbit@2x~ipad.png,[email protected],[email protected],background@2x~ipad.png, and[email protected]in the7338_01_Resourcesfolder. Select these four files and click on Add.
You can now run the game on other devices and check whether the resolution is maintained in all of them.
Another way of including new image files in a project is by taking advantage of the assets catalog that we mentioned at the beginning of the chapter. If you take a look at this folder, you will see something that is similar to the following screenshot:
Here, you can create a New Image Set by clicking on the + button and filling the 1x, 2x, and 3x slots with the corresponding images.