GUI Resizing

[Jojendersie]

• make a concept (relative...)
• implement

[Thanduriel]

I can think of two ways: A. All coordinates are in screen space [-1,1]x[-1,1]

• easy / intuitive to use
• scales bad with different ratios

B. positions are in Screencoords and the size defines the ratio height/with correct as well as an abstract size

• difficult to use
• does not well scale with ratios either
• above issue could may be solved allowing to define for which edge of the GuiElement its Position is set?

To maintain readability text should not be stretched. This harmonizes with B. but can be build up with S. too with automatic font size adjustments to fit in the defined borders.

Am i missing out an important fact why any of these solutions is the better choice or not imaginable at all?
Ideas for a better concept?

[Jojendersie]

B. I see problems when neighbored elements begin to overlap due to the fact that the dynamic ratio allows a different scaling factor either in x or in y direction.

A. I like this more because it is much more obvious how things will react.

• font size should be set carefully to make sure it fits into the elements in most cases
• otherwise it should be scaled down in each direction independently \ I have seen this in other GUIs; Preserving as much original sizes as possible looks best as long as the stretch factor is small enough

[Wumpf]

61 is duplicate, sorry!

Good observations! However I think A and B are almost the same - in each case there is some kind of relative coordinate system that is stretched or not. In case A the ratio is implicitly defined by the positioning of the elements itself, in case B it is defined by the screencoords used for positioning.

Also I think there are some other possiblities. In each case it is important to be able to define element positions to a given anchor like top-left, top-right, bottom-left, bottom-right, center etc. I'll try to list my view on the possibilities:

1. scale with screen
   • leads inevitable to ugly non-uniform stretching
   • from my understanding both suggestions A & B result in such scaling
2. ratio conserving scaling
   • e.g.: Relative coordinate system is defined from 0-1 (x/y) for a ratio of 16:9. The system guarantees that 0-1 is always on the screen for 16:9 resolutions, for all other ratios also negative and higher coordinate ranges may be visible on the screen, but NEVER less. For a ratio of 16:10 the range of x remains 0-1 but in the y there would be -0.1111 - 1.11111 on the screen -> a white square drawn from 0-1 (x/y) would now be "letterboxed", but with the same ratio as before!
   • There are different variants, but in the end all result in scaling without stretching
   • without proper anchoring of each ui element, "letterboxing" occurs - ui elements that were ordered along a screen edge (by "absolute" coordinates without anchoring) in one configurations, may be not along the edge in another screen configuration
3. no scaling
   • Each UI element needs to be defined in pixelcoordinates
   • Enables pixel accurate rendering
   • Looks always right but may be too small or too large on different resolutions
   • Useles without anchros.

I think we all can agree that uniform scaling is definitely not the way to go! Ratio conserving scaling is complicated, sometimes confusing and there are many details to look after. However I think this is the "ultimate solution" when combined with proper anchoring. No scaling (+ anchors) is a much easier solution that is not as bad as it sounds! The big drawback is that the game may become unusable outside a DPI range.