[TUT] Scaling drawing/GUI elements for all resolutions

[Hale]

Hello to whoever is reading this topic, today I've decided to take some time and explain in (personally) easiest possible way how to make a drawing or a GUI that will fit all resolutions, no matter if it's 1280x1024 or 640x480. Here are the following steps:

1. Let's say you're using 1280x1024 resolution.
2. You have the following function: 

3. dxDrawText("$10000000", 990, 200, 1100, 250, tocolor ( 0, 0, 0, 255 ), 1, "pricedown")

   Take out the positionings from the function: 990, 200, 1100, 250

4. Divide 1280 with X positions (990, 1100) separately. You'll get 1280/990=1.292929 and 1280/1100=1.16363

5. Do the same with Y positions, but use 1024 as that is maximum height (aka Y of the screen). You'll get 1024/200=5.12 and 1024/250=4.096

6. The numbers you got are the scales that will work in every resolution as they work in your resolution (1280x1024).

7. To use those scales, simply divide the clients' resolution with the scale, for example: 

   screenWidth, screenHeight = guiGetScreenSize()
   
   dxDrawText("$10000000", screenWidth/1.292929, screenHeight/5.12, screenWidth/1.16363, screenHeight/4.096, tocolor ( 0, 0, 0, 255 ), 1, "pricedown")

   That's it!

8. There's an extra scaling you can do for text size, which is tricky to work with (due to text getting blurred, ugly and unreadable) but if you're up for it: 

   screenWidth, screenHeight = guiGetScreenSize()
   scale = (screenWidth/1280)*(screenHeight/1024) -- this will give you a number that will vary around 1, depending on clients' resolution (if resolution is smaller, scale will be below 1, if higher then above 1)
   
   dxDrawText("$10000000", screenWidth/1.292929, screenHeight/5.12, screenWidth/1.16363, screenHeight/4.096, tocolor ( 0, 0, 0, 255 ), scale*1, "pricedown")
   -- as you can see I multiplied the text size (1) with the scale, which means the text will be bigger or smaller (again, depending on the clients' screen resolution)

    

Hope I helped, please provide some feedback for future references!

[koragg]

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 .

Edited June 21, 2017 by koragg
I didn't understand this method until writing this post btw lol Now I'll use this as it's cleaner and easier to read than the one from the wiki xd

[Hale]

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 .

Never actually thought of such way, nicely done mate!

[Pirulax]

Next time add that

addEventHandler("onClientRender",....)

((Just before you write down a post again, teaching me ==> I know the correct addEventHandler syntax.

Edited June 22, 2017 by Pirulax

[Hale]

9 hours ago, Pirulax said:

Next time add that

addEventHandler("onClientRender",....)

((Just before you write down a post again, teaching me ==> I know the correct addEventHandler syntax.

What are you talking about? 

[Pirulax]

never mind...

[koragg]

@Pirulax we didn't make whole functions thus there's no need for adding the event handler. And I think everybody who's reading this topic would know that in order to draw something on the screen they'd need to use onClientRender.

[kieran]

Thank you so much for this tutorial @Hale (and @koragg  ) I have been wondering for so long how to scale text for all resolutions using dxDrawText.  

[Maark]

 

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 .

bro, thanks! u saved me

Edited September 5, 2019 by Maark

[ds1-e]

16 hours ago, Maark said:

 

bro, thanks! u saved me

Imho, you should use this. This way it's much better, meanwhile with the way above i had some issues.

 

[Maark]

On 05/09/2019 at 15:02, majqq said:

Imho, you should use this. This way it's much better, meanwhile with the way above i had some issues.

 

i already tried and dont work like the way above

[grazia]

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

[IIYAMA]

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 (%).