Reputation: 1035
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.
Upvotes: 5
Views: 2467
Reputation: 25687
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.
Upvotes: 2
Reputation: 98
For cocos2D-iPhone, the default suffixes are as follows:
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)
Upvotes: 7
Reputation: 4654
If you're using cocos2d, then you'll need to use -hd suffixes on your retina-resolution images. Check out their wiki page for more info on that.
I don't work with cocos2d myself, but from the sound of it it, iPhone 5's screen resolution is handled in the same way an iPad's screen resolution is handled, by adjusting the layout accordingly. A search in stackoverflow should yield some good results for cocos2d and iPhone 5.
Upvotes: 1
Reputation: 1735
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.
Upvotes: 1