Updating apps to iOS6 – Background images

The new iPhone is taller than the current phones. The default background images need to have a height (in pixels) of 1136 instead of 960 in the original. background images in the game need to be 176 pixels taller. The actual size depends on what the app does for top and bottom toolbars. Landscape backgrounds need to be 1136 pixels wide.

Since I have lots of games, I wrote a simple shell script to make copies the @2x images for the portrait and landscape and the default. You are required to name the default image ‘Default-568h@2x.png’ and iOS will automatically use it when launching on the new iPhone. In fact, that’s how the phone can tell that an app has been updated for the new dimension—otherwise it runs letterboxes. I kept the naming convention for the rest just to make things consistent.

#!/bin/bash
cd /Users/jscarry/Documents/Words/Words/BG\ Default-ArticIV/
cp BG@2x.png BG-568h@2x.png
cp BGLandscape@2x.png BGLandscape-568h@2x.png
cp Default@2x.png Default-568h@2x.png
exit

iOS will not automatically look for background images that fit the new phone’s dimensions. I needed to write a conditional statement to load the correct image if a new iPhone was detected.

UIInterfaceOrientation orientation = [[UIApplication sharedApplication] statusBarOrientation]; // iPad doesn't work with device orientation
    if(orientation == UIInterfaceOrientationPortrait || orientation == UIInterfaceOrientationPortraitUpsideDown) {
        if ([[Utilities deviceType] isEqualToString:@"iPhone Retina4"]) {
            self.view.backgroundColor = [UIColor colorWithPatternImage:[UIImage imageNamed:@"BG-568h"]];
        } else {
            self.view.backgroundColor = [UIColor colorWithPatternImage:[UIImage imageNamed:@"BG"]];
        }
    } else {
        if ([[Utilities deviceType] isEqualToString:@"iPhone Retina4"]) {
            self.view.backgroundColor = [UIColor colorWithPatternImage:[UIImage imageNamed:@"BGLandscape-568h"]];
        } else {
            self.view.backgroundColor = [UIColor colorWithPatternImage:[UIImage imageNamed:@"BGLandscape"]];
        }
    }

Note that it will automatically detect the retina display, so you don’t put @2x in the name. I redraw the screen when the device rotates, so I copied this code to the -(void)willAnimateRotationToInterfaceOrientation:(UIInterfaceOrientation)orientation duration:(NSTimeInterval)duration method.

I added a method to my Utilities.m to detect device type. That’s why you see this line:

[Utilities deviceType] isEqualToString:@"iPhone Retina4"]

But all you need to test for is the height:

if (screenSize.height == 568) {
            device = @"iPhone Retina4";
}