Re: Gui Position

[Ben_Sherman]

Hi there,

So I'm not very good with GUI's besides making them, some how everytime I make one and try to place it good on all resolutions for the game it never turns out so great. I've tried and tried, I've look on google and here for help about it but never managed to find anything useful.

I don't really know how to make the GUI's location the exact same as for all resolutions and not just my resolution, I've tried 2 type one made it line up in center quite good, but some how the rest besides the background ended up on the left side of the gui, all text and other dxDraws. Normaly their lined up a little to the right but not so far off as it was when I made it like that. I manager to make it fit quite good on 2 differents resolutions 1600x900 and 1920x1080 the only problem was that the location of the GUI on 1600x900 was located a bit to the right and not really lined up properly, but almost. So I thought I should ask here for some help or maybe some tips on how to line it up on the exact same location on all resolutions.

-Regards,

Ben.

function showGUI() 
    local x, y = guiGetScreenSize() 
     
    dxDrawRectangle((628.0 / x)*x,(309.0 / y)*y,664.0,498.0,tocolor(0,0,0,210),false) 
    dxDrawRectangle((779.0 / x)*x,(374.0 / y)*y,496.0,414.0,tocolor(90,134,255,180),false) 
    dxDrawRectangle((779.0 / x)*x,(348.0 / y)*y,86.0,26.0,tocolor(90,134,255,180),false) 
    dxDrawRectangle((628.0 / x)*x,(258.0 / y)*y,664.0,51.0,tocolor(90,134,255,210),false) 
    dxDrawImage((871.0 / x)*x,(272.0 / y)*y,178.0,27.0,"report.png",0.0,0.0,0.0,tocolor(255,255,255,255),false) 
end 

[WhoAmI]

To center gui use this

(x - gui_width)/2 
(y - gui_height)/2 

Where x and y is screen size.

[Wei]

local x, y = guiGetScreenSize() 
local yourXresolution, yourYresolution = 1280, 1024 --// Change that to your resolution 
local sx, sy = (x/yourXresolution), (y/yourYresolution) 
  
function showGUI() 
    dxDrawRectangle(sx*628.0,sy*309.0,664.0,498.0,tocolor(0,0,0,210),false) 
    dxDrawRectangle(sx*779.0,sy*374.0,496.0,414.0,tocolor(90,134,255,180),false) 
    dxDrawRectangle(sx*779.0,sy*348.0,86.0,26.0,tocolor(90,134,255,180),false) 
    dxDrawRectangle(sx*628.0,sy*258.0,664.0,51.0,tocolor(90,134,255,210),false) 
    dxDrawImage(sx*871.0,sy*272.0,178.0,27.0,"report.png",0.0,0.0,0.0,tocolor(255,255,255,255),false) 
end 

[Citizen]

or maybe some tips on how to line it up on the exact same location on all resolutions.

Sure, here is how you should process to make your dx stuffs look the same on every resolutions:

First, just draw your stuff for your own resolution, do no matter of compatibilities.

function showGUI() 
    dxDrawRectangle(628.0, 309.0, 664.0, 498.0, tocolor(0,0,0,210), false) 
    dxDrawRectangle(779.0, 374.0, 496.0, 414.0, tocolor(90,134,255,180), false) 
    dxDrawRectangle(779.0, 348.0, 86.0, 26.0, tocolor(90,134,255,180), false) 
    dxDrawRectangle(628.0, 258.0, 664.0, 51.0, tocolor(90,134,255,210), false) 
    dxDrawImage(871.0, 272.0, 178.0, 27.0, "report.png", 0.0, 0.0, 0.0 , tocolor(255,255,255,255), false) 
end 

Once done, just use a calculator to translate the absolute positions and sizes into relatives ones. To do that, you need to know the resolution of your game when you made your dx stuffs (so 1600x900 in your case):

the new relative positions must be calculated like so:

newX = X / 900 
newY = Y / 1600 
newW = W / 900 
newH = H / 1600 

You should end with this:

function showGUI() 
    dxDrawRectangle(0.393, 0.343, 0.415, 0.553, tocolor(0,0,0,210), false) 
    dxDrawRectangle(0.487, 0.415, 0.310, 0.460, tocolor(90,134,255,180), false) 
    dxDrawRectangle(0.487, 0.387, 0.054, 0.029, tocolor(90,134,255,180), false) 
    dxDrawRectangle(0.393, 0.287, 0.415, 0.057, tocolor(90,134,255,210), false) 
    dxDrawImage(0.544, 0.302, 0.111, 0.030, "report.png", 0.0, 0.0, 0.0 , tocolor(255,255,255,255), false) 
end 

But dx functions only accept absolute positions and sizes. So we just have to multiply these values by resolution of the current player: (the x and w by the horizontal resolution and the y and h by the vertical resolution):

local scW, scH = guiGetScreenSize() 
  
function showGUI() 
    dxDrawRectangle(0.393*scH, 0.343*scW, 0.415*scH, 0.553*scW, tocolor(0,0,0,210), false) 
    dxDrawRectangle(0.487*scH, 0.415*scW, 0.310*scH, 0.460*scW, tocolor(90,134,255,180), false) 
    dxDrawRectangle(0.487*scH, 0.387*scW, 0.054*scH, 0.029*scW, tocolor(90,134,255,180), false) 
    dxDrawRectangle(0.393*scH, 0.287*scW, 0.415*scH, 0.057*scW, tocolor(90,134,255,210), false) 
    dxDrawImage(0.544*scH, 0.302*scW, 0.111*scH, 0.030*scW, "report.png", 0.0, 0.0, 0.0 , tocolor(255,255,255,255), false) 
end 

And here you go ! You just got your dx stuffs that will look the same on all resolutions.

I would suggest you to use the guiEditor resource that also let you create dx stuffs. But be sure to set the Rel/Abs to relative on child and parents (right click on the screen then click on the right menu item):

https://community.multitheftauto.com/ind ... ils&id=141

[Ben_Sherman]

Thanks guys so much, couldn't get better answers among this question!

[Citizen]

You're welcome.

Hope you will do nice interfaces

[Ben_Sherman]

You're welcome.

Hope you will do nice interfaces

Thanks, yea I hope so as well. Got a great plan already. I want my GUI's to be in Metro theme (Windows and I want them userfriendly