Managing different mobile screen sizes - Haxe, OpenFL

Question

What is the best way to approach the variety of screen ratios of android mobiles?

Currently, I use EXACT_FIT, which forces (stretches) the app to the target screen. But how do I dynamically re-size my content to the screen ratio, so the content remains visually in the same ratio.

Answer 1

If you want to dynamically resize and position elements, you'll have to get the actual screen resolution, and then calculate a resize ratio based on some "base" resolution value.

You can get the screen dimensions with

lib.current.stageWidth lib.current.stageHeight

Remembering that for these values to work, you'll have to set your window dimensions to 0 on android on your project config file.

Answer 2

To get correct and real WINDOW size use this:

Lib.application.window.width
Lib.application.window.height

it's not always thesame to this:

Lib.current.stage.width
Lib.current.stage.height

Answer 3

I would recommend that you find a size that fits most to all screens through trial and error. Once you find this screen size add a border to your game that expands out farther than most players will see. This will then allow you to fill each screen and keep your aspect ratio while also removing any of that awkward blank space around the edges. After you do this you should be able to scale the screen to fit height or width of the screen (which ever maintains your aspect ratio) and not have any scaling issues.

Answer 4

I would recommend defining your content's position & size as percentages of screen width and height. In pseudo-haxe-code (I'm learning Haxe/HaxeFlixel right now ;) ):

class Registry {
    ...
    static var SCREEN_WIDTH;
    static var SCREEN_HEIGHT;
    ...

    static var X_UI_HUD_TITLE = 0.15;
    static var Y_UI_HUD_TITLE = 0.05;
}

...

class HUD {
     var title:FlxText;

     public function new() {
         title = new FlxText();
         title.x = Registry.SCREEN_WIDTH * Registry.X_UI_HUD_TITLE;
         title.y = Registry.SCREEN_HEIGHT * Registry.Y_UI_HUD_TITLE;

     }
}

This way, the SCREEN_WIDTH and SCREEN_HEIGHTmay change but the title text will be at the same apparent position.