mobile games for different screen sizes and resolutions

From Petr Sladek

Jump to: navigation, search

How can you design a game for multiple platforms with all the different devices and screen sizes?

You may read the official Android guide for Supporting Multiple Screens but that might not answer your question at all.

The answer is to use the Safe Area resolution 3:2 all the time.

Contents

3:2

This 3:2 resolution is native to iPhone 3GS (480x320) and iPhone 4 and iPhone 4S (960x640).

The 3:2 was chosen as the Safe Area.

4:3

The 4:3 resolution is native to iPad 1 and iPad 2 (1024x768) and iPad 3 (2048x1536).

In the 4:3 resolution case, the game graphics must be stretched vertically, the space above and bellow the Safe Area must be filled with content.

The new resolution recalculation is:

Safe Height = (Original Width div 3) * 2

Top Shift = (Original Height - Safe Height) / 2

Let's take for example the classical 1024x768 resolution:

Safe Height = (1024 div 3) * 2 = 682 pixels

Top Shift = (768 - 682) / 2 = 43 pixels

16:9

The 16:9 resolution is native to iPhone 5 (1136x640).

In the 16:9 resolution case, the game graphics must be stretched horizontally, the space to the left and right of the Safe Area must be filled with content.

The new resolution recalculation is:

Safe Width = (Original Height div 2) * 3

Left Shift = (Original Width - Safe Width) / 2

Let's take for example the 1280x720 resolution found in Samsung Galaxy S III:

Safe Width = (720 div 2) * 3 = 1080 pixels

Left Shift = (1280 - 1080) / 2 = 100 pixels

Other resolutions

There are many other display resolutions. For example 16:10 resolution, which is native to Samsung Galaxy Tab 10.1 (1280x800) and 17:10 resolution, which is native to Samsung Galaxy Tab 7 (1024x600).

In these cases, similar approach must be taken.

Personal tools