Calculating screen position, centering, and scaling based on resolution

[Backsage]

I am trying to figure out how to get the positions, centering, and scaling for a window to work so that it works on all resolutions. Now right now, I'm just focusing this on guiCreateWindow. I'm working with the absolute arguments. I could use relative arguments, but then I'd have to make all of my other GUI elements use the relative arguments and I'd also have to scale them a little bit bigger so that they show up correctly on different resolutions.

I was reading this topic: https://forum.multitheftauto.com/topic/27701-centering-a-window/
and I wanted to see if I could produce similar results.
My old topic: https://forum.multitheftauto.com/topic/87889-help-make-guicreatewindow-scale-to-all-resolutions/

I did do what Bonus said and it does position and center like I'd want it to in a 1024 x 768 resolution. But if I do it on a 640 x 480 resolution, the window gets centered, but its x and y positions are not like in the 1024 x 768 resolution.

These are the calculations:
https://puu.sh/rJtqs/5c49d05d4f.png

This is what it looks like ingame:
in 1024 x 768 resolution:
https://puu.sh/rJvZN/0a2eee5a14.png
in 640 x 480 resolution:
https://puu.sh/rJwPT/d8346932b8.png

If however, I use relative arguments this happens:
1024 x 768 resolution:
https://puu.sh/rJx0Z/c235408a4e.png
800 x 600 resolution:
https://puu.sh/rJx1m/a4f68ce40f.png
640 x 480 resolution:
https://puu.sh/rJx1S/0d6638a57e.png

Notice how everything is positioned and scaled based on the resolution. Now I wanna know how to do it like relative, but using the absolute arguments. I just wanna know the math behind it. Now another question is, if I need some math to calculate it based on resolution, do I need to do something similar with the other gui elements?

And I apologize for using puu.sh. I was kinda lazy.

 

Edited October 15, 2016 by Backsage

[Gravestone]

Try using this simple calculation to resize/fit the window to every resolution.

local width, height = guiGetScreenSize()
local sx, sy = width/1366, height/768
local window = guiCreateWindow(sx*10, sy*280, sx*200, sy*200, "Test", false)

 

1 hour ago, Backsage said:

if I need some math to calculate it based on resolution, do I need to do something similar with the other gui elements?

And yeah, you'll have to do the same for elements attached to that window. The positioning of the elements are automatic for every resolution but the sizing isn't. Hence, you'll have to use something similar again:

guiCreateButton(20, 20, sx*50, sy*50, "Button", false, window)

 

[Backsage]

Ok, first off, I don't know where you got 1366 and 768 from. And second, I don't even know what sx and sy are supposed to mean. If the width is 1366 and height is 768, you are essentially just dividing them by themselves, which will result will 1, so it won't really make a difference.

[Gravestone]

4 hours ago, Backsage said:

Ok, first off, I don't know where you got 1366 and 768 from. And second, I don't even know what sx and sy are supposed to mean. If the width is 1366 and height is 768, you are essentially just dividing them by themselves, which will result will 1, so it won't really make a difference.

1366 x 768 is my resolution. You can put your own resolution and just try the code.

[koragg]

6 hours ago, Backsage said:

Ok, first off, I don't know where you got 1366 and 768 from. And second, I don't even know what sx and sy are supposed to mean. If the width is 1366 and height is 768, you are essentially just dividing them by themselves, which will result will 1, so it won't really make a difference.

I haven't used that on gui elements yet (i have same thing as you on all gui things in my server) but it works same as with dxDrawText. Here's example:

-if your current resolution is let's say 1920x1080 and you divide it by 1440x900 (that's my own example, same with what @Gravestone said) then the result will be more than 1, meaning the size of the element will get bigger, thus looking fine on FHD screens. 

-if your current resolution is for example 1280x720 then after dividing it with 1440x900 size of gui element gets smaller as 1280/1440 < 1 (720/900 < 1).

-and yes, if you're using same resolution as the one on which you're dividing it to it will be exactly 1, so it will also look good on that resolution as well. 

 

*This doesn't work on 100% (does on 98% though) so if you have some things a bit misplaced play around with the number values of the gui position. Sometimes 19 isn't same as 20 (i mean it can make big difference) and even 19.8 can be better than 20.0

 

PS: sx and sy are just the easier way to use the method. You can divide width and height every time manually as well ... but why do it if you can just divide once above everything ? And then just use the defined variables sx and sy.

Edited October 16, 2016 by koragg
You can put 'ab' and 'ba' if you want but 'sx' = screen x (width), 'sy' = screen y (height). Easier to understand this way.

[Backsage]

23 hours ago, Gravestone said:

Try using this simple calculation to resize/fit the window to every resolution.

local width, height = guiGetScreenSize()local sx, sy = width/1366, height/768local window = guiCreateWindow(sx*10, sy*280, sx*200, sy*200, "Test", false)

 

And yeah, you'll have to do the same for elements attached to that window. The positioning of the elements are automatic for every resolution but the sizing isn't. Hence, you'll have to use something similar again:

guiCreateButton(20, 20, sx*50, sy*50, "Button", false, window)

 

 

If we use your calculations, assuming width = 1366 and height = 768, this is what you get.

guiCreateWindow(10, 280, 200, 200, "Test", false)

guiCreateButton(20, 20, 50, 50, "Button", false, window)

So, umm...I...I just don't get the point of those calculations.

 

If we use the calculations from G-Stefan and TEDERIs, it would actually center the windows.

On 5/10/2011 at 9:51 PM, Antibird said:

Don't bother calculating

guiSetProperty( window, "VerticalAlignment", "Centre" ) 
guiSetProperty( window, "HorizontalAlignment", "Centre" ) 

 

 

 

On 8/8/2016 at 9:29 AM, N3xT said:

for gui, you can use this useful function

centerWindow

I can just use those things to center windows.
 

But I'm just concerned about making it position and scale like relative using some maths. Anyway, I will try it out. If I still don't understand it, then I'll probably just use relative instead. But I think instead of that, I'll just force players to use a minimum resolution to see the window and gui elements.

Edit: Ok, I just tried doing this through my script that's on a different resource and the window shows up. This works with both using the calculations and the actual results from the calculation. If I try loading it in gui editor using just the results, it shows up. But if I load it in gui editor with the calculations instead, it doesn't show up. I don't know why that's happening.

Edited October 16, 2016 by Backsage

[Gravestone]

1 hour ago, koragg said:

-if your current resolution is let's say 1920x1080 and you divide it by 1440x900 (that's my own example, same with what @Gravestone said) then the result will be more than 1, meaning the size of the element will get bigger, thus looking fine on FHD screens. 

-if your current resolution is for example 1280x720 then after dividing it with 1440x900 size of gui element gets smaller as 1280/1440 < 1 (720/900 < 1).

-and yes, if you're using same resolution as the one on which you're dividing it to it will be exactly 1, so it will also look good on that resolution as well. 

Read this ^ again.

[Backsage]

I finally figured it out! And it was all on https://wiki.multitheftauto.com/wiki/GuiGetScreenSize

The first three were calculated using the maths in guiGetScreenSize:

http://i.imgur.com/E3Bdu4N.png

http://i.imgur.com/4w99tLR.png

http://i.imgur.com/EQ97gUs.png

And it's exactly the same in relative:

http://i.imgur.com/BAtJ7sN.png

http://i.imgur.com/p1mjhTJ.png

http://i.imgur.com/VS6HQyH.png

Here's the code: http://pastebin.com/Q93dc77v

Notice how the checkbox goes completely away when in a 640 x 480 resolution. That's because I didn't calculate it for the checkbox. I'd have to calculate it for all of my other gui elements.

Edit: I just re-read your posts and it makes sense now. I guess I just needed to use my base resolution, which was 1024 x 768.

Edited October 16, 2016 by Backsage

[Gravestone]

Yeah, glad you figured it out.