resolution and aspect rate independent, scalable UI

[Grimmigbeisser]

Hi!

I want to make a UI, that has following features:

1. It is resolution independent:

That means it exists a minimum supported resolution, for which the UI graphics are designed, so that the graphical elements won't be scaled in that resolution. For all higher resolutions the UI elements will be up scaled, so that the UI elements look as same as in the lowest supported resolution (except for some possible scaling artifacts due to floating point pixel values).

2. It is aspect rate independent:

That means the UI elements in e.g. a 4:3 resolution look as same as the elements in 16:10 and 16:9 resolutions. Only the distances between window positions will change according to their anchor positions, which leads to:

3. windows can have defined anchor positions

I want to be able to define, for example that the minimap is always in the bottom right corner of its parent window and that it is shifted by an absolute vector (x,y), which is scaled together with the UI elements in higher resolutions. In that way the minimap would appear always at the same physical position on screen, relative to the bottom right corner of the parent window (resolution and aspect rate independent).
In detail i want to specify a window anchor position in window space of the minimap window and an scaled absolute vector, which is added to it. The anchor position is the point in the window, with which the window is sticked to its defined position in parent window space. That way, the window continues to sit on a defined place in the parent window when it gets scaled.

4. The UI is scalable

I want to be able to scale the whole or parts of the UI in such a way, that the scaled UI elements are keeping their proportional look and keep staying at there anchor positions. The only difference should be that the elements are smaller / greater as before and change distance to each other due to different anchor positions.
This scaling should be independent of the automatic UI scaling on resolution changes. This way it enables the user to use this scaling to define the actual size of some UI elements on the screen.

So how can this four points be achieved with CEGUI?

For 1. I found the following way to do it:
*Set the autoscale attribute of the used image sets to True.
*Set the native resolution attribute to the resolution the UI was designed for and for which the images don't need to be scaled.
*Don't use any absolute dims other than 0 in the used falagard skins because it wouldn't scale with resolution changes.
*Instead use imagedim with dummy images to get a correct scaling.
*Only use the scale part of the unified window dimensions in layouts, because all absolute offset components other than 0 wouldn't scale with resolution changes.

For 2. I'm getting into trouble, because this can only be achieved by using only the absolute components of the unified window dimensions in the layouts. However if I want to use 1. and 2. I can't do it. If I use the scale part of the window coords, the window positions and sizes would get distorted when the resolution aspect rate is changed. If I use the offset part, the window positions and sizes wouldn't scale anymore when changing the resolution and it would look even more odd, because the scaling of the images would still be active.
Last but not least, the image scaling isn't aspect rate preserving, so the images are getting distorted with a resolution with another aspect rate than the native resolution.

For 3. I have the possibility to define a window to be anchored in one out of nine positions made of vertical/horizontal centers and the 4 corners via the alignment properties. However these are somewhat “hardcoded” anchors, because for example if I use the right bottom anchor for a window, it is implied, that the window anchor point lies in the right bottom corner of the anchored window and I have no possibility to define a scaled absolute offset vector (for example if I want the minimap to be sit in this corner but slightly shifted down and right).
To get the window anchored somewhere else as to the 9 positions I have to use scale parts and the offset parts together. This again wouldn't be scalable correctly because of the offset part and the window wouldn't be correctly anchored, because it would have its upper left corner as implicit anchor position.

For 4.: I didn't found anything that allows for additional image scaling. Simple scaling of a parent window wouldn't do it, because I want the anchors to stay in position. The only dirty thing I can think of, would be a dynamic change of the native resolution attribute in the image sets.

I think to achieve all four points with CEGUI, there have to be made some fundamental changes in the window layout and image system of CEGUI.

My suggestions are:

Make the offset part of the udims autoscalable, to get a resolution and aspect rate independent, absolute measure. There could be a property “AutoScaled”, which could be set to true, if the offset parts of the windows udims should be auto scaled. And there could be a system wide property “NativeLayoutResolution” to specify the reference resolution for layouts and a property “WindowAutoScaleDefault” to specify a default of the window specific property.

Make the image (and udim) auto scaling aspect rate preserving. That means only the ordinate with the lowest resolution is scaled and the other is calculated from the native resolutions aspect rate, so the image wouldn't get distorted if a resolution change was made to a resolution with a different aspect rate. The scaling mode could be configurable via an attribute.

Introduce an UDim window anchor position per window. The window position vector then points to this anchor position. By default the anchor position would be {{0,0},{0,0}} (Position vector points to upper left window edge).

Introduce a per window scaling factor, which multiplies into the image and udim autoscale.


Maybe you have some other ideas on how to achive the 4 points, feel free to discuss

yours sincerely,
Grimmigbeisser

[Jamarr]

Ok, so it basically sounds like what you want is for the position to scale, but the size to remain absolute. In this way, the size remains consistent regardless of resolution/aspect but the position scales/moves as the resolution changes. Is this correct?

They way CEGUI currently handles positioning is that there is no anchor (each side is independent) and both scaling and absolute coordinates are relative to their parent. By default, the root window expands to full-screen (lets says 1024x768), such that if you specify a window area like {{0.5,0},{0.5,0},{0,200},{0,100}} the top-left window position would be centered, but because the right and bottom edges are relative to the parent size, and not relative to the top/left position, the window engulfs itself / is hidden. You cannot add scaled-offsets to the size (right/bottom sides) because then the size will scale with the resolution. Thus, you have a conundrum. To address this, you want to add an anchor point such that, if it exists, is relative to the parent and the target-window would become relative to the anchor. This way one could make position relative to the parent and the size relative to the anchor?

That is certainly one option, but as noted would require changes to the core CEGUI code. I do have a theory for a workaround that does not require modifying CEGUI. Recall that the existing position implementation is always relative to the parent. You should be able to conceivably wrap the target window in a hidden DefaultWindow (MousePassThroughEnabled) - this is your anchor. You then forward all movement / position events to this parent window. Thus when the user moves the target window, they are actually moving the anchor window instead. If the anchor window uses scaled-offsets for position (say {{0.5,0},{0.5,0},{1,0}{1,0}}, it's position will always scale with the resolution. You then define your target-window using absolute-offsets (say {{0,0},{0,0},{0,200},{0,100}}, no matter what the resolution is your window will always be the same size.

What do you think?

[Grimmigbeisser]

Hm, i think you might have misunderstood me a little bit. What i am basically want to achieve is following:

*let a window scale with its parent window and do it aspect rate preserving
*let the position of a point in a window be fixed to the position of a point in its parent window independent from scaling the window or its parent window

Maybe another example makes it clearer:

I want to make a button window, that has a black aura, which fades away to all four sides. This aura uses alpha to blend it with the background, so it looks like a black shadow. I want to display the button always in the lower right corner of the parent window. I want to do this in such a way, that the black aura on the right and bottom sides of the button is outside the parent window. So the buttons bottom right edge (button without black aura) always sticks to the right bottom corner of the parent window. This “sticking condition” must be always true, even if the button window or its parent window is scaled wildly.
The button window should scale with its parent window but it should do it aspect rate preserving. That means it should scale with the largest square that fits in the parent window area.
If the parent window of the button covers the whole screen in fullscreen mode, the button would always have the same physical size on the screen, independent of the resolution and aspect rate and it would always sit in the right bottom edge of the screen in the described way.

Assume the button window is 200x200 pixel and the aura part is 20 pixel wide. So the button area would be Rect(20,20,180,180) in absolute button window coordinates.
I could partially simulate such a behavior with CEGUI by defining the button window as {{1, -180},{1, -180},{1, 20},{1, 20}}. However I would have to adjust the absolute offsets in the button window area by the client application each time the parent or the button window is scaled.
Another problem comes to mind when thinking about scaling imagary in a falagard looknfeel. There is no option for (e.g.) a button border to scale with the parent window and do it aspect rate preserving. So I have to define the width of the button border in the looknfeel as absolutedim or imagedim. When using imagedim autoscale in the imagesets must be off. I could adjust the looknfeel internal absolutedims too (if they are accessable), when the button window is scaled.

A much more elegant solution would be possible, if there where something like relative, aspect rate preserving coordinates. Those coordinates would be (1,1) at the right bottom corner of the largest square that fits into the window area and for example (1.33333,1) at the bottom right corner of the window area with a window size of 1024x768.

Greetings,
Grimmigbeisser