Jump to content

[HELP] GUI Editor offsets


Imposter

Recommended Posts

Hey there,

I am currently using the GUI Editor Resource and am experiencing problems with offsets when using the code that is outputted. As you can clearly see below, the offsets from left and right (for the children of the scrollpane) should be 10px each.

  
GUIEditor = { 
    tab = {}, 
    staticimage = {}, 
    edit = {}, 
    tabpanel = {}, 
    label = {}, 
    button = {}, 
    scrollpane = {}, 
    gridlist = {}, 
    memo = {} 
} 
addEventHandler("onClientResourceStart", resourceRoot, 
    function() 
        local screenW, screenH = guiGetScreenSize() 
        GUIEditor.staticimage[1] = guiCreateStaticImage(screenW - 267 - 10, screenH - 484 - 10, 267, 484, "images/galaxys4.png", false) 
        GUIEditor.staticimage[2] = guiCreateStaticImage(20, 51, 227, 383, "images/white.png", false, GUIEditor.staticimage[1]); 
        GUIEditor.scrollpane[1] = guiCreateScrollPane(0, 0, 227, 383, false, GUIEditor.staticimage[2]) 
         
        GUIEditor.label[1] = guiCreateLabel(10, 10, 207, 43, "Email", false, GUIEditor.scrollpane[1]) 
        local font_0 = guiCreateFont(":SRR-Gamemode/fonts/srrheadfont.ttf") 
        guiSetFont(GUIEditor.label[1], font_0) 
        guiLabelSetColor(GUIEditor.label[1], 250, 195, 4) 
        guiLabelSetHorizontalAlign(GUIEditor.label[1], "center", false) 
        guiLabelSetVerticalAlign(GUIEditor.label[1], "center") 
        GUIEditor.tabpanel[1] = guiCreateTabPanel(10, 60, 207, 313, false, GUIEditor.scrollpane[1]) 
  
        GUIEditor.tab[1] = guiCreateTab("Inbox", GUIEditor.tabpanel[1]) 
  
        GUIEditor.memo[1] = guiCreateMemo(10, 114, 187, 165, "", false, GUIEditor.tab[1]) 
        GUIEditor.gridlist[1] = guiCreateGridList(9, 8, 188, 101, false, GUIEditor.tab[1]) 
        guiGridListAddColumn(GUIEditor.gridlist[1], "Subject", 0.4) 
        guiGridListAddColumn(GUIEditor.gridlist[1], "Sender", 0.4) 
  
        GUIEditor.tab[2] = guiCreateTab("Send", GUIEditor.tabpanel[1]) 
  
        GUIEditor.edit[1] = guiCreateEdit(6, 12, 191, 27, "Subject", false, GUIEditor.tab[2]) 
        GUIEditor.edit[2] = guiCreateEdit(6, 49, 191, 27, "Recipient(s) (Split by \", \")", false, GUIEditor.tab[2]) 
        GUIEditor.edit[3] = guiCreateEdit(8, 85, 189, 168, "", false, GUIEditor.tab[2]) 
        GUIEditor.button[1] = guiCreateButton(131, 259, 66, 20, "Send", false, GUIEditor.tab[2])     
    end 
) 
  

But this is what is shown.

cnt.png

As you can see, the offsets are totally incorrect, and this is not what I see when designing the GUI. Is this an MTA Bug when using staticimages? I would really appreciate it if someone with knowledge of this would help me out.

Thanks,

NooP

Link to comment

I usually do it like it's explained when reading about guiGetScreenSize. And most of the time, it yields perfect results, some things might need another way to do it though...

1. Import the Samsung picture via the GUI Editor and set it to the size you want.

2. Add the GUI Elements you want; Tab Panel with Tabs, Gridlists and so on. Use Absolute co-ordinates.

3. Then output the code and divide the X/Y positions and sizes with your resolution. For example;

Here you have those values;

  
local screenX, screenY = guiGetScreenSize() 
guiCreateStaticImage(20, 51, 227, 383, "images/white.png", false, GUIEditor.staticimage[1]) 
  

Position X: 20/1920 = 0.0104

Position Y: 51/1080 = 0.0472

Size X: 227/1920 = 0.1182

Size Y: 383/1080 = 0.3546

Then you should make it look like this;

  
local screenX, screenY = guiGetScreenSize() 
guiCreateStaticImage(screenX*0.0104, screenY*0.0472, screenX*0.1182, screenY*0.3546, "images/white.png", false, GUIEditor.staticimage[1]) 
  

Some people prefer not to use multiply since it returns a lot of numbers and can at some times be somewhat off unless you use all of it. It's accurate enough most of the time though.

You can of course use subtraction instead if it pleases you.

This is my own preferred way of doing it, if someone else knows of a more reliable/efficient way of doing it, do let him know :P

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