Creating iOS Universal App, How To Detect All 5 Resolutions?

Question

Title pretty well says it. I'm creating an iOS app and am at the point of add art assets. I have 5 backgrounds for iPhone low res(iPhone 3GS or lower ), iPhone retina (iPhone 4 or higher), iPhone 5, iPad low res, and iPad high res.

What's the best way to handle which background gets loaded based on the device?

Also, is there a way to test what all 5 looks like in the simulator? Right now, of course, you can only test iPhone and iPad.

Also, this is a game and I'm using cocos2d if that would make a difference.

Answer 1

As @Srikanth mentioned, include image.png & [email protected], and the system will automatically choose the higher-res one for high-res screens and the lower for lower-res screens. This works on both iPhone and iPad.

For iPhone 5, the screen is still Retina. The system will choose your -@2x image automatically. You can define Auto Layout (or springs and struts) in Interface Builder or in code.

If for some reason you absolutely need an image specific to the iPhone 5-type screens, I believe you can add an [email protected] and the system will automatically choose that for 4-inch screens.

The only reason I can think of that you would include a -568h@2x image in your bundle is for launch images: You need one specific to 4-inch screens.

Also, about the Simulator: You can test all 5 resolutions. In the simulator menu bar (at the top of screen) choose Hardware>Device. Here you have an option for all 5 resolutions.

Answer 2

You can have two versions of each image

image.png, [email protected]

The system will automatically pick [email protected] if it is a retina device where ever you refer to image.png

Also in the simulator, you can go to Hardware->Device and then pick if you want to see retina or not.

Answer 3

For cocos2D-iPhone, the default suffixes are as follows:

• Non-retina iPhone: image.png
• Retina iPhone: image-hd.png
• Non-retina iPad: image-ipad.png
• Retina iPad: image-ipadhd.png

Note from the wiki page:

WARNING: It is NOT recommend to use the ”@2x” suffix. Apple treats those images in a special way which might cause bugs in your cocos2d application.

Cocos2D will automatically detect your hardware and will load the appropriate image. You can change the default suffixes in AppDelegate.m.

AFAIK, there is no suffix for iPhone 5 images, so you can manually detect and load your custom sprite by detecting the device height:

CGRect screenBounds = [[UIScreen mainScreen] bounds];
if (screenBounds.size.height == 568) {
    // code for iPhone 5
} else {
    // code for all other iOS devices
}

And as the others said, you can test all devices through the simulator (Hardware -> Device)