What’s your resolution?

I want to talk for a minute about resolutions, mine is to publish my first app this year, oh also WQHD πŸ™‚

Ok now that the puns are out of the way, accounting for various displays can actually be quite a challenge, especially if you have limited exposure to what options exist. These days there are dozens if not hundreds of different screens to consider when making a game: portrait or landscape, 16:9 or 16:10 or even 4:3, 1080p or 4k and everything in between and beyond. What if someone handed you a BlackBerry Passport, with a 1440×1440 4.5″ screen, and asked if your app would work on it? I’m not even sure if I have that one covered. In this article I just want to cover some of the major terms and how they can affect games, perhaps in a future article I’ll go over some of the actual design tricks I have used and seen.

First, portrait or landscape refer to the orientation of the device, typically with the longest dimension being vertical (portrait) or horizontal (landscape). With this you have the option of either adapting the interface to match the device’s position or lock the screen into a direction. Most games I have seen force the user into one mode to ensure a consistent experience, utility apps though tend to adapt to fit the user’s preference. You should consider how the user will be interacting with the app when making this decision, if you expect the user to operate it single handedly, perhaps a landscape orientation isn’t the best choice because they may not be able to reach everywhere with their thumb.

Aspect ratio is next, this is determined by the height and width of the device (not by the diagonal which most screens are measured by). It basically means how “square” the screen is, a 1:1 ratio is a perfect square, these days though it seems most screens are in a 16:9 configuration. The big takeaway here though is to remember to not base calculations off one dimension only. At home I run an triple screen gaming setup with an effective resolution of 5760×1080, there has been more than one game which just took that first dimension and assumed the height based on a 16:9 aspect ratio. End result: I get menus with only 1 button to click or cutscenes staring at my character’s stomach, it isn’t pretty and in some of those cases, it is actually game breaking, I can’t even click the start button.

1080p seems quite popular these days...
Some of the screen sizes and resolutions I have.

Finally we get to resolution, this might seem like the most straightforward, but not always. Resolution is the number of pixels on the screen, height by width or vice versa, 1920×1080 is a common one because it is the resolution for most tvs. (Side note, some people, like myself, might just say 1080p. The ‘p’ refers to progressive scan, vs interlaced, you can read up more on that at Wikipedia, it really doesn’t matter though for app creation.) A 1080p screen is a 1080p screen right? Well no, this brings up the tricky bit called pixel density.

Pixel density is usually advertised as the pixels per inch (PPI). When the manufacturers talk about having a retina screen, this just means a very high pixel density, one to the point where there are so many per inch that your eye cannot distinguish them. This gets important because while both my tablet and my phone have 1080p screens, if I use the same interface for both it will either take up way too much space on the tablet, or be far too small on the phone. When I mean same interface, I mean the same image or source dimensions, if you don’t use any scaling what might be a perfect thumb sized button on the tablet is now just the size of my fingernail on the phone. This is tricker to handle, you might try and define a tablet vs phone interface that scales appropriately. For my first app I plan to just restrict it to tablets via the app store rules because there is too much happening on the screen for the interface to function on a smaller device.

I shouldn't have upgraded just the center panel...
Here’s a curveball, can your game handle this multi-monitor resolution?

I hope this gave a good crash course on all the things to consider when dealing with a variety of target devices, but like the BlackBerry above, there might be a new device eventually that you weren’t expecting, maybe even a round screen like on the smart watches. The overall goal is to make sure your app works and provides a consistent experience. I’m sure there are plenty of tips and tricks out there to handle the details, if you want to share something you’ve learned, feel free to post it below.

Leave a Reply

Your email address will not be published. Required fields are marked *