iOS Image Naming Conventions - ios

Question

I'm relatively new in iOS development.
I'm currently building an app using the cocos2d library that will be available for the iPad Retina, iPad, iPhone 5, and iPhone 4s/4.
I'm getting all of my images setup, and I'm trying to figure out the naming conventions.
Does anyone know of a guide out there that could help me?
Say I have a background.png.
From what I understand:
background.png -> iPhone (non-retina/fallback)
background-hd.png -> iPhone 4s/4 (retina)
background-ipad.png -> iPad (non-retina)
background-ipadhd.png -> iPad (retina)
And the same naming convention would be used for all other files? For example:
arbitraryButton.png -> iPhone (non-retina/fallback)
arbitraryButton-hd.png -> iPhone 4s/4 (retina)
arbitraryButton-ipad.png -> iPad (non-retina)
arbitraryButton-ipadhd.png -> iPad (retina)
What do I name the iPhone 5 files?
I've searched a bit and cant seem to find any tangible guides out there on this.
Thank you!

Answer 1

The OS has a naming convention that you can use (and enforces for you, meaning you only need to reference the file as #"fileName"). The documentation is available here.
fileName.png -> iPhone (non-retina/fallback)
fileName#2x.png -> iPhone 4s/4 (retina)
fileName~ipad.png -> iPad (non-retina)
fileName#2x~ipad.png -> iPad (retina)
Note: ~iphone also exists, and can be used with/instead of using ~ipad. Using both ~ipad and ~iphone would safeguard against a third idiom Apple may introduce. cough TV cough
As for the iPhone 5, the OS does not enforce a naming scheme. But, it'd probably be wise to use the same scheme as that for the launch image.
fileName-568h#2x.png -> iPhone 5
To handle this easily throughout the app, you can create a category, and use it where you know you will have an iPhone 5 friendly image, as well as a regular sized image. A simple version can be made, like the one below.
UIImage+iPhone5Image.h
#import <UIKit/UIKit.h>
#interface UIImage (iPhone5Image)
+ (UIImage*)iPhone5ImageNamed:(NSString*)imageName;
#end
UIImage+iPhone5Image.m
#import "UIImage+iPhone5Image.h"
#define IsIPhone5() ([UIDevice currentDevice].userInterfaceIdiom == UIUserInterfaceIdiomPhone && [UIScreen mainScreen].bounds.size.height == 568)
#implementation UIImage (iPhone5Image)
+ (UIImage*)iPhone5ImageNamed:(NSString*)imageName
{
if (IsIPhone5()) {
NSString* newImageName = [NSString stringWithFormat:#"%#-568h", imageName];
return [UIImage imageNamed:newImageName];
}
else {
return [UIImage imageNamed:imageName];
}
}
#end

Answer 2

It looks like you are after the cocos2d naming conventions not the standard UIKit versions. They are different and if you are using cocos2d you are recommended to use the cocos2d suffixes and not the UIKit ones.
They are as follows:
Non retina iPhone (No suffix)
Retina iPhone -hd
Non retina iPad -ipad
Retina iPad -ipadhd
iPhone 5 -iphone5 and -iphone5hd
All files that you want loaded based on the device that are used with the cocos2d methods can be suffixed like this.

Answer 3

Ok, Now cocos2d itself support iphone5.
-hd.png for iPhone HD
-ipad.png for iPad
-ipadhd.png for iPad HD
-wide.png for iphone 5
-widehd.png for iPhone 5 HD
If your Cocos2d version is old then use:
static inline NSString *i5res(NSString * data)
{
if(IS_IPHONE5)
{
return [data stringByReplacingOccurrencesOfString:#"." withString:#"-whd."];
}
return data;
}
//usage
CCSprite *bg = [CCSprite spriteWithFile:i5res(#"bg.png")];

Answer 4

For the compiler to automatically choose the right image you will want to name the standard (non-retina) images image.png and the retina images image#2x.png. Then in your code just refer to the standard one. The compiler will do the rest. So if you are setting an image it should look like this:
UIImage *anImage = [UIImage imageNamed:#"image.png"];
There isnt a specific naming convention for the iPhone 5, because the app won't automatically choose a different image size for the iPhone 5, you will have to do that in your code with something like this:
CGRect screenRect = [[UIScreen mainScreen] bounds];
CGFloat screenHeight = screenRect.size.height;
if([[UIScreen mainScreen]bounds].size.height == 568){
UIImage *signUp = [UIImage imageNamed:#"signup-bg-568h.jpg"];
[signUpImage setImage:signUp];
}
else{
UIImage *signUp = [UIImage imageNamed:#"signup.jpg"];
[signUpImage setImage:signUp];
}