Designing content for the whole iOS family

Andreas Löw

iPhone, iPad, iPod and the screen resolutions

In the beginning developing for iOS was quite simple - there was only one device with a fixed resolution of 320x480. But as the device family grew more and more screen sizes were added.

Here's an overview over the devices:

Device Resolution
iPhone classic, 3G, 3GS
iPod 1st-3rd gen.
320 x 480
iPhone 4, 4S
iPod 4th gen.
640 x 960
iPhone 5
iPod 5th gen.
640 x 1136
iPad1, iPad2
iPadMini
768 x 1024
iPad3 1536 x 2048
all devices

Scaling the assets

If you want to support multiple devices you have to plan your assets and screen resolutions for your application. Since quality is important you should always start with the biggest resolution you want to support and create your assets for that device - that usually means using the Retina display version of iPad. Then scale down your assets for the devices with the lower resolutions.

Scaling down from the Retina version of a device to non Retina display is simply scaling down by 0.5. Not much to think about here. This is why we are focusing on the cross device scalings.

You could do some direct scaling - e.g. from iPad5 to iPhone4 by resizing the 1536x2048 to 640x960 but with this you have 2 different scaling factors for x and y. This results in distorted shapes - circles become ellipses.

This might however be a solution for some background images - but not for foreground sprites and text. With iPhone5 the aspect ratio differences between the devices become more extreme - so it might not work anymore.

The scaling values listed here try to preserve with width or height. They result in additional pixels that have to be filled on one or the other device - or pixels hat are not visible.

It might also be an option to choose some values inbetween - dealing with additional and invisible pixels on a single device.

It's most important to always create the assets for the biggest resolution. This might lead to an unusual workflow: If your main design is for iPhone4 and you also want to support iPad3 you should create the assets for iPad and scale them down.

Note: For simplicity only portrait scalings are discussed here. For landscape mode simply swap width and height.

Choosing a main target

The best target to design for is still iPhone 4. Why? There are 2 main reasons for that:

1. With iPhone4 you have a perfect fit of your game for:

That's still the main mass of iOS users.

2. Your design impact is minimal. If you fit the height in portrait mode you have some small additional space on iPad and some overhead on iPhone5 - but that should be easy to deal with.

Fitting the height means that the height is preserved on all the devices. A game area which perfectly fits the iPhone 4 with 640 x 960 will be 1365 x 2048 on iPad. The image does not cover the complete space in iPad - note the black area on the sketches below. Also note the overlapping area on the iPhone 5 which is invisible to the player.

iphone4-to-ipad-h
iphone4-fit
iphone4-to-iphone5-h

iPad3

Scale1.0
Area1365 x 2048

iPhone4

Scale0.46875
Scaled Area541 x 960

iPhone5

Scale0.5546875
Scaled Area757 x 1136

If you would target iPhone 5 instead the gap that's left empty in iPad is way bigger.

Designing your game

The main challenge is now to adjust your game design in a way that the player can live with the missing or additional space.

So what can you do with the overlapping area? There's not much choice:

What are your options for the additional area?

Keep your game fair!
Enhancing the game's playfied on one device might give a player an advantage just because he uses a different device.

Creating the assets for the different devices

With TexturePacker creating your assets for the whole bunch of devices is a piece of cake. Simply create all the sprites for the highest resolution and use the scaling feature in the AutoSD settings.

The following settings can be reached by pressing the AutoSD gear icon in TexturePacker:

TexturePacker AutoSD
  1. Presets - here you find already defined presets for scaling down by 50% for retina display and another variant scaling down 50% and 25% for Retina iPad. After selecting your preset press Apply. Selecting a preset overwrites the current data.
  2. Main Extension - this is the part from the main file name that is replaced with a scaling specific extension.
  3. The variation list - It's empty here. Press the + button to add a new scaling variation.
  4. Force identical layout - this will keep all scaled variation layouts identical - required for Corona SDK, not recommended for others since it makes building the sprite sheet complicated and adds additional space.
After pressing the + or applying a preset the list will contain some entries:
TexturePacker AutoSD Settings

A new box will popup for each variation you create.

  1. Scale - this is the scale factor for this variation.
  2. Extension - the extension for this variation. It will replace the Main Extension in the file names for textures and data. E.g. if your main file names are sheet@4x.png and sheet@4x.lua you need to set Main Extension to @4x. Adding @2x here will write the scaled files as sheet@2x.png and sheet@2x.lua.
  3. Max. Texture Size - the texture limits for this variation (not required with force identical layout)
  4. Accept fractional values - TexturePacker calculates a kind of base unit size - see Common factor which is a number that can be divided by all scaling factors without creating floating point numbers and ending up in sub pixel rendering. If you have a bad combination of scaling factors no reasonable common factor might be found. Check this box to exclude this scaling factor from the calculation.

You can use Save defaults from the main window to store the values you often use without the need of entering them again next time

If you press Publish now TexturePacker will write all the assets in the different resolutions as specified.

Scale factors

This section gives you a whole overview over the different design and scaling options your have. Keep in mind that you can also choose values inbetween...

Design for iPhone 4, scale down from iPad 3

Fit height

Design for: iPhone5 Assets: iPad3 Fit: height Source Area (iPad3): 1365 x 2048
iphone4-to-ipad-h
iphone4-fit
iphone4-to-iphone5-h

iPad3

Scale1.0
Area1365 x 2048

iPhone4

Scale0.46875
Scaled Area541 x 960

iPhone5

Scale0.5546875
Scaled Area757 x 1136

Fit width

Design for: iPhone5 Assets: iPad3 Fit: width Source Area (iPad3): 1536 x 2304
iphone4-to-ipad-w
iphone4-fit
iphone4-to-iphone5-w

iPad3

Scale1.0
Area1536 x 2304

iPhone4

Scale0.41666667
Scaled Area640 x 960

iPhone5

Scale0.41666667
Scaled Area640 x 960

Design for iPad 3, scale down to iPhone 5 and iPhone 4/4S

Fit height

Design for: iPad3 Assets: iPad3 Fit: height Source Area (iPad3): 1536 x 2048
ipad-fit
ipad-to-iphone4-h
ipad-to-iphone5-h2

iPad3

Scale1.0
Area1536 x 2048

iPhone4

Scale0.46875
Scaled Area720 x 960

iPhone5

Scale0.5546875
Scaled Area852 x 1136

Fit width

Design for: iPad3 Assets: iPad3 Fit: width Source Area (iPad3): 1536 x 2048
ipad-fit
ipad-to-iphone4-w
ipad-to-iphone5-w

iPad3

Scale1.0
Area1536 x 2048

iPhone4

Scale0.416666667
Scaled Area640 x 853

iPhone5

Scale0.41666667
Scaled Area640 x 853

Design for iPhone 5, scale down to iPhone 4/4S

Design for: iPhone5 Assets: iPhone5 Source Area (iPhone5): 640 x 1136
iphone5-to-iphone4-h
iphone5-to-iphone4-w

iPhone4

Fitheight
Scale0.845070423
Scaled Area541 x 960

iPhone4

Fitwidth
Scale1.0
Scaled Area640 x 1136

Design for iPhone 5, scale down from iPad 3

Designing for iPhone 5 and scaling to iPad 3 would lead in upscaling. That's a bad idea for the image quality!

The way to do it right is the following: Create the assets for iPad 3 and scale down in a way that iPhone 5 is the perfect fit.

Fit height

Design for: iPhone5 Assets: iPad3 Fit: height Source Area (iPad3): 1154 x 2048
iphone5-to-ipad-h
iphone5-to-iphone4-h
iphone5-fit

iPad3

Scale1.0
Area1154 x 2048

iPhone4

Scale0.46875
Scaled Area541 x 960

iPhone5

Scale0.5546875
Scaled Area640 x 1136

Fit width

Design for: iPhone5 Assets: iPad3 Fit: width Source Area (iPad3): 1536 x 2726
iphone5-to-ipad-w
iphone5-to-iphone4-w
iphone5-fit

iPad3

Scale1.0
Area1536 x 2726

iPhone4

Scale0.41666667
Scaled Area640 x 1136

iPhone5

Scale0.41666667
Scaled Area640 x 1136

Design for iPhone 4, scale down from iPhone 5

You need to scale down from iPhone5 to iPhone4 to avoid quality loss in your images because of upscaling.

Fit height

Design for: iPhone4 Assets: iPhone5 Source Area (iPhone5): 757 x 1136
iphone4-to-iphone5-h
iphone4-fit

iPhone5

Scale1.0
Area757 x 1136

iPhone4

Scale0.845070423
Area640 x 960

Fit width

Design for: iPhone4 Assets: iPhone5 Destination Area (iPhone4): 640 x 960
iphone4-to-iphone5-w
iphone4-fit

iPhone5

Scale1.0
Area640 x 960

iPhone4

Scale1.0
Area640 x 960

Did you like the tutorial? Please share!