Choosing the correct screen resolution for games can be troubling for gamemakers because of all the various devices available for them to choose. Deciding on the proper screen resolution should be done before you begin developing your game because it a lot harder to adjust a games resolution then it is to set one up from scratch. The most important question you need to ask yourself is “Which platform do I plan on making my game for?”. HTML 5 games are made with smaller resolutions then mobile devices and desktop games and look bad when scaled up to fit the larger resolutions of the newer devices so knowing what your market is before you start will allow you to plan efficiently and prevent hours of confusion and heartache late in the process.
Desktop (PC, Mac, Linux)
When using full screen mode your game will automatically adjust to fit your screen. This means that if your game is small, it will automatically zoom itself in to be the largest size possible without skewing it. In many cases this is ideal, but for gamemakers that choose to use pixel style art this can leave their game looking fuzzy. Windowed mode prevents your game from being enlarged and creates a window the exact size of the game. This is my preferred method for pixel style games and is the easily way to prevent your desktop games from distorting themselves.
HTML 5
HTML 5 games can be made in any size but will be cut off if the games resolution is higher then the screens resolution. To prevent the game from being larger then the screen it is best to make your games designed for HTML 5 with a small resolution(1024x768px for less) due to the amount of people today that use smaller netbooks and tablets to play games online. When looking at HTML 5Â and Flash games online you will find that most are made with smaller resolutions(800x600px and 640x480px), this is because Flash has been around for many years and some of the gaming portals require your game to be one of these sizes. Nowadays a lot of game designers have opted to make their games with the resolution of 960x640px because it works for HTML 5 and is easily ported over to other devices.
iOS
The iDevices use only a small set of uniform resolutions for all their devices making it easily for you to make your game work on all of them. You should always attempt to design your game to fit the largest screen possible so that your game will be scaled down to fit the smaller devices rather the scaled up to fit the larger ones causing blurring and distortion. iPad are far larger then iPhones, so games designed for them will end up being rather small if played on a iPhone without properly porting it over.
Screen Resolutions To Use For iPhones
- 480x320px, 3:2 (iPhone, iPhone 3G, iPhone 3Gs, iPod Touch 1st Gen—3rd Gen):
- 960x640px, 3:2 (iPhone 4, iPhone 4S, iPod Touch 4th gen)
- 1136x640px, 71:40 (iPhone 5, iPhone 5c, iPhone 5S, iPod Touch 5th gen)
Screen Resolutions To Use For iPads
- 1024x768px, 4:3 (iPad 1st gen, iPad 2, iPad Mini)
- 2048x1536px, 4:3 (iPad 3rd gen, iPad 4th gen, iPad Air, iPad mini 2nd gen)
Android
Android is the most common type device on the market with dozen of different resolutions making it extremely time consuming to try to adjust your game for each and every one of them individually. Easiest thing for you to do is to design your game around a screen ratio instead of a screen resolution. This allows for your game to auto adjust it’s own size and still look the way you intend for it to look. This may change the size of your game (enlarge or shrink objects) but will allow it to work on the majority of androids so as long as the change in size isn’t to drastic to should port nicely to all the various Android devices.
Screen Resolutions To Use For Android Devices:
- 16:9 (1280x720px, 1152x648px, 640x360px…)
- 16:10 ( 1680x1050px, 1440x900px, 1280x800px…)
- 3:2 (960×640,480x320px…)
- 4:3 (1440x960px,1024×768,480x320px…)
