- Online Community Forums » Programming Questions » Aspect ratio support

This thread is locked; no one can reply to it. rss feed Print
Aspect ratio support
Member #9,752
May 2008

What do you think the best way to support various aspect ratios is?

My game is running in a 16:9 ratio by default. Handling a 16:10 ratio shouldn't be a problem- since it's not much different, I can just stretch it.
The 4:3 aspect ratio is the other common one that I'd like to support, but I'm not quite sure what the best way to go about it is. If I stretch the 16:9 output to a 4:3 screen, it looks all stretched and weird. On the other hand, I could instead not stretch it and put black bars at the top and bottom of the screen. But then it feels like there's too much black space. Still, I'm leaning towards that option since it doesn't look distorted.

What would you do? How do other games go about this?

[unTied Games]

Member #8,789
June 2007

IMO either support all the ratios properly, or add black bars. If there's any stretching then I hate you.
If you are working on a 2d pixel art game then I also only want whole number magnification (x2 x3 x4) to get that crisp pixel art aesthetic.
If you are working on a 2d vector game then no reason not to just support all ratios.
If you are working on a 3d game then just allow the FOV to be changed (or just calculate the FOV for all aspect ratios and apply it yourself).

That's what I think and given the results of previous discussions here I think most people here will agree with me.

Kris Asick
Member #1,424
July 2001

Being able to support various aspect ratios and resolutions typically comes down to three things:

1: Determine the minimum resolution you want your game to look proper at and ensure that your graphics will scale up from that resolution properly. Typically, make your graphics bigger than they need to be and scale them down using matrix transformations. 640x480 is a typical minimum resolution and works well for scaling purposes.

2. Don't scale things by the exact difference from your target resolution, scale by increments. Try to directly support 640x480, 960x720 and 1280x960 with your scaling system. If you can hit those without incident then all other aspect ratios should work out OK. Also remember to only use a single axis to determine the scaling. (IE: If the resolution is set to portrait, such as 1080x1920, this isn't wide enough to support the same scaling factor 1280x960 could handle.)

3. Your ultimate graphical design needs to be fluid. GUI elements have to be able to centre and move around the edges of the screen based on how big they've been scaled and how much space they have. Remember to design with the minimum resolution in mind.

That is the standard approach but there's one other worth mentioning: When dealing with low-resoltion graphics, like 320x240, scale this up to a high fixed resoltuion first using nearest-neighbour filtering, like 1280x960, then draw that to perfectly fit the screen using linear filtering. It's extremely hard to notice the aliasing between the pixels when you do this, allowing your low-res game to run at the native resolution of whatever the target system is. You probably need to add black bars though for different aspect ratios or have the ability to change your low-res aspect ratio with fluid methodology.

--- Kris Asick (Gemini)

Member #10,091
August 2008

I personally would add letter boxing (black bars)

Funnily enough I kludged this together last night:

1al_get_monitor_info(0, &Monitor_info); 2 Monitor_scale_y = (float)Monitor_info.y2/(float)display_y; 3 Monitor_scale_x = (float)PE_Monitor_info.x2/(float)display_x; 4 Monitor_Aspect_Ratio = (float)Monitor_info.x2/(float)Monitor_info.y2; 5 Display_Aspect_Ratio = (float)display_x/(float)display_y; 6 7 if(Monitor_Aspect_Ratio!=Display_Aspect_Ratio && display_y>Monitor_info.y2{ 8 Monitor_scale_y = Monitor_scale_x; 9 Aspect_Ratio_offset_y=((float)Monitor_info.y2-(float)display_y*Monitor_scale_x)/2.0; 10 } 11 else{ 12 Aspect_Ratio_offset_y=0; 13 }

Keep in mind I have yet to clean the code up, but the idea was to compare the aspect ratio of the monitor to the "allegro display" in addition to scaling.

IF they don't match, and the display is larger, I'll add a letter box offset. I then use the scale factor from the horizontal plane (as to preserve my original scale and NOT have "stretching").

Edit: forgot the link

Jeff Bernard
Member #6,698
December 2005

The solution I'd attempt first is writing the engine in such a way that you can just arbitrarily change the size of the viewport/screen (that is, without scaling). Of course, some resolutions/aspects ratios may look better than others if you have a particularly complex HUD, but it should look fine otherwise.

If that's not an option, then letterboxing is the way to go.

I thought I was wrong once, but I was mistaken.

Go to: