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.
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.
Add it to AppDelegate:
[CCFileUtils setiPadRetinaDisplaySuffix:#"your suffix"];
[CCFileUtils setiPadSuffix:#"your suffix"];
[CCFileUtils setiPhoneFourInchDisplaySuffix:#"your suffix"];
[CCFileUtils setiPhoneRetinaDisplaySuffix:#"your suffix"];
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)
Add this to AppDelegate with your chosen suffix:
if((UI_USER_INTERFACE_IDIOM() == UIUserInterfaceIdiomPhone) && ([[UIScreen mainScreen] bounds].size.height == 568)) {
[sharedFileUtils setiPhoneRetinaDisplaySuffix: #"-your suffix"];
}
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...
background.png at 480x320 for iPhone
background-hd.png at 960x640 for iPhone retina (3.5")
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
This is how i did it for cocos2d v2.1-beta4.
In CCFileUtils.h i added:
- (void)setIphone5HDSuffix:(NSString *)suffix;
In CCFileUtils.m:
- (void)setIphone5HDSuffix:(NSString *)suffix
{
[_suffixesDict setObject:suffix forKey:kCCFileUtilsiPhone5HD];
}
In AppDelegate.m:
[sharedFileUtils setIphone5HDSuffix:#"your_suffix"];
And that's enough!
Did you follow the following post, adding the default image for it, named Default-568h#2x.png with a resolution of 1136x640?
How to develop or migrate apps for iPhone 5 screen resolution?
If it does not work, I found this post on cocos2d forum, containing a lot of infos:
iPhone 5 1136 x 640 screen resolution: http://www.cocos2d-iphone.org/forum/topic/39491
Now cocos2d support iPhone wide screen also.
-wide.png for iphone 5
-widehd.png for iPhone 5 HD
I was just playing around with suffixes in Cocos2D 2.1-rc1 and was able to get it to automatically load a iPhone5 file with the "-iphone5hd" suffix, not changing anything in AppDelegate in the sharedFileUtil section of code. Hope that helps, also.
Related
My cocos2D app, Forever Afloat, works perfectly fine with all the combinations until you get to iPhone 5 and iOS6!
The app display is all stretched out so that you see only the lower left corner and the rest is off the screen.
Only until you force it to autorotate, does the app begin to display at proper dimensions...
My problems can also be found at this problem cocos2D iOS 6 retina display
They asked the same question.
Any solutions?
Thanks!
cocos2d uses image with image-hd.png and not image#2x.png
Check whether you are using #2x an replace by hd
Use new version of cocos2d and here is image extension.
-wide.png for iphone 5
-widehd.png for iPhone 5 HD
-hd.png for iPhone HD
-ipad.png for iPad.
-ipadhd.png for iPad HD.
There were some issues within the AppDelegate regarding the order of calls that made the display all strange. All I did was move the initalization method to the top and it fixed everything!
what is the Image Naming Convention for iPhone 5 like #2x for retina screens.
It is just the same. The #2x just means it's a retina image.
The only difference is the 568#2x (or whatever it is) for the splash screen but Xcode renames that file for you anyway.
Just keep using #2x.png
till now they have not released any official documentation for the iPhone5 Images.
You can do like this.
if(UI_USER_INTERFACE_IDIOM() == UIUserInterfaceIdiomPhone && [[UIScreen mainScreen] bounds].size.height * [UIScreen mainScreen].scale >= 1136)
{
//Write the code here for iPhone5 Image.
}
else
{
//this is for unto 4th gen iPhone
}
There is no specific naming convention for images on iPhone 5.
The Default-568h#2x will be shown on launch of an iPhone 5 or iPod Touch 5G. This will also enable the non-letterbox mode of your app. For your other f.e. background images you have to design flexible if you want to cover both screen resolutions. When you building an iPhone 4s App assure that f.e. a background image can be strechted up to the iPhone 5 size.
it is just the same. The #2x just means it's a retina image.
The only difference is the 568#2x (or whatever it is) for the splash
screen but Xcode renames that file for you anyway.
Just keep using #2x.png
I must add, that if you look at the simulator the pictures maybe stretched! You could fix this by checking the box (if u use storyboard) "auto layout" I have some problems too maybe this is a bug which will be fixed I hope...
and on storyboard or .xib u can change the size of the controller like here:
I have some image files for iPhone 5 size 640x1136, i have previously implemented retina images for iPhone 4 & 4S using #2x suffix, so what will be the suffix for images in iPhone 5, we can user the same as is #2x or it has to be changed.
It’ll still use #2x images where they’re available. There’s a -568h suffix you can use for the launch image, as in Default-568h#2x.png, but that’s currently the only place it’s supported; see Leo’s answer for a way to get that working elsewhere.
See my answer here. Some useful macros to help you with dealing with images.
For the iPhone Retina 4-inch (iPhone 5) it's still the #2x suffix because the density is the same as the iPhone Retina (iPhone 4 and 4S). The screen is bigger but have the same density.
The -568h suffix will work only in for the default image because it's the only place you really need it (just to tell the system that your app have been optimized for this new screen size, and it can stretch your views).
The naming convention Default-xxx.png is just here to provide the right image while the app is launching but I think it's non sense to try to replicate the same to load other images in imageViews. It's like the Default-(landscape|portrait).png on iPad. You never need this convention to load images yourself.
The only rule is:
# is for density (2 density exist right now, normal and 2x)
~ is for device (2 different devices exist right now, iphone and ipad)
To adapt images/imageView on the 4-inch iPhone you should play with your imageView content mode and the autoresizing configurations.
I have a game in iphone already developed one year back in older version of cocos2d.
Now i want to upgrade the game with both retina and non-retina graphics for all iphone3G,3GS and 4+ devices.
I have used many buttons and CCMenus how can i handle them in code. Do i have to write conditions for every graphic?
Any help or tutorial?
Thanks in advance
No, you dont need to do the conditional coding.... You can have the retina display support bye either un-commenting or adding the below code into your appDelegate.m/.mm file in the applicationDidFinishLaunching
if( ! [director enableRetinaDisplay:YES] )
CCLOG(#"Retina Display Not supported");
Also you need to add "-hd" suffix image files for the retina display of the iPhone.
For cocos2d version 2 you need the "-ipad" & "-ipadhd" files to be present in your Resources folder.
To upgrade the cocos2d version you can follow the steps on this Link.
But cocos2d version 2 supports 3GS and above iPhone.
Hope this information would help you.
As I know, the iOS will do this for you if you name the image file in a correctly way.
ex:
normal screen: banner.png
Retina screen: banner#2x.png
The only thing you need to do is name the higher resolution image by a same name with the lower one and add subfix "#2x"
I'm developing a game using cocos2d. It's running now on iPhone and also supports Retina display. With retina i'm using images with "-hd" postfix. Now i want my application to be able to work on iPad using this images. How can i do that ?
PS: I don't have a real iPad and can only use a simulator. I will test the game on my friend's iPad after it will work well on a simulator. Is it possible to use hi-res images with simulator and how to do it?
I'm using cocos2D 0.99.5
inside CCFileUtils.m
inside method name +(NSString*) getDoubleResolutionImage:(NSString*)path
edit if( CC_CONTENT_SCALE_FACTOR() == 2)
to if( CC_CONTENT_SCALE_FACTOR() == 2 || (UI_USER_INTERFACE_IDIOM() == UIUserInterfaceIdiomPad))
this will make the app to load the -hd image when running on ipad, remember to change your app targeted device family to iPhone/iPad.
this will solve the loading of -hd problem for ipad.
but after loading -hd file for ipad resolution, you will also notice that most of your image position should be off alignment, now either you go directly into the cocos2d folder to edit how CCNode,CCSprite,CClabel handle the positioning of thing or you code it in your code checking if its ipad or not.
if you are using CCSpriteBatchNote. this will also cause another problem because you will be reading from the -hd SpriteSheet. so the texture Rect u set to cut need to be double too.
another method is position everything according to winsize. i haven try this method.
I don't exactly understand the question but I will try to answer.
You can technically use the same graphics for the iPad, but they will not look as nice. For one, they will all blurry and pixelated, and two, the iPad has a different screen aspect ratio that the iPhone/iPod Touch. If you do make separate images for an iPad version of your game, it will not be extremely difficult to do. If you want to do this, I suggest posting a new question.