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:
|iPhone classic, 3G, 3GS
iPod 1st-3rd gen.
|320 x 480|
|iPhone 4, 4S
iPod 4th gen.
|640 x 960|
iPod 5th gen.
|640 x 1136|
|768 x 1024|
|iPad3||1536 x 2048|
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.
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:
- iPhone 4s
- iPhone 4
- iPod 4th gen
- iPhone 3gs (with a 0.5 downscale)
- iPhone 3g (with a 0.5 downscale)
- iPhone classic (what's that?)
- iPod 1st-3th gen (with a 0.5 downscale)
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.
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:
- Cut the sky
- Cut the floor
- Cut both by distributing the cut between sky and floor
What are your options for the additional area?
- Add some sky
- Add some floor
- Add a status bar, logo, hud
- Add some static border
- Drag the game controls into the space
- Distributing the space between sky and floor
- Add some black bars - just like in the movies
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:
- 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.
- Main Extension - this is the part from the main file name that is replaced with a scaling specific extension.
- The variation list - It's empty here. Press the + button to add a new scaling variation.
- 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.
A new box will popup for each variation you create.
- Scale - this is the scale factor for this variation.
- 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 firstname.lastname@example.org and email@example.com you need to set Main Extension to @4x. Adding @2x here will write the scaled files as firstname.lastname@example.org and email@example.com.
- Max. Texture Size - the texture limits for this variation (not required with force identical layout)
- 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.
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
|Design for: iPhone5||Assets: iPad3||Fit: height||Source Area (iPad3): 1365 x 2048|
|Design for: iPhone5||Assets: iPad3||Fit: width||Source Area (iPad3): 1536 x 2304|
Design for iPad 3, scale down to iPhone 5 and iPhone 4/4S
|Design for: iPad3||Assets: iPad3||Fit: height||Source Area (iPad3): 1536 x 2048|
|Design for: iPad3||Assets: iPad3||Fit: width||Source Area (iPad3): 1536 x 2048|
Design for iPhone 5, scale down to iPhone 4/4S
|Design for: iPhone5||Assets: iPhone5||Source Area (iPhone5): 640 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.
|Design for: iPhone5||Assets: iPad3||Fit: height||Source Area (iPad3): 1154 x 2048|
|Design for: iPhone5||Assets: iPad3||Fit: width||Source Area (iPad3): 1536 x 2726|
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.
|Design for: iPhone4||Assets: iPhone5||Source Area (iPhone5): 757 x 1136|
|Design for: iPhone4||Assets: iPhone5||Destination Area (iPhone4): 640 x 960|