I'm aware of the difference; scale is the scale of the screen, regardless of resolution, and offset is number of pixels regardless of screen size.
My question is, how do I make it work nicely together; is there an algorithm? Like, how do I make it work better on smaller or bigger resolutions, or even mobile or on a tablet?
Thanks, all replies are appreciated!
There's a few ways we can look at this.
A simple solution is to size everything in pixels, and just position it using Scale. This will mean really small display get the content overlapped / possibly unusable, and really large displays just get lots of empty space. If you're okay with it not working on mobile devices, that's just fine. Otherwise, you'll just have to keep your buttons really small, which probably isn't what you want.
Alternatively, you could make everything sized and positioned by scale. If it looks right on your particular computer, then it will look at least close for everyone else. Proportions might be changed, but the layout will always be the same and everything will remain visible without any overlapping.
Or, you can use a mix. For example, pixels of margin/padding around content rather than using scale; small gaps between GUIs probably shouldn't get larger as the screen does, so it makes more sense to make these defined in terms of pixels.
Basically:
Position at least at the most basic level using scale (e.g., never use "700 pixels from the left edge of the screen", use 0.5 scale + 17 pixels from the left edge), and your GUIs will be adaptive enough to fit any screen.
You don't need anything "smart" to actually script adaptive GUIs for almost all purposes. Sometimes things might be too large to fit in the original layout on very small screens, though this is unlikely. If your GUIs only looked on a particular aspect ratio (e.g., you need squares) but you are using Scale to size / position everything, then you could make a containing box which sizes itself to be a particular ratio and fit within the screen using a script.
I use an offset, this way, despite the screen resolution it will always be in the same place. For example, if we have it as {0.5, 0} we will always know it is in the dead center.