building a game for different resolution phones

Question

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 .

Answer 1

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.

Your options are:

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,

Answer 2

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.

Answer 3

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