scaling dx elements for all resolution

[Turbesz]

What is the best calculation for dx elements? I want all the elements to be in the same place with same scale on every resolution. But I haven’t found a really good solution to this in years. 

So anyone can help me? Which calculation worked for you?

[IIYAMA]

There are multiple topics out there which explain the basics of scaling and positioning. You probably have seen those in the tutorial section, so I am not going to refer to those.

Anyway, how about you give this utility/helper function a try?

https://wiki.multitheftauto.com/wiki/GetScreenStartPositionFromBox

The second example shows you how to combine scaling with position.

If I create something with dx function I most of the time make use of that helper to speed things up.

@Turbesz

[Turbesz]

1 hour ago, IIYAMA said:

There are multiple topics out there which explain the basics of scaling and positioning. You probably have seen those in the tutorial section, so I am not going to refer to those.

Anyway, how about you give this utility/helper function a try?

https://wiki.multitheftauto.com/wiki/GetScreenStartPositionFromBox

The second example shows you how to combine scaling with position.

If I create something with dx function I most of the time make use of that helper to speed things up.

@Turbesz

i tried now this way, up to 1920x1080, it displays well the rectangle at all resolutions, but too thick on mine resolution (2560x1080). Why?

local sx_, sy_ = guiGetScreenSize()
local sx, sy = sx_/2560, sy_/1080

function teszt()
	dxDrawRectangle(140*sx, 200*sy, 700*sx, 700*sy,tocolor(0,0,0,165))
end
addEventHandler("onClientRender",root,teszt)

 

[IIYAMA]

2 hours ago, Turbesz said:

Why?

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.

 

 

 

 

[Turbesz]

13 hours ago, IIYAMA said:

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.

 

 

 

 

thank you very much! now I understand that.

but what wrong with my dxDrawText? i tried this: 

	dxDrawText("ezegynagyonnagyonhosszúszövegleszmost",283*sx, 205*sy, 500 * scale, 700 * scale,tocolor(255,255,255,255),scale*1,customfont,"center")

the text position the position of the text is perfect, but the font size too high for some resolutions, therefore, it does not fit in the rectangle and sticking out

Edited October 20, 2021 by Turbesz

[The_GTA]

53 minutes ago, Turbesz said:

the text position the position of the text is perfect, but the font size too high for some resolutions, therefore, it does not fit in the rectangle and sticking out

Try setting the clip and wordBreak parameters of dxDrawText to true. They are false by default.

[IIYAMA]

2 hours ago, Turbesz said:

but the font size too high for some resolutions,

This is probably because of a text on raster optimisation. It is probably trying to place parts of the character on top of full pixels instead of 2 (half) pixels with opacity at 50%. This optimisation will probably be skipped when you enable the subPixelPositioning parameter. But this might make the readability harder (for low res) and more blurry.

The solution The_GTA gives you would probably be the best fix.

Or if you want to stay in control:

https://wiki.multitheftauto.com/wiki/WordWrap

[Turbesz]

On 20/10/2021 at 13:14, IIYAMA said:

This is probably because of a text on raster optimisation. It is probably trying to place parts of the character on top of full pixels instead of 2 (half) pixels with opacity at 50%. This optimisation will probably be skipped when you enable the subPixelPositioning parameter. But this might make the readability harder (for low res) and more blurry.

The solution The_GTA gives you would probably be the best fix.

Or if you want to stay in control:

https://wiki.multitheftauto.com/wiki/WordWrap

thank you so much