Problem with guiGetScreenSize

[Tails]

I created some GUI on a resolution of 1280x960 and then followed the instructions at: https://wiki.multitheftauto.com/wiki/GuiGetScreenSize

I did exactly what they instructed except that I divided everything with 1280 and 960, because that's the resolution I made the GUI for. When I was done I found my text overlapping each other and slowly go off-screen with each smaller resolution. Before and after following the instructions the GUI on my default resolution(1280x960) stayed exactly the same, so I'm guessing I did it right.

Any ideas? Is there any other and perhaps easier way to make my GUI fit every resolution properly?

Any help is appreciated!

[Blinker.]

You could use relatives

[Tails]

Oh, I forgot to mention I'm using dxDrawText. Can I use relatives for them as well?

[Blinker.]

well , I don't think so , but If you use guiGetScreenSize the text won't get out of the screen

an example:

  
local sw , sh = guiGetScreenSize() 
dxDrawText("",sw/2 , sh/2 ....) 
  

[Tails]

well , I don't think so , but If you use guiGetScreenSize the text won't get out of the screen

an example:

  
local sw , sh = guiGetScreenSize() 
dxDrawText("",sw/2 , sh/2 ....) 
  

The GUI needs to sit on a specific spot on the screen. Not in the center unfortunately.

This is what I did:

local sWidth,sHeight = guiGetScreenSize() 
  
dxDrawText("km/h", sWidth*0.85078125, sHeight*0.8791666666666667, sWidth*0.94921875, sHeight*0.9427083333333333, tocolor(195, 195, 195, 255), 2.30, "pricedown", "left", "top", false, false, true, false, false) 

I got the numbers after I divided each 1st and 2nd parameter with 1280 and 960. Just like the instructions told me.

[Blinker.]

if you meant to draw the text "km/h" on the right bottom of the screen and to appear the same on all resolutions

then this is what you need:

  
local sWidth,sHeight = guiGetScreenSize() 
 function render() 
dxDrawText("km/h", sWidth - 130 ,sHeight - 65 , sWidth*0.94921875, sHeight*0.9427083333333333, tocolor(195, 195, 195, 255), 2.30, "pricedown", "left", "top", false, false, true, false, false) 
end 
addEventHandler("onClientRender",root,render) 
  

[#RooTs]

try using

local sx,sy = guiGetScreenSize() 
local px,py = 1600,900 -- resolution screen 
local x,y =  (sx/px), (sy/py) 
dxDrawText ( "" , x / 2 , y / 2 .... ) 

[Tails]

I just figured it out, thanks to you guys. The text stays exactly in the same position.

However there is the problem now that the text appears too big or too small depending on the resolution. How do I maintain the size on all resolutions? Is there an easy solution for that? I got 19 more lines just like the one below all with different sizes.

local sWidth,sHeight = guiGetScreenSize() 
local sw,sh = 1280,960 
  
dxDrawText("km/h", 1089/sw*sWidth, 844/sh*sHeight, 1215/sw*sWidth, 905/sh*sHeight, tocolor(195, 195, 195, 255), 2.30, "pricedown", "left", "top", false, false, true, false, false) 

[Saml1er]

  
  
local fontSize = (2.30/sw)*sWidth 
dxDrawText("km/h", 1089/sw*sWidth, 844/sh*sHeight, 1215/sw*sWidth, 905/sh*sHeight, tocolor(195, 195, 195, 255), fontSize,"pricedown", "left", "top", false, false, true, false, false) 

[Tails]

Works like a charm! Thank you!

[Tails]

It still got issues apparently!

It works fine on 1280x960 and lower resolutions but when I go higher this is what happens. The size stays the same though. What's going on?

[#RooTs]

try this, add border in text, image look

locais sWidth, sHeight = guiGetScreenSize ( ) 
local de sw, sh = 1280 , 960 
local fontSize = ( 2,30 / sw ) * sWidth 
  
dxDrawText("km/h", 1089/sw*sWidth, 844/sh*sHeight, 1215/sw*sWidth, 905/sh*sHeight, tocolor(195, 195, 195, 255), fontSize,"pricedown", "left", "top", false, false, true, false, false) 
  
function dxDrawBorderedText(text, x, y, w, h, color, scale, font, alignX, alignY, clip, wordBreak, postGUI) 
  dxDrawText(text, x - 2, y - 2, w - 2, h - 2, tocolor(0, 0, 0, 255), scale, font, alignX, alignY, clip, wordBreak, false) 
  dxDrawText(text, x + 2, y - 2, w + 2, h - 2, tocolor(0, 0, 0, 255), scale, font, alignX, alignY, clip, wordBreak, false) 
  dxDrawText(text, x - 2, y + 2, w - 2, h + 2, tocolor(0, 0, 0, 255), scale, font, alignX, alignY, clip, wordBreak, false) 
  dxDrawText(text, x + 2, y + 2, w + 2, h + 2, tocolor(0, 0, 0, 255), scale, font, alignX, alignY, clip, wordBreak, false) 
  dxDrawText(text, x - 1, y, w - 1, h, tocolor(0, 0, 0, 255), scale, font, alignX, alignY, clip, wordBreak, false) 
  dxDrawText(text, x + 1, y, w + 1, h, tocolor(0, 0, 0, 255), scale, font, alignX, alignY, clip, wordBreak, false) 
  dxDrawText(text, x, y - 1, w, h - 1, tocolor(0, 0, 0, 255), scale, font, alignX, alignY, clip, wordBreak, false) 
  dxDrawText(text, x, y + 1, w, h + 1, tocolor(0, 0, 0, 255), scale, font, alignX, alignY, clip, wordBreak, false) 
  dxDrawText(text, x, y, w, h, color, scale, font, alignX, alignY, clip, wordBreak, postGUI) 
end 

look my script

https://community.multitheftauto.com/in ... ls&id=6561

EDITED

Edited September 23, 2014 by Guest

[.:HyPeX:.]

Alot of you guys are dividing the resolution. Some others are even going crazy... best way to do so is how OP started doing it.

Eg: x * 0.2

Anyways i got this small bitchy function, it should work pretty well for scaling:

My case: (1920x1080)

  
local x,y = guiGetScreenSize() 
local ox,oy = 1920,1080 
local Scale = (1920 / x ) * (1080 / y) 
  

Then just divide all your scales by this multiplier. Its not perfect, but closest and quick solution.

[Tails]

Thank you guys. I decided that this would work better (saves time when adding new text)

function dxDrawBorderedText(text, x, y, w, h, color, scale, font, alignX, alignY, clip, wordBreak, postGUI) 
    local sWidth,sHeight = guiGetScreenSize() 
    local sw,sh = 1280,960 
    dxDrawText(text, x/sw*sWidth - 2, y/sh*sHeight - 2, w/sw*sWidth - 2, h/sh*sHeight - 2, tocolor(0, 0, 0, 255), scale/sw*sWidth, font, alignX, alignY, clip, wordBreak, false) 
    dxDrawText(text, x/sw*sWidth + 2, y/sh*sHeight - 2, w/sw*sWidth + 2, h/sh*sHeight - 2, tocolor(0, 0, 0, 255), scale/sw*sWidth, font, alignX, alignY, clip, wordBreak, false) 
    dxDrawText(text, x/sw*sWidth - 2, y/sh*sHeight + 2, w/sw*sWidth - 2, h/sh*sHeight + 2, tocolor(0, 0, 0, 255), scale/sw*sWidth, font, alignX, alignY, clip, wordBreak, false) 
    dxDrawText(text, x/sw*sWidth + 2, y/sh*sHeight + 2, w/sw*sWidth + 2, h/sh*sHeight + 2, tocolor(0, 0, 0, 255), scale/sw*sWidth, font, alignX, alignY, clip, wordBreak, false) 
    dxDrawText(text, x/sw*sWidth - 1, y/sh*sHeight, w/sw*sWidth - 1, h/sh*sHeight, tocolor(0, 0, 0, 255), scale/sw*sWidth, font, alignX, alignY, clip, wordBreak, false) 
    dxDrawText(text, x/sw*sWidth + 1, y/sh*sHeight, w/sw*sWidth + 1, h/sh*sHeight, tocolor(0, 0, 0, 255), scale/sw*sWidth, font, alignX, alignY, clip, wordBreak, false) 
    dxDrawText(text, x/sw*sWidth, y/sh*sHeight - 1, w/sw*sWidth, h/sh*sHeight - 1, tocolor(0, 0, 0, 255), scale/sw*sWidth, font, alignX, alignY, clip, wordBreak, false) 
    dxDrawText(text, x/sw*sWidth, y/sh*sHeight + 1, w/sw*sWidth, h/sh*sHeight + 1, tocolor(0, 0, 0, 255), scale/sw*sWidth, font, alignX, alignY, clip, wordBreak, false) 
    dxDrawText(text, x/sw*sWidth, y/sh*sHeight, w/sw*sWidth, h/sh*sHeight, color, scale/sw*sWidth, font, alignX, alignY, clip, wordBreak, postGUI) 
end 
  
dxDrawBorderedText("km/h", 1089, 844, 1215, 905, tocolor(195, 195, 195, 255), 2.30, "pricedown", "left", "top", false, false, true, false, false) 

Now all I need is thicker borders, that's just a matter of changing the 1's and 2's, right?

Hypex, I didn't quite get your method. I mean how to use it.

[Saml1er]

He meant this:

  
local x,y = guiGetScreenSize() 
  
local ox,oy = 1920,1080 
  
local Scale = (1920 / x ) * (1080 / y) 
local fontSize = 2.30/Scale 

[#RooTs]

try this, Add border size +2 pixels

function dxDrawBorderedText( text, x, y, w, h, color, scale, font, alignX, alignY, clip, wordBreak, postGUI ) 
    dxDrawText ( text, x - 2, y - 2, w - 2, h - 2, tocolor ( 0, 0, 0, 155 ), scale, font, alignX, alignY, clip, wordBreak, false ) -- black 
    dxDrawText ( text, x + 2, y - 2, w + 2, h - 2, tocolor ( 0, 0, 0, 155 ), scale, font, alignX, alignY, clip, wordBreak, false ) 
    dxDrawText ( text, x - 2, y + 2, w - 2, h + 2, tocolor ( 0, 0, 0, 155 ), scale, font, alignX, alignY, clip, wordBreak, false ) 
    dxDrawText ( text, x + 2, y + 2, w + 2, h + 3, tocolor ( 0, 0, 0, 155 ), scale, font, alignX, alignY, clip, wordBreak, false ) 
     
    dxDrawText ( text, x - 3, y, w - 3, h, tocolor ( 0, 0, 0, 155 ), scale, font, alignX, alignY, clip, wordBreak, false ) 
    dxDrawText ( text, x + 3, y, w + 3, h, tocolor ( 0, 0, 0, 155 ), scale, font, alignX, alignY, clip, wordBreak, false ) 
    dxDrawText ( text, x, y - 3, w, h - 3, tocolor ( 0, 0, 0, 155 ), scale, font, alignX, alignY, clip, wordBreak, false ) 
    dxDrawText ( text, x, y + 3, w, h + 3, tocolor ( 0, 0, 0, 155 ), scale, font, alignX, alignY, clip, wordBreak, false ) 
     
    dxDrawText ( text, x, y, w, h, color, scale, font, alignX, alignY, clip, wordBreak, postGUI ) 
end