Jump to content

scaling dx elements for all resolution


Turbesz

Recommended Posts

  • Moderators

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

  • Like 1
Link to comment
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)

 

Link to comment
  • Moderators
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.

 

 

 

 

  • Like 1
  • Thanks 1
Link to comment
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 by Turbesz
  • Like 1
Link to comment
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.

  • Like 2
Link to comment
  • Moderators
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

  • Like 1
  • Thanks 1
Link to comment
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

  • Like 1
Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...