This Cyber Monday Envato Tuts+ courses will be reduced to just $3. Don't miss out.
Chosing the optimal resolution for a game from the start of development can reduce headaches with porting later on. In this Quick Tip, I'll help you choose the best screen resolution for your game.
The "best" resolution depends on a lot of factors:
- The platform the game is supposed to be released on first
- Other possible platforms you plan to port to later
- Graphical fidelity (An 8-bit or pixel art game doesn't need to be hi-res.)
- Genre (A puzzle-game can probably get away with a lower resolution, but a high-speed competitive FPS might not.)
I'm going to focus on the platforms, and specifically those that are most relevant to indie devs. This data is based on the resolutions of the devices available, and my own experience with them, which I've gathered making games for PC, Mac, the web, mobile devices, and microconsoles. Different platforms come with different requirements, and this should get you up to speed.
Web (Via a Plugin, Like Unity or Flash)
Desktops vary in the resolutions that they use, and designing a game with too specific a resolution can cause an embedded web player to be cut off and not display properly. And since a lot of people use laptops and netbooks with lower resolutions to access the web and play games, it's very important to keep this in mind.
After several years of testing and experimenting I have learned that using a resolution higher than or equal to 1024x768px will garner complaints, as the game will not fit on the screen of many users.
960x640px appears useful, as that is also the resolution of many iDevices, and will therefore make porting easier. The majority of Flash games also run in lower resolutions than this (see Emanuele Feronato's 2009 post, The Perfect Size for a Flash Game), meaning that a resolution like 640x480px will give plenty of room for a game.
Desktop (PC, Mac, Linux)
Desktop users expect the game to adjust its resolution automatically to fit the screen best. As such, it would ideal for such a game to support all prominent aspect-ratios and resolutions. Windowed-mode is a plus, but not necessarily required.
Microconsole (Ouya, GameStick)
Both the Ouya and GameStick can run games in 1080p (1920x1080px) and 720p (1280x720px).
Since these games are supposed to be played on a large television, with the player sitting some distance away, a high resolution becomes important for the experience to prevent loss of visual fidelity.
There are only a few resolutions used across all iDevices, making it quite feasible to adapt a game to each one.
- 480x320px, 3:2 (iPhone, iPhone 3G, iPhone 3Gs, iPod Touch 1st Gen—3rd Gen): These have been mostly supplanted by newer devices. Since they have the same aspect ratio as the next-biggest iOS-resolution, a game designed for the larger one should scale down nicely to fit.
- 960x640px, 3:2 (iPhone 4, iPhone 4S, iPod Touch 4th gen)
- 1136x640px, 71:40 (iPhone 5, iPhone 5c, iPhone 5S, iPod Touch 5th gen): This is the same height as the 2nd Gen iDevices, but the screen is 1136 pixels wider. If a 960x640-image is just scaled up, one could make a solid argument that the difference could not be spotted easily.
- 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): This is twice the resolution of the previous generation. When making an iPad game it is therefore easier to create it for a 2048x1536px display first, and then scale it down by 50%.
There are thousands of Android devices out there, with several dozen resolutions between them.
I have found that the easiest way to adapt to all of these is to adapt to the most commonly-used screen ratios instead, as there are only a few to select from (compared to the dozens of resolutions). By adapting a game to each ratio, with a high resolution as a basis, one can be reasonably sure of having it work on the majority of devices available.
The resolutions you have to choose from are:
- 16:9, as in 1280x720px
- 16:10, as in 1680x1050px
- 5:3, as in 1280x768px
- 3:2, as in 960x640 (This screen ratio is also used on iDevices.)
- 4:3, as in 1024x768
So, What Do I Do With This Info?
Let's say you want to make a small web game for gaming portals like Newgrounds, Kongregate, or possibly even with Facebook integration: 640x480px will do.
What about an iOS game that will later have a web demo and could possibly be ported to Android? Then 960x640px is a good choice. It covers one of the iDevice resolutions, and is a feasible size for web builds already.
A PC game that also comes out on Ouya and can later be ported to Linux and Mac? Start out with 1920x1080px—that covers one of the higher desktop resolutions and the standard Ouya resolution. Don't forget to add resolution options!
Or, for an iPad-Only game: design it in 2048x1536px, the highest iPad resolution. It can then easily be scaled down to the lower resolution devices.
Some choices also make it more sensible to start with a high resolution and then scale down (like desktops), while with others you can zero in on a single resolution. But remember, designing in a high resolution only does not automatically guarantee it can scale to lower ones. Test it to make sure that font sizes and game elements are readable.
This is just to get you started with your first games. Once those are out, you'll have enough experience, knowledge, and your own criteria to determine what is most useful for your purposes.