Announcement

Collapse
No announcement yet.

UMG 16:9 - 16:10 resolution

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

    UMG 16:9 - 16:10 resolution

    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)

    Click image for larger version

Name:	shortest.png
Views:	1
Size:	44.4 KB
ID:	1188210

    Then I played around and come to this

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

    Click image for larger version

Name:	longest.png
Views:	1
Size:	35.5 KB
ID:	1188213

    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.
    Click image for larger version

Name:	curve.PNG
Views:	1
Size:	42.7 KB
ID:	1188214
    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.

    #2
    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.

    Comment


      #3
      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:
      Click image for larger version

Name:	Безымянный.png
Views:	1
Size:	72.0 KB
ID:	1112278

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

      Comment


        #4
        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

        Comment


          #5
          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!

          Comment

          Working...
          X