Every GUI has a property named Position and Size. Position and Size are divided into two categories, the X and Y axis. The axes are divided into two more categories, the Scale and Offset. Scale (the first number) resizes the GUI based on the percentage of the screen from a scale of 0 to 1, and Offset (the second number) uses pixels. The Size and Position are organized as (X-Scale, X-Offset, Y-Scale, Y-Offset).
Position
Let's say we want our GUI to be dead center in the middle. We would edit the Scale so that it is 0.5 (50% of the screen). This gives us a position of (0.5, 0, 0.5, 0). (NOTE: When centering GUIs, always remember that the top-left corner of the GUI is used as the reference point.)
Size
Let's say we want out GUI to span across the screen horizontally but take up half the screen vertically. We would edit the scale so that the X-Scale is 1 (100% of the screen) and the Y-Scale is 0.5 (50%).
If this was unclear, just ask me a question and I'll edit my response. If you thought my answer was helpful, you can upvote and accept it. I hope it helped!
Example
Some people use the Scale for size and position while others use Offset. It's a matter of preference. Personally, I use Scale all the time because it adapts to all screens. But let's assume that you want to use Offset for your GUI. Let's use the second GUI for demonstration. First, set the GUI's position to the bottom-right corner. It's not as simple as changing the Scale for Position to 1 because the GUI measures from the top-left corner and your GUI will end up outside the screen! So we should use the Offset property to push it onto the screen. The GUI's size is {0, 250},{0, 50}, so the GUI's Position should be {1, -250, 1, -50}. You said you wanted to push it 10 pixels off the screen though. Just add (or subtract!) 10 to the offset to achieve this. The GUI's Position is now {1, -260, 1, -60}! Note that if you were using Scale to resize GUIs, you wouldn't use Offset. I hope this way easy to understand! It's kind of hard to explain in words.
EDIT
In response to your edit, no, you cannot swap the Offset and Scale and expect satisfactory results. Note that when using Scale, any numbers over 1 will not show up on the screen, because 1 = 100% of the screen. Assuming that you have knowledge of basic number to percentage conversions, setting the Scale to 120 will place the GUI at 12000% of the screen. The problem with this is self-explanatory. Same with 675, which would place the GUI at 67500% of the screen. The same applies to Size. As a reminder, 0.2 = 20%, 0.4, 40%, 0.75 = 75%, etc.
9 comments
Thanks! Its kinda cleared it up a bit, But lets say, I want my GUI to be 10 pixels from the edge of the screen how am I supposed to do this??
The simplest solution would be to set the offset to 10 or -10, depending on which side you want it to be 10 pixels from. However, position is measured from the TOP-LEFT corner, which means that you may have to edit the position in relation to size. Give me the size of your GUI and the desired position and I can help you with this.
I actually have a series of GUIs as im trying to make a panel with all the information on (Fuel exc), The size of the first image is {0, 100},{0, 100} and the Gui that displays the amount of Fuel left is {0, 250},{0, 50} - But both of these are in the 'Offset' parts of the Guis..... This is confusing haha (And I wanted them to be a few pixels from the bottom right of the screen with the second Gui
Second Gui being next to it* Got cut off because it was too long haha
I edited my response to answer your question. I hope it helps!
Yeah, that's made it clearer. Thanks for all your help man, much appreciated!!
No problem! :)
I've edited my question with one last thing, Edited my question as Im not sure if it would fit here.
I've answered your question. I hope it helps!