That is because of screen ratio difference.
This is how it works:
1920px | 1080px = 16:9 ratio
1920 / 16 = 120
120 * 9 = 1080!
2560px | 1080px = 21:9 ratio
2560 / 21 = 121,9047619047619....
121,9047619047619.... * 9 = 1080
So if you apply your ratio to to a 1920x1080 resolution:
2560 / 16 = 160
160 * 9 = 1440!!!!!
You will be stretching the thing you want to scale.
So in order to fix that problem. You want to go for the smallest dimensions which is the Y axis!
1920 x 1080
2560 x 1080
1080 x 1080 is a square which fits in both screens. The scale will be 1 for both resolutions.
Squares have the ratio 1, which is a good normalizer.
If the resolution was:
1280 × 720
720 / 1080 = 0,666666 scale
The scale will go down because there are less pixels needed to cover up the same area.
How does that looks like in the code:
local sx_, sy_ = guiGetScreenSize()
local sx, sy = sx_/2560, sy_/1080
local scale = sy -- I have defined this variable with the value of sy, so you do not confuse them later on.
function teszt()
dxDrawRectangle(140*sx, 200*sy, 700 * scale, 700 * scale,tocolor(0,0,0,165))
end
addEventHandler("onClientRender",root,teszt)
Golden rules (for keeping things in proportion?
Position:
X position = sx
Y position = sy
Scaling:
X scaling = sy
Y scaling = sy
Offset from position:
X offset = sy
Y offset = sy
Note: Sometimes for responsive layout you do not want to keep things in proportion. Like making the UI bigger for wider screens and show more elements, which you otherwise had to scroll to.