Both the iPhone 4 and the iPad support Apple's Retina Display mode. On the iPhone 4 this doubles the resolution to 960x640.
The creators of Cocos2d have taken a lot of care in integrating this feature into the framework. Retina display can be turned on with the flick of a switch. Getting your game to run similarly in both hi-definition and standard-definition can be tricky though. Luckily they have taken this into consideration as well. In this recipe we will enable Retina Display and then display a hi-resolution image, as shown in the following screenshot:
To properly see Retina Display you need a retina display device. In the simulator you need to do the following to switch to an iPhone Retina simulation:
Go to the iOS simulator.
In the file menu click on Hardware | Device | iPhone (Retina).
You may also of course use a real iPhone 4 or iPad device.
First you must enable Retina Display in your application. Go into
${PROJECT_NAME}AppDelegate.m and uncomment the following lines:
if( ! [director enableRetinaDisplay:YES] )
CCLOG(@"Retina Display Not supported");Retina Display will now be turned on for devices that support it and turned off for devices that do not.
Now, execute the following code:
-(CCLayer*) runRecipe {
//Switch to Retina mode to see the difference
CCSprite *sprite = [CCSprite spriteWithFile:@"cocos2d_beginner.png"];
[sprite setPosition:ccp(240,160)];
[sprite setScale:1.0f];
[self addChild:sprite];
return self;
}One sprite for the price of two:
As you can see the sprite we created is now very large and detailed. If you turn Retina Display off or run this on a device that does not support it you will see a smaller blurrier sprite. This happens because Retina Display chooses the higher resolution version of every sprite if there is one available. We specify the higher resolution version with the
-hdsuffix. So, in Retina Display mode Cocos2d automatically displayscocos2d_beginner-hd.pnginstead ofcocos2d_beginner.png.Position, sizing, and so on:
Supposedly Cocos2d will convert all coordinate positions, size ratios, and anything else accordingly. The only thing you should have to change is adding the high resolution imagery.
It is recomended that a number of caveats are practiced with this. Lower level OpenGL hacking often doesn't display as you would want it to. Be wary of this and be sure to test any complex techniques in Retina Display mode before thinking about supporting both modes.
The downside of Retina Display:
The major downside of Retina Display is simply the amount of disk space it takes up. Including all of the HD images will more than double the space all of your art assets take up. Also, the higher resolution images take up more memory at runtime.
On the other hand Apple keeps increasing app size limits and device memory. With newer hardware coming out and the ability to make desktop applications, increased resolution is a must for triple-A game titles.