cocos2d iphone 5 4 inch display support

Question

I have been looking everywhere for this but with no luck.

How do I prepare my cocos2d based game for bigger 4 inch display of the iPhone 5? My app is working but i want to enhance it for the bigger 4 inch display. Cocos2d uses its own suffixes for retina display images. For retina display of the iPhone 4 and 4S it is image-hd.png. Is there a suffix for iPhone 5? How do I accomplish this?

Cheers.

Solution 1

Add it to AppDelegate:

[CCFileUtils setiPadRetinaDisplaySuffix:@"your suffix"];
[CCFileUtils setiPadSuffix:@"your suffix"];
[CCFileUtils setiPhoneFourInchDisplaySuffix:@"your suffix"];
[CCFileUtils setiPhoneRetinaDisplaySuffix:@"your suffix"];

Solution 2

There is no extra file suffix for iPhone 5, after all it's only 176 pixels (88 points) wider. It's treated like a regular Retina phone, hence cocos2d will load the -hd files.

The rest is just about positioning your images depending on the device. The simplest way is to just treat the 44 points on either side as a "dead zone" where no user input can occur and where there's no guarantee the user can see game objects.

Update: cocos2d 2.1 added the -widehd suffix. It was said that 2.1 final release will have the suffix renamed to -iphone5hd.

In light of future screen sizes I sould personally set and use a -568hd suffix because other phones beside iPhone 5 may have the same resolution. Naming the suffix after a specific iPhone model is a tad short-sighted to say the least.

Solution 3

Not sure why everyone is saying there isn't.

The suffix is -568h for iPhone5/iPod Touch 5th (so the 4 inch retina displays).

The total list:

• -hd (iPhone 4/4S, iPod Touch 4th)
• -568h (iPhone 5, iPod Touch 5th)
• -ipad (iPad 1st/2nd)
• -ipadhd (iPad 3rd/4th)

Solution 4

Add this to AppDelegate with your chosen suffix:

if((UI_USER_INTERFACE_IDIOM() == UIUserInterfaceIdiomPhone) && ([[UIScreen mainScreen] bounds].size.height == 568)) {
    [sharedFileUtils setiPhoneRetinaDisplaySuffix: @"-your suffix"];
}

Solution 5

It took me awhile to figure this out, since I'm new to cocos2d. So I thought a recap might be helpful for those like me. In cocos2d 2.1, all you have to do is creating graphics for the target screen sizes and follow cocos suffix naming convention. Note that cocos's suffix convention is not the same as iOS's.

In my case, I have a background image that occupies the full screen. So, I made...

1. background.png at 480x320 for iPhone
2. background-hd.png at 960x640 for iPhone retina (3.5")
3. background-iphone5hd.png for iPhone5 retina (4")

And use the following code to load the image into CCSprite. Cocos will figure out which image to use for you.

CCSprite *background = [CCSprite spriteWithFile:@"background.png"];
background.position = ccp(background.textureRect.size.width/2,
background.textureRect.size.height/2);
[self addChild:background];

For an element like a character that doesn't occupy the full screen, cocos2d will pickup character-hd.png automatically in iPhone5. There is no need to create character-iphone5hd.png version.

You can read more about this in version 2.1 release note at https://github.com/cocos2d/cocos2d-iphone/wiki/cocos2d-v2.1-release-notes

View more solutions