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

Sebastian

  • VC:MP Beta Tester
  • Something like this: hga hga hga
  • Posts: 1,092

DizzasTeR

  • VC:MP Beta Tester
  • Infinite loops defy infinity by overflowing memory
  • Posts: 1,168
[GUI] Re: Some ultimate Relative positioning & sizing for GUIs ?
« Reply #1, on April 1st, 2017, 04:32 AM »
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

  • Sr. Member
  • Posts: 405

DizzasTeR

  • VC:MP Beta Tester
  • Infinite loops defy infinity by overflowing memory
  • Posts: 1,168

.

  • VC:MP Beta Tester
  • .
  • Posts: 1,807
[GUI] Re: Some ultimate Relative positioning & sizing for GUIs ?
« Reply #4, on April 1st, 2017, 11:11 AM »Last edited on April 1st, 2017, 11:17 AM
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]
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]
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

  • Sr. Member
  • Posts: 405

DizzasTeR

  • VC:MP Beta Tester
  • Infinite loops defy infinity by overflowing memory
  • Posts: 1,168
[GUI] Re: Some ultimate Relative positioning & sizing for GUIs ?
« Reply #6, on April 1st, 2017, 03:19 PM »
Quote from vito on April 1st, 2017, 01:10 PM
Quote from Doom_Kill3R on April 1st, 2017, 09:20 AM
(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

  • Sr. Member
  • Posts: 405

Sebastian

  • VC:MP Beta Tester
  • Something like this: hga hga hga
  • Posts: 1,092

vito

  • Sr. Member
  • Posts: 405

Sebastian

  • VC:MP Beta Tester
  • Something like this: hga hga hga
  • Posts: 1,092
[GUI] Re: Some ultimate Relative positioning & sizing for GUIs ?
« Reply #11, on April 4th, 2017, 08:56 PM »
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

  • Sr. Member
  • Making American Great Again
  • Posts: 334

Drake

  • VC:MP Beta Tester
  • Posts: 287
[GUI] Re: Some ultimate Relative positioning & sizing for GUIs ?
« Reply #13, on April 7th, 2017, 05:10 AM »
Quote from sseebbyy on April 4th, 2017, 08:56 PM
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

  • Hero Member
  • "We are the champions my fellahs" - Sufyan/VK.SuFy
  • Posts: 1,761