[GUI] Some ultimate Relative positioning & sizing for GUIs ?

[Sebastian]

One that would do the whole job, in the best way ?

[DizzasTeR]

Lets say I have resolution 1280x720

I make something at x: 1000 and y: 500 then

Relative X = (1000/1280)*ClientX
Relative Y = (500/1280)*ClientY

Where ClientX and ClientY is the resolution of another player. This will be perfectly placed in all resolutions. Same can be used for sizing.

[vito]

Use position ratio as Anik used here http://forum.vc-mp.org/?topic=4443.0
for example screen_size.X * 0.5, screen_size.Y * 0.5 - dot in center
to put element in the center make offset -50% of element width and -50% of element height

[DizzasTeR]

Use position ratio as Anik used here http://forum.vc-mp.org/?topic=4443.0
for example screen_size.X * 0.5, screen_size.Y * 0.5 - dot in center
to put element in the center make offset -50% of element width and -50% of element height

...

(1280/1280)/2 * clientX => 0.5 * clientX

Wasn't my post enough?

[.]

The way to do it is to stop using pixels to position your stuff. Instead, us a float value from 0.0 to 1.0 which specifies where exactly is your widget positioned. From there, you can easily multiply with the actual screen size in pixels and get the relative position. That's how relative positioning works. And not by specifying pixels and then expecting to get a relative position. That's ridiculous.

Imagine that you have this 640x480 screen:

I have taken the liberty to draw a guide to help with visualizing how all of this works.

And let's say that I want to position something at the relative position of 0.3x, 0.7y.  But the GUI library needs pixels for positions. So what do we do? We multiply that floating point relative position by the number of pixels and we get the actual position in pixels:

You can measure the pixels as the image is exactly 640x480 and you can see that the placement was matching perfectly.

We simply did:

• 0.3 * 640px = 192px
• 0.7 * 480px = 336px

And this method will always give you the relative position regardless of the screen size. That's how relative works people. Stop trying to convert from pixels of a fixed screen size to another size and then back and whatever dafuq you're trying to do.

If the screen was 800x600 then the same would apply:

• 0.3 * 800px = 240px
• 0.7 * 600px = 420px

From this, you can create some functions to help with that:

Code Select Expand

function RelativePosition(rx, ry)
{
local viewport = GUI.GetScreenSize();
return VectorScreen(rx * viewport.X, ry * viewport.Y);
}

function RelativePositionOf(rx, ry, px, py)
{
return VectorScreen(rx * px, ry * py);
}
Which can be used as:

Code Select Expand

local pos = RelativePosition(0.3, 0.7);

// we specify the viewport size
local p1 = RelativePositionOf(0.3, 0.7, 640, 480);
local p2 = RelativePositionOf(0.3, 0.7, 800, 600);

local viewport = GUI.GetScreenSize();
local p3 = RelativePositionOf(0.3, 0.7, viewport.X, viewport.Y);
I've already described this several times on this forum. I don't know what makes you people chose to implement the most f*ed up approaches instead of simply using the correct information I gave you.

[vito]

(1280/1280)/2 * clientX => 0.5 * clientX

Wasn't my post enough?

No, hardcoding resolution is a bad idea for 'ultimate Relative positioning'

[DizzasTeR]

(1280/1280)/2 * clientX => 0.5 * clientX

Wasn't my post enough?

No, hardcoding resolution is a bad idea for 'ultimate Relative positioning'

That's the most reliable way of doing so.. whats so "hard coded" there? Its just a proper way to use just like how SLC mentioned above. You treat the screen horizontally and vertically from a float of 0.0 to 1.0. These calculations give you the appropriate 4-decimal accurate value which is working from lowest to highest possible resolution.

[vito]

whats so "hard coded" there?

Resolution value.

[Sebastian]

But what about the relative sizing ? how would we get the good one ?

[vito]

Same as height of element, get game's size Y * your ratio of size
For example - element.FontSize = (GUI.GetScreenSize().Y * 0.25).tointeger(); - will be 1/4 of screen height.

[Sebastian]

I was thinking more about a way that uses both X and Y screensize to get a proper size :/
But actually it doesn't matter.

Thank you everyone !
And mostly to @happymint for explaining

[Sebastian]

Actually, this "ultimate" relative positionating won't happen. (this sucks)
Something is broken and is quite deep.

To understand what I mean, I suggest you to place a text in pos x 0 y 0 and set it as a child of an window.
Now change your resolution, and you will see what I mean: the text won't be in the same pos, even if the coords are the same.
(and actually auto-calculated by window as an offset)

[kennedyarz]

The truth is that I use this
sX <- GUI.GetScreenSize().X;
sY <- GUI.GetScreenSize().Y;
and works perfect for all my resolutions

[Drake]

To understand what I mean, I suggest you to place a text in pos x 0 y 0 and set it as a child of an window.
Now change your resolution, and you will see what I mean: the text won't be in the same pos, even if the coords are the same.
(and actually auto-calculated by window as an offset)

label.TextAlignment = GUI_ALIGN_LEFT;

[EK.IceFlake]

The truth is that I use this
sX <- GUI.GetScreenSize().X;
sY <- GUI.GetScreenSize().Y;
and works perfect for all my resolutions
[/quote
The truth is that you should update it in the event which gets called when the game window resizes.