Jump to content

Make Gui same on all Resolutions


harryh

Recommended Posts

I have told been that if I select relative position in the main parent window in gui editor it would work for all resolutions

However is doesn't

My Res: 1920*1080

His Res: 1280*720

 

His Screen:

bb3e708f144c4a0a98f7e03bb72ef56f.png

        DogCreate.Window = guiCreateWindow(0.79, 0.11, 0.17, 0.25, "", true)
        guiWindowSetMovable(DogCreate.Window, false)
        guiWindowSetSizable(DogCreate.Window, false)
        guiSetProperty(DogCreate.Window, "TitlebarEnabled", "False")

        DogCreate.NameBox = guiCreateEdit(0.28, 0.23, 0.63, 0.12, "", true, DogCreate.Window)
        DogCreate.BreedBox = guiCreateComboBox(0.28, 0.39, 0.63, 0.12, "", true, DogCreate.Window)
        guiComboBoxAddItem(DogCreate.BreedBox, "German Sheperd")
        guiComboBoxAddItem(DogCreate.BreedBox, "Rottweiler")
        guiComboBoxAddItem(DogCreate.BreedBox, "Golden Retriever")
        guiComboBoxAddItem(DogCreate.BreedBox, "Pitbull")
        DogCreate.MaleRadio = guiCreateRadioButton(0.40, 0.68, 0.04, 0.05, "", true, DogCreate.Window)
        DogCreate.FemaleRadio = guiCreateRadioButton(0.60, 0.68, 0.04, 0.05, "", true, DogCreate.Window)
        
        
        DogCreate.BuyButton = guiCreateButton(0.07, 0.76, 0.86, 0.20, "Purchase Dog", true, DogCreate.Window)
        
        DogCreate.NameLab = guiCreateLabel(9, 64, 76, 36, "NAME:", false, DogCreate.Window)
        
        DogCreate.BreedLab = guiCreateLabel(8, 106, 77, 24, "BREED:", false, DogCreate.Window)
       
        
        DogCreate.MaLab = guiCreateLabel(0.40, 0.61, 0.05, 0.06, " M", true, DogCreate.Window)

        DogCreate.FeLab = guiCreateLabel(0.60, 0.61, 0.05, 0.06, " F", true, DogCreate.Window)

        DogCreate.WindowLab = guiCreateLabel(79, 14, 184, 40, "Dog Creator", false, DogCreate.Window)

            
        DogCreate.ColorLab = guiCreateLabel(8, 131, 77, 25, "Colour:", false, DogCreate.Window)

 

Edited by harryh
Link to comment

This occurs if you're creating GUI's that aren't relative

If the GUI is absolute, it calculates it's position on the screen depending on the resolution, where as if it's working from relative, the position is in accordance from 0 to 1.

For example, setting the position to 0,2 would place it about 20% of the way across or down from one end to the other. See this for more info regarding the two.

Edited by Skully
Link to comment

I use this method:

local X,Y = guiGetScreenSize()
local xReal = X/your screen X
local yReal = Y/your screen Y

-- example:

local X,Y = guiGetScreenSize()
local xReal = X/1366 -- my screen's X
local yReal = Y/768 -- my screen's Y
dxDrawText("text", xReal*683, yReal*384....) -- it will draw a text in the middle of your screen

 

Link to comment

Hi, Im a bit confused how to use this above^

I used GUI editor to change all of the GUI items to relative but it still does the same thing:

		DogCreate.Window = guiCreateWindow(0.79, 0.11, 0.17, 0.25, "", true)
		DogCreate.BuyButton = guiCreateButton(0.07, 0.76, 0.86, 0.20, "Purchase Dog", true, DogCreate.Window)
		DogCreate.NameLab = guiCreateLabel(0.03, 0.24, 0.23, 0.13, "NAME:", true, DogCreate.Window)
		DogCreate.BreedLab = guiCreateLabel(0.02, 0.39, 0.24, 0.09, "BREED:", true, DogCreate.Window)
		DogCreate.MaLab = guiCreateLabel(0.40, 0.61, 0.05, 0.06, " M", true, DogCreate.Window)
		DogCreate.FeLab = guiCreateLabel(0.60, 0.61, 0.05, 0.06, " F", true, DogCreate.Window)
		DogCreate.WindowLab = guiCreateLabel(0.24, 0.05, 0.56, 0.15, "Dog Creator", true, DogCreate.Window)
		DogCreate.DogColorCombo = guiCreateComboBox(0.28, 0.50, 0.63, 0.12, "", true, DogCreate.Window)
		DogCreate.ColorLab = guiCreateLabel(0.02, 0.49, 0.24, 0.09, "Colour:", true, DogCreate.Window)
		DogCreate.BreedBox = guiCreateComboBox(0.28, 0.39, 0.63, 0.12, "", true, DogCreate.Window)
		DogCreate.MaleRadio = guiCreateRadioButton(0.40, 0.68, 0.04, 0.05, "", true, DogCreate.Window)
        DogCreate.FemaleRadio = guiCreateRadioButton(0.59, 0.67, 0.04, 0.05, "", true, DogCreate.Window)
        DogCreate.NameBox = guiCreateEdit(0.28, 0.23, 0.63, 0.12, "", true, DogCreate.Window)

 

Link to comment
3 hours ago, harryh said:

Hi, Im a bit confused how to use this above^

I used GUI editor to change all of the GUI items to relative but it still does the same thing:


		DogCreate.Window = guiCreateWindow(0.79, 0.11, 0.17, 0.25, "", true)
		DogCreate.BuyButton = guiCreateButton(0.07, 0.76, 0.86, 0.20, "Purchase Dog", true, DogCreate.Window)
		DogCreate.NameLab = guiCreateLabel(0.03, 0.24, 0.23, 0.13, "NAME:", true, DogCreate.Window)
		DogCreate.BreedLab = guiCreateLabel(0.02, 0.39, 0.24, 0.09, "BREED:", true, DogCreate.Window)
		DogCreate.MaLab = guiCreateLabel(0.40, 0.61, 0.05, 0.06, " M", true, DogCreate.Window)
		DogCreate.FeLab = guiCreateLabel(0.60, 0.61, 0.05, 0.06, " F", true, DogCreate.Window)
		DogCreate.WindowLab = guiCreateLabel(0.24, 0.05, 0.56, 0.15, "Dog Creator", true, DogCreate.Window)
		DogCreate.DogColorCombo = guiCreateComboBox(0.28, 0.50, 0.63, 0.12, "", true, DogCreate.Window)
		DogCreate.ColorLab = guiCreateLabel(0.02, 0.49, 0.24, 0.09, "Colour:", true, DogCreate.Window)
		DogCreate.BreedBox = guiCreateComboBox(0.28, 0.39, 0.63, 0.12, "", true, DogCreate.Window)
		DogCreate.MaleRadio = guiCreateRadioButton(0.40, 0.68, 0.04, 0.05, "", true, DogCreate.Window)
        DogCreate.FemaleRadio = guiCreateRadioButton(0.59, 0.67, 0.04, 0.05, "", true, DogCreate.Window)
        DogCreate.NameBox = guiCreateEdit(0.28, 0.23, 0.63, 0.12, "", true, DogCreate.Window)

 

use this :)

x,y = guiGetScreenSize()

GUIEditor = {
    edit = {},
    button = {},
    window = {},
    label = {},
    radiobutton = {}
}
addEventHandler("onClientResourceStart", resourceRoot,
    function()
        GUIEditor.window[1] = guiCreateWindow(x/2-248/2, y/2-284/2, 248, 284, "", false)
        guiWindowSetSizable(GUIEditor.window[1], false)
        guiSetAlpha(GUIEditor.window[1], 0.88)
        guiSetProperty(GUIEditor.window[1], "CaptionColour", "FF000000")

        GUIEditor.button[1] = guiCreateButton(0.14, 0.79, 0.71, 0.18, "Purchase Dog", true, GUIEditor.window[1])
        GUIEditor.label[1] = guiCreateLabel(0.03, 0.13, 0.92, 0.10, "Dog Creator", true, GUIEditor.window[1])
        guiLabelSetHorizontalAlign(GUIEditor.label[1], "center", false)
        guiLabelSetVerticalAlign(GUIEditor.label[1], "center")
        GUIEditor.label[2] = guiCreateLabel(0.05, 0.29, 0.24, 0.10, "Name:", true, GUIEditor.window[1])
        guiLabelSetHorizontalAlign(GUIEditor.label[2], "center", false)
        guiLabelSetVerticalAlign(GUIEditor.label[2], "center")
        GUIEditor.label[3] = guiCreateLabel(0.05, 0.40, 0.24, 0.10, "Breed:", true, GUIEditor.window[1])
        guiLabelSetHorizontalAlign(GUIEditor.label[3], "center", false)
        guiLabelSetVerticalAlign(GUIEditor.label[3], "center")
        GUIEditor.label[4] = guiCreateLabel(0.05, 0.52, 0.24, 0.10, "Color:", true, GUIEditor.window[1])
        guiLabelSetHorizontalAlign(GUIEditor.label[4], "center", false)
        guiLabelSetVerticalAlign(GUIEditor.label[4], "center")
        GUIEditor.radiobutton[1] = guiCreateRadioButton(0.34, 0.68, 0.15, 0.06, "M", true, GUIEditor.window[1])
        GUIEditor.radiobutton[2] = guiCreateRadioButton(0.53, 0.68, 0.15, 0.06, "F", true, GUIEditor.window[1])
        guiRadioButtonSetSelected(GUIEditor.radiobutton[2], true)
        GUIEditor.edit[1] = guiCreateEdit(0.38, 0.29, 0.53, 0.08, "", true, GUIEditor.window[1])
        GUIEditor.edit[2] = guiCreateEdit(0.38, 0.39, 0.53, 0.08, "", true, GUIEditor.window[1])
        GUIEditor.edit[3] = guiCreateEdit(0.38, 0.50, 0.53, 0.08, "", true, GUIEditor.window[1])    
    end
)

 

Link to comment
6 hours ago, Ayush Rathore said:

use this :)


x,y = guiGetScreenSize()

GUIEditor = {
    edit = {},
    button = {},
    window = {},
    label = {},
    radiobutton = {}
}
addEventHandler("onClientResourceStart", resourceRoot,
    function()
        GUIEditor.window[1] = guiCreateWindow(x/2-248/2, y/2-284/2, 248, 284, "", false)
        guiWindowSetSizable(GUIEditor.window[1], false)
        guiSetAlpha(GUIEditor.window[1], 0.88)
        guiSetProperty(GUIEditor.window[1], "CaptionColour", "FF000000")

        GUIEditor.button[1] = guiCreateButton(0.14, 0.79, 0.71, 0.18, "Purchase Dog", true, GUIEditor.window[1])
        GUIEditor.label[1] = guiCreateLabel(0.03, 0.13, 0.92, 0.10, "Dog Creator", true, GUIEditor.window[1])
        guiLabelSetHorizontalAlign(GUIEditor.label[1], "center", false)
        guiLabelSetVerticalAlign(GUIEditor.label[1], "center")
        GUIEditor.label[2] = guiCreateLabel(0.05, 0.29, 0.24, 0.10, "Name:", true, GUIEditor.window[1])
        guiLabelSetHorizontalAlign(GUIEditor.label[2], "center", false)
        guiLabelSetVerticalAlign(GUIEditor.label[2], "center")
        GUIEditor.label[3] = guiCreateLabel(0.05, 0.40, 0.24, 0.10, "Breed:", true, GUIEditor.window[1])
        guiLabelSetHorizontalAlign(GUIEditor.label[3], "center", false)
        guiLabelSetVerticalAlign(GUIEditor.label[3], "center")
        GUIEditor.label[4] = guiCreateLabel(0.05, 0.52, 0.24, 0.10, "Color:", true, GUIEditor.window[1])
        guiLabelSetHorizontalAlign(GUIEditor.label[4], "center", false)
        guiLabelSetVerticalAlign(GUIEditor.label[4], "center")
        GUIEditor.radiobutton[1] = guiCreateRadioButton(0.34, 0.68, 0.15, 0.06, "M", true, GUIEditor.window[1])
        GUIEditor.radiobutton[2] = guiCreateRadioButton(0.53, 0.68, 0.15, 0.06, "F", true, GUIEditor.window[1])
        guiRadioButtonSetSelected(GUIEditor.radiobutton[2], true)
        GUIEditor.edit[1] = guiCreateEdit(0.38, 0.29, 0.53, 0.08, "", true, GUIEditor.window[1])
        GUIEditor.edit[2] = guiCreateEdit(0.38, 0.39, 0.53, 0.08, "", true, GUIEditor.window[1])
        GUIEditor.edit[3] = guiCreateEdit(0.38, 0.50, 0.53, 0.08, "", true, GUIEditor.window[1])    
    end
)

 

Hi, thank you but I have other variables that reference to all the GUI items in my code above. Therefore, I cant use edit boxes so this will not work. I will try and change too see what happens

 

Edited by harryh
Link to comment

I have edited some stuff as said on the wiki to make GUI work on all resolution and it doesn't work still..

https://wiki.multitheftauto.com/wiki/GuiGetScreenSize

The GUI looks better but is still very disfigured.

722c0b6ab5854b1babf7f2990fbbb884.png

 

local x,y = guiGetScreenSize()
        local xx = 1960
        local yy = 1080

       	DogCreate.Window = guiCreateWindow(1517/1960*x, 119/1080*y, 326/1960*x, 270/1080*y, "", false)
        guiWindowSetMovable(DogCreate.Window, false)
        guiWindowSetSizable(DogCreate.Window, false)

        DogCreate.NameBox = guiCreateEdit(91/xx*x, 62/yy*y, 205/xx*x, 32/yy*y, "", false, DogCreate.Window)
        DogCreate.BreedBox = guiCreateComboBox(91/xx*x, 105/yy*y, 212/xx*x, 144/yy*y, "", false, DogCreate.Window)
        guiComboBoxAddItem(DogCreate.BreedBox, "German Sheperd")
        guiComboBoxAddItem(DogCreate.BreedBox, "Rottweiler")
        guiComboBoxAddItem(DogCreate.BreedBox, "Golden Retriever")
        guiComboBoxAddItem(DogCreate.BreedBox, "Pitbull")
        DogCreate.MaleRadio = guiCreateRadioButton(130/xx*x, 184/yy*y, 13/xx*x, 14/yy*y, "", false, DogCreate.Window)
        DogCreate.FemaleRadio = guiCreateRadioButton(192/xx*x, 181/yy*y, 13/xx*x, 14/yy*y, "", false, DogCreate.Window)
       
        DogCreate.BuyButton = guiCreateButton(23/xx*x, 205/yy*y, 280/xx*x, 54/yy*y, "Purchase Dog", false, DogCreate.Window)
       
       
        DogCreate.NameLab = guiCreateLabel(9/xx*x, 64/yy*y, 76/xx*x, 36/yy*y, "NAME:", false, DogCreate.Window)
       
        DogCreate.BreedLab = guiCreateLabel(8/xx*x, 106/yy*y, 77/xx*x, 24/yy*y, "BREED:", false, DogCreate.Window)
       
        DogCreate.MaLab = guiCreateLabel(130/xx*x, 165/yy*y, 16/xx*x, 16/yy*y, " M", false, DogCreate.Window)
       
        DogCreate.FeLab = guiCreateLabel(196/xx*x, 165/yy*y, 16/xx*x, 16/yy*y, " F", false, DogCreate.Window)
      
        DogCreate.WindowLab = guiCreateLabel(79/xx*x, 14/yy*y, 184/xx*x, 40/yy*y, "Dog Creator", false, DogCreate.Window)
       
      
        DogCreate.DogColorCombo = guiCreateComboBox(91/xx*x, 135/yy*y, 212/xx*x, 94/yy*y, "", false, DogCreate.Window)
  
        DogCreate.ColorLab = guiCreateLabel(8/xx*x, 131/yy*y, 77/xx*x, 25/yy*y, "Colour:", false, DogCreate.Window)

        local font0_intNameFont = guiCreateFont(":dogsystem/font.ttf", 20)
        guiSetFont(DogCreate.BuyButton, font0_intNameFont)
		

Also is it possible to set the font size relative to the screen size?

Link to comment
16 minutes ago, harryh said:

I have edited some stuff as said on the wiki to make GUI work on all resolution and it doesn't work still..

https://wiki.multitheftauto.com/wiki/GuiGetScreenSize

The GUI looks better but is still very disfigured.

722c0b6ab5854b1babf7f2990fbbb884.png

 


local x,y = guiGetScreenSize()
        local xx = 1960
        local yy = 1080

       	DogCreate.Window = guiCreateWindow(1517/1960*x, 119/1080*y, 326/1960*x, 270/1080*y, "", false)
        guiWindowSetMovable(DogCreate.Window, false)
        guiWindowSetSizable(DogCreate.Window, false)

        DogCreate.NameBox = guiCreateEdit(91/xx*x, 62/yy*y, 205/xx*x, 32/yy*y, "", false, DogCreate.Window)
        DogCreate.BreedBox = guiCreateComboBox(91/xx*x, 105/yy*y, 212/xx*x, 144/yy*y, "", false, DogCreate.Window)
        guiComboBoxAddItem(DogCreate.BreedBox, "German Sheperd")
        guiComboBoxAddItem(DogCreate.BreedBox, "Rottweiler")
        guiComboBoxAddItem(DogCreate.BreedBox, "Golden Retriever")
        guiComboBoxAddItem(DogCreate.BreedBox, "Pitbull")
        DogCreate.MaleRadio = guiCreateRadioButton(130/xx*x, 184/yy*y, 13/xx*x, 14/yy*y, "", false, DogCreate.Window)
        DogCreate.FemaleRadio = guiCreateRadioButton(192/xx*x, 181/yy*y, 13/xx*x, 14/yy*y, "", false, DogCreate.Window)
       
        DogCreate.BuyButton = guiCreateButton(23/xx*x, 205/yy*y, 280/xx*x, 54/yy*y, "Purchase Dog", false, DogCreate.Window)
       
       
        DogCreate.NameLab = guiCreateLabel(9/xx*x, 64/yy*y, 76/xx*x, 36/yy*y, "NAME:", false, DogCreate.Window)
       
        DogCreate.BreedLab = guiCreateLabel(8/xx*x, 106/yy*y, 77/xx*x, 24/yy*y, "BREED:", false, DogCreate.Window)
       
        DogCreate.MaLab = guiCreateLabel(130/xx*x, 165/yy*y, 16/xx*x, 16/yy*y, " M", false, DogCreate.Window)
       
        DogCreate.FeLab = guiCreateLabel(196/xx*x, 165/yy*y, 16/xx*x, 16/yy*y, " F", false, DogCreate.Window)
      
        DogCreate.WindowLab = guiCreateLabel(79/xx*x, 14/yy*y, 184/xx*x, 40/yy*y, "Dog Creator", false, DogCreate.Window)
       
      
        DogCreate.DogColorCombo = guiCreateComboBox(91/xx*x, 135/yy*y, 212/xx*x, 94/yy*y, "", false, DogCreate.Window)
  
        DogCreate.ColorLab = guiCreateLabel(8/xx*x, 131/yy*y, 77/xx*x, 25/yy*y, "Colour:", false, DogCreate.Window)

        local font0_intNameFont = guiCreateFont(":dogsystem/font.ttf", 20)
        guiSetFont(DogCreate.BuyButton, font0_intNameFont)
		

Also is it possible to set the font size relative to the screen size?

you should make your window size bigger like i have done in code above :) or give me the fonts i will set it  and give it to you 

Edited by Ayush Rathore
Link to comment

Hi, I have set the code like yours but now the is hanging half off the screen on the left when it should be in top right corner.

 

DogCreate.Window = guiCreateWindow(x/2-1517/2, y/2-119/2, 326, 270, "", false)

231d5407bfa548b8a752a35aa7201de1.png

How can I send you the font file.

Link to comment

This will fulfill your need 


x,y = guiGetScreenSize()

DogCreate = {}
addEventHandler("onClientResourceStart", resourceRoot,
    function()
    --  window
        DogCreate.Window = guiCreateWindow(x/2-248/2, y/2-284/2, 248, 284, "", false)
        --button
        DogCreate.BuyButton = guiCreateButton(0.14, 0.79, 0.71, 0.18, "Purchase Dog", true, DogCreate.Window)
        --main label
        DogCreate.WindowLab = guiCreateLabel(0.03, 0.13, 0.92, 0.10, "Dog Creator", true, DogCreate.Window)
        --editbox label
        DogCreate.NameLab = guiCreateLabel(0.05, 0.29, 0.24, 0.10, "Name:", true, DogCreate.Window)
        DogCreate.BreedLab = guiCreateLabel(0.05, 0.40, 0.24, 0.10, "Breed:", true, DogCreate.Window)
        DogCreate.ColorLab = guiCreateLabel(0.05, 0.52, 0.24, 0.10, "Color:", true, DogCreate.Window)
        --radiobutton
        DogCreate.MaleRadio = guiCreateRadioButton(0.34, 0.68, 0.15, 0.06, "M", true, DogCreate.Window)
        DogCreate.FemaleRadio = guiCreateRadioButton(0.53, 0.68, 0.15, 0.06, "F", true, DogCreate.Window)
        --editbox
        DogCreate.NameBox = guiCreateEdit(0.38, 0.29, 0.53, 0.08, "", true, DogCreate.Window)
        DogCreate.BreedBox = guiCreateEdit(0.38, 0.39, 0.53, 0.08, "", true, DogCreate.Window)
        --combobox
        DogCreate.DogColorCombo = guiCreateComboBox(0.38, 0.50, 0.53, 0.08, "", true, DogCreate.Window)  
        
        guiRadioButtonSetSelected(DogCreate.MaleRadio, true)
        guiLabelSetHorizontalAlign(DogCreate.ColorLab, "center", false)
        guiLabelSetVerticalAlign(DogCreate.ColorLab, "center")
        guiLabelSetHorizontalAlign(DogCreate.BreedLab, "center", false)
        guiLabelSetVerticalAlign(DogCreate.BreedLab, "center")
        guiLabelSetHorizontalAlign(DogCreate.NameLab, "center", false)
        guiLabelSetVerticalAlign(DogCreate.NameLab, "center")
        guiLabelSetHorizontalAlign(DogCreate.WindowLab, "center", false)
        guiLabelSetVerticalAlign(DogCreate.WindowLab, "center")
        guiWindowSetSizable(DogCreate.Window, false)
        guiWindowSetSizable(DogCreate.Window, false)
        guiSetAlpha(DogCreate.Window, 0.88)
        guiSetProperty(DogCreate.Window, "CaptionColour", "FF000000")
          
    end
)

and also now  to make you understand what it is 

x,y = guiGetScreenSize() -- for example yours 1920X1080
--to fit in all resolution
fx,fy = 1920,1080
--below step will divide x into fx pieces and y into fy pieces 
lx,ly = x/fx,y/fy
--lx ,ly now contains a value
posX,posY = lx*400,ly*300
width,height = 400,300 
--now lx*(as you divided your screen in 1920 parts horizontally so you can go till 1920) -- increasing will go ahead of screen
--now ly*(as you divided your screen in 1080 parts verticall so you can go till 1080) -- increasing will go beyond screen

--effect of width and height
-- if you have created font size greater than the width it will clip the text horizontally that is what in your gui is happening
-- if you have created font size greater than the height same as above
addEventHandler("onClientResourceStart", resourceRoot,
function()
 local font = guiCreateFont( "segoeui.ttf",72 ) -- for example and (second arguement is size of font)
 local lbl = guiCreateLabel  (posX,posY,width,height,"lol my example text", true ) -- change posX,posY to test and also it might clip
  guiSetFont( lbl, font )   
end)

-- now relative time

-- Imagine your screen is divided into 10 parts horizontally
-- so 1920/10 = 192 
-- so 0.1 = 1920 * 0.1 = 192.00

-- Imagine your screen is divided into 10 parts vertically
-- so 1080/10 = 108
-- so 0.1 = 1080 * 0.1 = 108.00

-- so for width and height same as case above for relative



posX,posY = 0.4,0.3
width,height = x*0.4,y*0.3 

addEventHandler("onClientResourceStart", resourceRoot,
function()
 local font = guiCreateFont( "segoeui.ttf",72 ) -- for example and (second arguement is size of font)
 local lbl = guiCreateLabel  (posX,posY,width,height,"lol my example text", true ) -- change posX,posY to test and also it might clip
  guiSetFont( lbl, font )   
end)












:)  well i am not good in making people understand but .. :)

Test and give reply

31 minutes ago, harryh said:

Hi, I have set the code like yours but now the is hanging half off the screen on the left when it should be in top right corner.

 


DogCreate.Window = guiCreateWindow(x/2-1517/2, y/2-119/2, 326, 270, "", false)

231d5407bfa548b8a752a35aa7201de1.png

How can I send you the font file.

read my above message

32 minutes ago, harryh said:

Hi, I have set the code like yours but now the is hanging half off the screen on the left when it should be in top right corner.

 


DogCreate.Window = guiCreateWindow(x/2-1517/2, y/2-119/2, 326, 270, "", false)

231d5407bfa548b8a752a35aa7201de1.png

How can I send you the font file.

 

  • Like 1
Link to comment
54 minutes ago, Ayush Rathore said:

This will fulfill your need 


x,y = guiGetScreenSize()

DogCreate = {}
addEventHandler("onClientResourceStart", resourceRoot,
    function()
    --  window
        DogCreate.Window = guiCreateWindow(x/2-248/2, y/2-284/2, 248, 284, "", false)
        --button
        DogCreate.BuyButton = guiCreateButton(0.14, 0.79, 0.71, 0.18, "Purchase Dog", true, DogCreate.Window)
        --main label
        DogCreate.WindowLab = guiCreateLabel(0.03, 0.13, 0.92, 0.10, "Dog Creator", true, DogCreate.Window)
        --editbox label
        DogCreate.NameLab = guiCreateLabel(0.05, 0.29, 0.24, 0.10, "Name:", true, DogCreate.Window)
        DogCreate.BreedLab = guiCreateLabel(0.05, 0.40, 0.24, 0.10, "Breed:", true, DogCreate.Window)
        DogCreate.ColorLab = guiCreateLabel(0.05, 0.52, 0.24, 0.10, "Color:", true, DogCreate.Window)
        --radiobutton
        DogCreate.MaleRadio = guiCreateRadioButton(0.34, 0.68, 0.15, 0.06, "M", true, DogCreate.Window)
        DogCreate.FemaleRadio = guiCreateRadioButton(0.53, 0.68, 0.15, 0.06, "F", true, DogCreate.Window)
        --editbox
        DogCreate.NameBox = guiCreateEdit(0.38, 0.29, 0.53, 0.08, "", true, DogCreate.Window)
        DogCreate.BreedBox = guiCreateEdit(0.38, 0.39, 0.53, 0.08, "", true, DogCreate.Window)
        --combobox
        DogCreate.DogColorCombo = guiCreateComboBox(0.38, 0.50, 0.53, 0.08, "", true, DogCreate.Window)  
        
        guiRadioButtonSetSelected(DogCreate.MaleRadio, true)
        guiLabelSetHorizontalAlign(DogCreate.ColorLab, "center", false)
        guiLabelSetVerticalAlign(DogCreate.ColorLab, "center")
        guiLabelSetHorizontalAlign(DogCreate.BreedLab, "center", false)
        guiLabelSetVerticalAlign(DogCreate.BreedLab, "center")
        guiLabelSetHorizontalAlign(DogCreate.NameLab, "center", false)
        guiLabelSetVerticalAlign(DogCreate.NameLab, "center")
        guiLabelSetHorizontalAlign(DogCreate.WindowLab, "center", false)
        guiLabelSetVerticalAlign(DogCreate.WindowLab, "center")
        guiWindowSetSizable(DogCreate.Window, false)
        guiWindowSetSizable(DogCreate.Window, false)
        guiSetAlpha(DogCreate.Window, 0.88)
        guiSetProperty(DogCreate.Window, "CaptionColour", "FF000000")
          
    end
)

and also now  to make you understand what it is 


x,y = guiGetScreenSize() -- for example yours 1920X1080
--to fit in all resolution
fx,fy = 1920,1080
--below step will divide x into fx pieces and y into fy pieces 
lx,ly = x/fx,y/fy
--lx ,ly now contains a value
posX,posY = lx*400,ly*300
width,height = 400,300 
--now lx*(as you divided your screen in 1920 parts horizontally so you can go till 1920) -- increasing will go ahead of screen
--now ly*(as you divided your screen in 1080 parts verticall so you can go till 1080) -- increasing will go beyond screen

--effect of width and height
-- if you have created font size greater than the width it will clip the text horizontally that is what in your gui is happening
-- if you have created font size greater than the height same as above
addEventHandler("onClientResourceStart", resourceRoot,
function()
 local font = guiCreateFont( "segoeui.ttf",72 ) -- for example and (second arguement is size of font)
 local lbl = guiCreateLabel  (posX,posY,width,height,"lol my example text", true ) -- change posX,posY to test and also it might clip
  guiSetFont( lbl, font )   
end)

-- now relative time

-- Imagine your screen is divided into 10 parts horizontally
-- so 1920/10 = 192 
-- so 0.1 = 1920 * 0.1 = 192.00

-- Imagine your screen is divided into 10 parts vertically
-- so 1080/10 = 108
-- so 0.1 = 1080 * 0.1 = 108.00

-- so for width and height same as case above for relative



posX,posY = 0.4,0.3
width,height = x*0.4,y*0.3 

addEventHandler("onClientResourceStart", resourceRoot,
function()
 local font = guiCreateFont( "segoeui.ttf",72 ) -- for example and (second arguement is size of font)
 local lbl = guiCreateLabel  (posX,posY,width,height,"lol my example text", true ) -- change posX,posY to test and also it might clip
  guiSetFont( lbl, font )   
end)











:)  well i am not good in making people understand but .. :)

Test and give reply

read my above message

 

 

 

 

Hi, thank you very much the GUI looks all correct now. What will I have to tweak to move it over to the right,

I have tried editing position codes but i get to 0 and its still not over right far enough.

DogCreate.Window = guiCreateWindow(x/2-0/2, y/2-284/2, 248, 284, "", false)

Also how come you you have x/2-248/2

 

Also I understand how you mean is that I divide my screen with his screen so lets say 

x, y = guiGetScreenSize()  His screen == 1280x720

fx, fy =  1920, 1080

lx, ly = 1280/1920, 1080/720

then

you do lx * position code, ly*positioncode, width of window, height of window

 

so guiCreateWindow(lx*poscode, ly*poscode, width of window, height of window)

Is that understanding correct?

 

70d67ef288264906b68fb71fddaea20d.png

Edited by harryh
Link to comment
1 hour ago, harryh said:

 

 

 

Hi, thank you very much the GUI looks all correct now. What will I have to tweak to move it over to the right,

I have tried editing position codes but i get to 0 and its still not over right far enough.

DogCreate.Window = guiCreateWindow(x/2-0/2, y/2-284/2, 248, 284, "", false)

Also how come you you have x/2-248/2

 

Also I understand how you mean is that I divide my screen with his screen so lets say 

x, y = guiGetScreenSize()  His screen == 1280x720

fx, fy =  1920, 1080

lx, ly = 1280/1920, 1080/720

then

you do lx * position code, ly*positioncode, width of window, height of window

 

so guiCreateWindow(lx*poscode, ly*poscode, width of window, height of window)

Is that understanding correct?

 

70d67ef288264906b68fb71fddaea20d.png

so my Tutorial works :) 

now see 

x/2-248/2 (i have done it so that it stays always in the middle of screen)

x = 1920

and width = 248

so 

1920/2 = is half of screen and from that - 248/2 is half width of window making it in the middle

to your problem change line one to this



x,y = guiGetScreenSize()
fx,fy = 1920,1080
lx,ly = x/fx,y/fy
posX,posY = lx*1300,ly*200 
width,height = 248,284

DogCreate.Window = guiCreateWindow(posX,posY,width,height, "", false)

 

Edited by Ayush Rathore
Link to comment
1 minute ago, harryh said:

Yes, Thank you, how can I move it over more to the right becauseI have 

DogCreate.Window = guiCreateWindow(x/2-0/2, y/2-284/2, 248, 284, "", false) and I cannot set the position code any lower than 0?

i have edited it read above just change lx*(below 1700)

Edited by Ayush Rathore
  • Like 1
Link to comment

1. Create a new GUI.

2. Right click on the GUI and set the position code to center.

3. Again right click on the GUI and set it to Relative.

4. And then create your buttons, labels etc, but set only the GUI to relative and leave the rest on Absolute.

 

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...