UMG 16:9 - 16:10 resolution

[Van_Hinten]

Hey,

I am currently working on the UI layout of my game and I am struggeling with maintaining the correct aspect ratios on the widgets.

I designed the UI for 16:9 resolutions and that scales very well. But since I have a 16:10 (22’') screen myself I noticed that the scaling was a bit off.

Scale Rule: shortest side
Scale Curve: 720 = DPI Scale 1.0 (8640 = DPI Scale 12)

Then I played around and come to this

Scale Rule: longest side
Scale Curve: 720 = DPI Scale 1.0 (8640 = DPI Scale 12)

I guess that could work as solution since the empty space that appears on the bottom doesnt really matter.
But I am not quit sure if longest side is a good rule for the whole project?

So I tried to manipulate the Scale Curve a little

Scale Rule: shortest side
Scale Curve:
720 = DPI Scale 1.0
1050 = DPI Scale 1.3125 (1680/1280=1.3125)
8640 = DPI Scale 12

That lead to the same result as in the second image but since the curve isn’t linear anymore.

I would have to set a DPI Scale for every resolution.

How did you guys solve the multi resolution issue? Also I don’t really care about 4:3 since I considered no ones plays on that screen resolutions anymore. And the game is PC only so mobil devices also don’t matter.
Any help is appreciated.

[Van_Hinten]

Since nobody is answering I am pushing a little:

I would just go with using the Scale Curve to set following resolutions

16:9
1280x720
1366x768
1600x900
1920x1080
2048x1152
2560x1440
2880x1620
3200x1800
3840x2160
4096x2304
5120x2880
7680x4320
15360x8640

16:10
1280x800
1440x900
1680x1050
1920x1200
2560x1600

Also I come to the conclusion I should not ignore 4:3 aspect ratio because in the steam hardware survey there are quite a few 4:3 players

So following resolutions are missing:
1024 x 768 (4:3)
1280 x 768 (5:3)
1280 x 960 (4:3)
1280 x 1024 (5:4)
1600 x 1200 (4:3)
2560 x 1080 (21:9)

but I have no idea how I can make a UI that fits both 4:3 and Widescreen.
Also I have decided that 1024x768 is my absolute minimum. No lower resolution will be allowed.

[Barnacle-Rus]

There are at least 3 posible solutions you can play with:

1. Anchors.

2. Combination of “Overlay” + “Scale Box” to make parts of (or full) UI scale right.
   For my personal case this was the best solution, because I’m using “Constrain Aspect Ratio”. So it looks like this:
   

   

3. Different widgets and simple logic like “If res is 16:10, then show Widget2”.

[Van_Hinten]

I am currently working on a similar solution like yours and I guess that will be the best. Make the UI fit 16:9 resolution and scale it while keeping the ratio.
Might not be the prettiest but I think its good enough for the start.

I was thinking about making different widgets but it seemed a little to hacky

[jwatte]

The first thing you have to fix: You’ll want the “flower” to be in the center of each widget. That way, you won’t get widgets pushing off the side of the screen.
Often, this is good enough that you don’t need to make any other changes, and it will just “work fine.”
If you have really wide widgets and narrow margins, you may additionally have to split the flower to scale the widgets relatively, but try without doing that first!