Vice City: Multiplayer

Server Development => Scripting and Server Management => Script and Content Requests => Topic started by: Sebastian on Apr 01, 2017, 01:03 AM

Title: [GUI] Some ultimate Relative positioning & sizing for GUIs ?
Post by: Sebastian on Apr 01, 2017, 01:03 AM
One that would do the whole job, in the best way ?
Title: Re: [GUI] Some ultimate Relative positioning & sizing for GUIs ?
Post by: DizzasTeR on Apr 01, 2017, 03: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.
Title: Re: [GUI] Some ultimate Relative positioning & sizing for GUIs ?
Post by: vito on Apr 01, 2017, 06:29 AM
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
Title: Re: [GUI] Some ultimate Relative positioning & sizing for GUIs ?
Post by: DizzasTeR on Apr 01, 2017, 08:20 AM
Quote from: vito on Apr 01, 2017, 06:29 AMUse 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?
Title: Re: [GUI] Some ultimate Relative positioning & sizing for GUIs ?
Post by: . on Apr 01, 2017, 10:11 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:

(https://s8.postimg.org/ditcqby7p/image.png)

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:

(https://s21.postimg.org/5sjz69uxz/image.png)

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

We simply did:

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:

From this, you can create some functions to help with that:
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:
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 (http://forum.vc-mp.org/?topic=2752.msg20532#msg20532) 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.
Title: Re: [GUI] Some ultimate Relative positioning & sizing for GUIs ?
Post by: vito on Apr 01, 2017, 12:10 PM
Quote from: Doom_Kill3R on Apr 01, 2017, 08: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'
Title: Re: [GUI] Some ultimate Relative positioning & sizing for GUIs ?
Post by: DizzasTeR on Apr 01, 2017, 02:19 PM
Quote from: vito on Apr 01, 2017, 12:10 PM
Quote from: Doom_Kill3R on Apr 01, 2017, 08: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.
Title: Re: [GUI] Some ultimate Relative positioning & sizing for GUIs ?
Post by: vito on Apr 01, 2017, 03:22 PM
Quote from: Doom_Kill3R on Apr 01, 2017, 02:19 PMwhats so "hard coded" there?
Resolution value.
Title: Re: [GUI] Some ultimate Relative positioning & sizing for GUIs ?
Post by: Sebastian on Apr 04, 2017, 01:51 PM
But what about the relative sizing ? how would we get the good one ?
Title: Re: [GUI] Some ultimate Relative positioning & sizing for GUIs ?
Post by: vito on Apr 04, 2017, 02:00 PM
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.
Title: Re: [GUI] Some ultimate Relative positioning & sizing for GUIs ?
Post by: Sebastian on Apr 04, 2017, 02:49 PM
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 :)
Title: Re: [GUI] Some ultimate Relative positioning & sizing for GUIs ?
Post by: Sebastian on Apr 04, 2017, 07: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)
Title: Re: [GUI] Some ultimate Relative positioning & sizing for GUIs ?
Post by: kennedyarz on Apr 05, 2017, 11:23 AM


The truth is that I use this
sX <- GUI.GetScreenSize().X;
sY <- GUI.GetScreenSize().Y;

and works perfect for all my resolutions
Title: Re: [GUI] Some ultimate Relative positioning & sizing for GUIs ?
Post by: Drake on Apr 07, 2017, 04:10 AM
Quote from: sseebbyy on Apr 04, 2017, 07:56 PMTo 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;
Title: Re: [GUI] Some ultimate Relative positioning & sizing for GUIs ?
Post by: EK.IceFlake on Apr 07, 2017, 09:53 AM
Quote from: kennedyarz on Apr 05, 2017, 11:23 AMThe 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.
Title: Re: [GUI] Some ultimate Relative positioning & sizing for GUIs ?
Post by: Sebastian on Apr 07, 2017, 11:42 AM
Quote from: Drake on Apr 07, 2017, 04:10 AMlabel.TextAlignment = GUI_ALIGN_LEFT;

Actually I figured out how to make it work as it should.
For no reason, if you set the text only after setting everything else about that label, it will work like a charm. :|

before:
QuoteAccount.Label = GUILabel( );
   Account.Label.Text = "Please register your account !";
   Account.Label.Pos = VectorScreen.rPos( 6, 10 );
   Account.Label.FontSize = VectorScreen.rSize( 20 );
   Account.Label.TextColour = Colour( 255, 255, 100 );
   Account.Label.FontFlags = ( GUI_FFLAG_BOLD | GUI_FFLAG_ULINE );

after
QuoteAccount.Label = GUILabel( );
   Account.Label.Pos = VectorScreen.rPos( 6, 10 );
   Account.Label.FontSize = VectorScreen.rSize( 20 );
   Account.Label.TextColour = Colour( 255, 255, 100 );
   Account.Label.FontFlags = ( GUI_FFLAG_BOLD | GUI_FFLAG_ULINE );
   Account.Label.Text = "Please register your account !";