cocos2d iphone - iOS Image Naming Conventions

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