What is the best way to make sure everyone sees a GUI homogeneously? [Discussion]
GUI
Now, when it comes to dealing with a few simple TextLabels and Boxes of a decent size, using scale tends to work fine. However, when it comes to dealing with perhaps smaller sizes for certain things, such as a TextLabel with a Y Offset [Or even X] of .001, then things start to get funky when it is viewed on different peoples screens.
For example, although everything on MY screen seemed to look great, my friend with a smaller monitor had this occur:
And with something as simple as this:
http://gyazo.com/95924b260944a31c3f75469c2a7be352
sometimes the small blue line seen will be touching the words or even intersecting it.
Attempted Methods
First off, using offset from the start is a bit silly since it can go past peoples screens if you set it too high. However, what I did was, I set the scale of the size and position of a frame, but made its descendants use offset. Although it looked a 'bit nicer', mostly everything was either out of the frame or smudged.
Second Off, I tried to take the scale of everything and multiply it by their parents AbsoluteSize and AbsolutePosition, and although I got the most closest to best results with this, it unfortunately wasn't still that accurate.
Third Off, I tried a combination of Scale and Offset but that didn't go neatly at all.
What I want to know
What I'd like to know: What is the best, most absolute way of making sure that every player sees a gui in the same manner no matter their monitor size?
EDIT:
I'm running this to try and set everything to offset based on the users screen size, but some of the things still come a bit off. Any way to make it better?
function convertObj(guiobject)
local par = guiobject.Parent
guiobject.Size = UDim2.new(0,guiobject.Size.X.Scale * par.AbsoluteSize.X,0, guiobject.Size.Y.Scale * par.AbsoluteSize.Y)
guiobject.Position = UDim2.new(0,guiobject.Position.X.Scale * par.AbsolutePosition.X,0,guiobject.Position.Y.Scale * par.AbsoluteSize.Y)
end
function b(loc)
for _,v in pairs(loc:GetChildren()) do
if v:IsA("GuiObject") then
convertObj(v)
b( v )
end
end
end
b(game.StarterGui.ScreenGui)
--yes I know it says startergui. I keep it like that for testing in Studio
EXAMPLE
Here is a .gif to show what I'm experiencing with smaller windows. http://gyazo.com/ddd0e2e751f68b3438ee26ff6ddeb244
Here is a .png of the GUI Hierarchy: http://gyazo.com/9cbcfb9193799cd13091d27e663784fd
0
0
1 answer
A single answer probably can't cover all of the details of this, so hopefully others can give insight here, too.
Using Scale is a good idea to begin with. In particular, most elements should be probably "attached" to the corners, sides, or middle of the screen.
Small details should be done with pixels. In particular, padding and margins -- the space around text and around boxes -- should probably be done with pixels. That lets you guarantee that they are square, and that they are proportioned well with text.
Text will always be sized in pixels (offset) rather than scale, as long as TextScaled is false -- so features like lines under them will probably use offset in conjunction with scale.
For some small things, it might make sense to just use pixels. In particular, with wrapping text -- since depending on the width, the height will change. (Or you can use a script to pick several hand made ones depending on available width, or use TextScaled)
You can also resize your window to really thin and really tall to see how it works on various aspect ratios. If you have a big monitor, it's also easy to see how it will work on smaller resolutions.
Things that can't move (relative to each other) shouldn't move at all when you resize, so you don't really need to check the precise resolution to know if it will work.
Here is a picture showing some of the ways you could use Scale and Offset without being problematic. The blue lines mark uses of Scale, and the red of Offset.
I used TextScaled for the paragraph so that both width and height could be in Scale (see above). Alternatively, I could have used offset for both, but only if I'm confident that it will fit on all of the screens I'm targeting.
The width of the bars at the right could also be Scale. Unless you wanted the height of the three items at the right to match the box to the left of them, you probably would be best leaving the height as Offset, since you could better manage the text size relative to the vertical space.
0
1
1
0
0
0