Scripting HelpersARCHIVE
A little piece of Roblox history. Preserved for everyone, one question at a time.Read about the archive →
All questions/Question #17515
✓ ANSWER ACCEPTED

What is the best way to make sure everyone sees a GUI homogeneously? [Discussion]

Asked 688 views1 answers

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:

http://prntscr.com/74xyds

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

AnonymousEdited

2 comments

0

Why would you want to throw away scale? You should trust ROBLOX to position those objects. For instance, if a player resizes their window, the GUIs will then be sized wrong.

Anonymous#
0

The reason I got rid of scale is due to the fact smaller windows were getting really crushed and squirmed together. I'll put an example in the edit

Anonymous#

1 answer

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

AnonymousEdited Permalink

6 comments

0

Are the labels on the right part of any Frame, or are they directly under the ScreenGui itself?

Anonymous#
1

Nice diagram though. Thanks for the detailed answer, Blue

Anonymous#
1

I just put the ones on the right under the ScreenGui, but it would make more sense to put them in a frame, probably, because it would make changing your mind a lot easier.

Anonymous#
0

Good answer, but I have a serious problem with the picture. LATIN SUCKS.

Anonymous#
0

lol Perci. That's a 'lorem ipsum'. Its commonly just used as filler text. Its not like Blue is showing off his latin skills xD

Anonymous#
0

Made an edit if someone can assist with that

Anonymous#

This discussion is preserved as it was. New answers, comments, and votes are closed.