Jump to content

[TUT] Scaling drawing/GUI elements for all resolutions


Hale

Recommended Posts

8 hours ago, koragg said:

Here's another method as well:

Let's say that your dxDrawText looks just like you want it to on a screen resolution of 1440x900. You can use the following way to make it ok on any resolution:


local sx_, sy_ = guiGetScreenSize()
local sx, sy = sx_/1440, sy_/900

dxDrawText("$123456789", 140*sx, 648*sy, 0*sx, 0*sy, tocolor(0,0,0,255), 0.8*sy,"bankgothic")

Now a bit of an explanation on how it works. So you made the text look fine on 1440x900, nice. When you made your text function to look ok on 1440x900 it will look like this:


dxDrawText("$123456789", 140, 648, 0, 0, tocolor(0,0,0,255), 0.8,"bankgothic")

Now all you do is multiply each value by the "sx" and "sy" you just calculated at the top of the script. This way the position of the text will move accordingly with the resolution. This means that if the text is below the radar on 1440x900 and you use this way then on 1920x1080, 1366x768, 1280x720, etc the text will always be in the same spot, below the radar. And always remember to multiply the scale of the text by the "sy" variable to make it smaller on small resolutions and bigger on big ones. This is just an alternative way to the method which @Hale provided. There's no performance drawbacks or anything to this, use whichever seems easier for you. Hope we help others as I remember I had huge problems with this when I was still new to LUA and drawing stuff on screen :D.

Never actually thought of such way, nicely done mate!

Link to comment
  • 3 weeks later...
  • 2 years later...

 

On 21/06/2017 at 06:22, koragg said:

Here's another method as well:

Let's say that your dxDrawText looks just like you want it to on a screen resolution of 1440x900. You can use the following way to make it ok on any resolution:


local sx_, sy_ = guiGetScreenSize()
local sx, sy = sx_/1440, sy_/900

dxDrawText("$123456789", 140*sx, 648*sy, 0*sx, 0*sy, tocolor(0,0,0,255), 0.8*sy,"bankgothic")

Now a bit of an explanation on how it works. So you made the text look fine on 1440x900, nice. When you made your text function to look ok on 1440x900 it will look like this:


dxDrawText("$123456789", 140, 648, 0, 0, tocolor(0,0,0,255), 0.8,"bankgothic")

Now all you do is multiply each value by the "sx" and "sy" you just calculated at the top of the script. This way the position of the text will move accordingly with the resolution. This means that if the text is below the radar on 1440x900 and you use this way then on 1920x1080, 1366x768, 1280x720, etc the text will always be in the same spot, below the radar. And always remember to multiply the scale of the text by the "sy" variable to make it smaller on small resolutions and bigger on big ones. This is just an alternative way to the method which @Hale provided. There's no performance drawbacks or anything to this, use whichever seems easier for you. Hope we help others as I remember I had huge problems with this when I was still new to Lua and drawing stuff on screen :D.

bro, thanks! u saved me

Edited by Maark
  • Like 1
Link to comment
  • 3 weeks later...
  • Moderators
On 25/09/2019 at 00:55, grazia said:

im sorry i want to ask, I don't know, what's the difference between this and relative?

Relative as in 80% of 1920px?

Nothing actually at the end.

 

The only difference is the usability for the developer. You can develop your UI with absolute values (px), on your own screen resolution, while it is automatic compatible for other resolutions (%).

Link to comment
  • Recently Browsing   0 members

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