# building a game for different resolution phones

I am starting some tests for building a game on the Android program. So far everything is working and seems nice.

However I do not understand how to make sure my game looks correct on all phones as they all will have slightly different screen ratios (and even very different on some odd phones)

What I am doing right now is making a view frustum (could also be ortho) which I set to go from -ratio to +ratio (as I have seen on many examples) however this causes my test shape to be stretched and sometimes cut off by the edge of the screen.

I am tilting my phone to landscape to do my tests (a bit extreme) but it should still render correctly if I have done things right.

Should I be scaling by some ratio before drawing or something?

An example would be greatly appreciated.

PS. I am doing a 2D game .

From a high-level perspective there's only a handful of options, depending on which is more important, maintaining a consistent aspect ratio, or ensuring that no one to see more than someone else just because they have a wider or taller screen.

1. Cropping the parts that don't fit.
2. Stretching the screen to fit, which has the issue you're seeing of stretched images.
3. "Letterboxing" which maintains both aspect ratio and ensures that no player sees more than any other player because of their screen size,
• Thanks. I dont mind cropping. could you give me any starting point for how to do this? ( in terms of projecting to the screen) – Jason Mar 12 '11 at 17:11
• @Jason I'm still fairly new to game dev and the few games I've made haven't had to deal with this so I can't give any useful implementation advice on rendering, however the general idea is that you either have a rendering engine that doesn't care what size the screen is (i.e. something where you're always in a sort of "zoomed in" view where you only see part of some map) or you have a "native" screen size that you're based on, then you shrink or enlarge that so that you don't have any unfilled screen space, maintaining aspect ratio and keeping it centered (make sure no important info gets cut) – Davy8 Mar 12 '11 at 18:51

The 3 options from Davy8's answer are:

• Cropping the parts that don't fit.
• Stretching the screen to fit, which has the issue you're seeing of stretched images.
• "Letterboxing" which maintains both aspect ratio and ensures that no player sees more than any other player because of their screen size

I would add a fourth option, which is my preferred approach. It's really a variation on letterboxing; traditional letterboxing fills the extra space with black, whereas this approach fills the extra space with extra graphics. You could simply extend the background color/image and possibly show an extra logo.

Another way to think about it is that I always crop the screen for every display, and the full display is purposely designed to be bigger than all mobile displays/aspect ratios. Thus there's always extra graphics to fill out the letterboxed area.

In addition, depending on the nature of your game (ie. would this change give certain players an unfair advantage?) and on how your UI is designed you could even shift over some UI elements to fill the extra space. Think of it like a fluid website design, where the right menu stays on the right no matter how wide the window is.

• The fourth option you mention is the exact method I use in my games. It requires a little bit of calculation to get it right when you're doing "upscaled" pixel-perfect graphics (i.e. zoom the game area on higher resolutions) but when done correctly it looks really good no matter the resolution and/or aspect ratio. – goshki Aug 26 '14 at 18:26
• I prefer your 4th method as well. For Android Phones I use the following guidelines: bigosaur.com/blog/31-android-resolutions-definite-answer – Milan Babuškov Oct 2 '14 at 23:04

The ratio you're referring to is called the 'aspect ratio'. It is usually calculated as the 'width / height' (although if you arranged your viewport differently that could be 'height / width')

Remember to cast the divisor to a float!

float aspect_ratio = width / (float) height;


HTH

• Thanks but this was not my question I am aware I can get the different aspect ratio by performing that division. my question is how do I use it to render correctly? – Jason Mar 12 '11 at 14:34