Managing multiple resolutions/viewport sizes

[RichardBray]

I know this question has been asked a bunch in the DIscord server but it would be good to have it documented here as well for searchability.

Also it's a question I genuinely want to know the answer to :)

I know there's FlxRes by Harpwood out there which I plan on checking out but what's the best way to

a) Create a game for mobile that will support multiple mobile viewport sizes
b) Create an option where the player can change the game resolution (720 to 1080 that sort of thing)

[giuppe]

When working on mobile, I found much simpler to address this problem via the screen ratio instead of the resolution. On PC we use the concept of resolution because:

• historical reasons;
• the pixel density is mostly the same (although this is changing in the last years);
• usually the number of possible resolutions is small.

That's complicated to do on mobile, as:

• there are many different non-standard resolutions;
• there are a lot of possible different pixel densities;
• the OS locks your ability to change the resolution;
• and in many cases the OS can and will give you a different res than the actual one .

What I usually do:

• I choose a resolution for the game, the native res, that is the "game area" (for example 960x480);
• I set the game as fullscreen (this will activate the Lime/OpenFL auto-resize, that I found works really well across devices);
• I use a maintain-ratio scaling strategy (for example RatioScaleMode).

By default, RatioScaleMode will add black bars/letterboxing to your screen, when the viewport has a different ratio than your game native res.
In our example, 960x480 on a 1920x1080 display will be resized 2x to 1920x960 and there will be two 60-px wide bars on top/bottom.
That's sub-optimal, because it will scream "the game was not made for your device" but it's a quick way to start testing on multiple devices at the beginning of the development.

But! You can use RatioScaleMode with the fillScreen option, and it will crop the native res to maintain the ratio. In our example, 960x480 will be resized 2.25x and will become 2160x1080 - without letterboxing. The actual screen remains at 1920x1080 so you'll have 120px cropped out from the top and the bottom. This may seem slightly worse but you "just" need not to draw anything important on the area that will be cropped.

So you define which ratios you want to support fully, and calculate for each one the smaller rectangle where it is "safe" to draw. In this safe area you'll draw the UI, place the buttons, show the game world etc. Outside of the safe area you'll put backgrounds, vignettes, decorative objects etc.

I mostly used Flixel-UI for keeping track of this; you can define several layouts, one for each ratio (e.g. one for 16:9, one for 4:3, one for 16:10, etc.) via the <layout> and <failure> tags. In most cases you'll just need to move the UI buttons to the corners of the current safe area.

---

As for the (b) question; if you want to make that on PC:

• you can access the available display modes via OpenFL Lib object, through the openfl.Lib.application.window.display.supportedModes array that contains the possible display modes (here is the definition of a mode);
• once you select one of them, you set it via openfl.Lib.application.window.displayMode = mode;

You can try that on mobile too, but it probably won't work.

[RichardBray]

Wow, thank you for this super detailed answer @giuppe