Managing multiple resolutions

[StOneDOes]

One thing I have not really done before in game development is manage multiple screen resolutions. I understand that the viewport size changes so UI graphics don't actually change size in this case, but the positioning of UI elements has to be managed, right?

I'm wondering for those of you who have done this before; what you did and what advice you have. Is it as simple as just using multiplication of the different ratios to reposition the UI, or store different positions per resolution? Its not overly important at the stage I'm at right now, but its still something to think about. Thanks.

[Josh]

You have two things going on:

• The size of the physical monitor, which usually corresponds to the resolution, i.e. a 1980x1080 monitor is bigger than a 1280x720 monitor.
• The size of the pixels. A 3920x2050 monitor will be about the same physical size as a 1920x1080 monitor, but its pixels will be twice as small.

The first issue is fairly easy to deal with, just position your UI elements relative to a corner. If you have a display item that is 200x200 pixels, maybe it will be positioned at screenresolution - 220, for example. Another option is to create your UI at whatever default resolution you want, create all widgets, lock them to edges with Widget::SetLayout, and then call Interface::SetSize to slide everything into place.

For the second problem, the display scale is the best indication of how big the pixels are. The best way to incorporate this into your UI is to first create your GUI with the assumption that everything is using 100% scaling, and then scale the UI using the display scale. If you use Widget::SetLayout to control which edges each widget is locked to, then everything will scale up perfectly.

Additionally, whenever possible you should use Widget::SetIcon instead of Widget::SetPixmap, as icons are resolution-independent images loaded from SVG format.

[Yue]

 

 

In my experience, it is important to position the elements based on the width and height of the screen to be worked on. And you go about positioning images or using the Leadwerks UI, albeit with flaws such as not being able to drag and drop elements into an inventory. 

However the results are usually nice, and the point is to keep in mind that when you make the resolution change the context is cleared and you have to initialize it again.

Translated with www.DeepL.com/Translator (free version)