I have made a GUI for my game. However, when I test it on mobile it’s WAYYY to big. I’m not the best at GUIs and never been into them so how can I make it so its the perfect size on any device?
3 Likes
Are you using Scale or Offset? Offset is exact pixel measurements and so will be too big on some devices, too small on others. Scale is relative, so it’ll always be the same relative size across screens.
I hardly use GUIs so I don’t know what you’re talking about
1 Like
How are you setting the sizes of your GUIs?
I just use this for creating and scaling 
The UI editor sizes in offset, last I remember. You’ll need to manually set the size property and use scale.
Here’s a tutorial on basic usage of the UI system:
8 Likes
Wasn’t there a plug-in that converts offset to scale and automatically adds UI constraints to the frames?
3 Likes
That doesn’t help
Don’t know
In what way does it not help? It’s a tutorial meant for absolute beginners.
1 Like
It’s too confusing for me
About this plug-in to be exact?
5 Likes
Can you post pictures that show how it’s too big?
There’s multiple ways UI can be too big that can be caused by different things.
Perhaps he’s more of a visual or hands on person? People learn in different ways so written tutorials isn’t beneficial to everyone.
UI | Documentation - Roblox Creator Hub If the DevFourm tutorials are not your thing
Maybe using an example, with a video tutorial, such as https://youtu.be/GIJlW4MEBtA
(Find your learning style and find something around that to learn)
4 Likes
If the size is {0, 80},{0, 50} it’s 80 pixels wide and 50 pixels tall. If the size is {0.5,0},{0.2,0} it’s 50% of the screen width and 20% of the screen height. Play with the first number and leave the second one at zero if you want it to be the same for everyone.
5 Likes
Position works the same way, but keep in mind that the top left corner of the object is where its position is.
AnchorPoint helps alot also if you want the gui perfectly centered or on the right side of the screen. It works in Scale for both values.
1 Like
To add on to that, Chrythm’s ‘top left corner’
is what AnchorPoint modifies. By changing the AnchorPoint you can change that ‘top left corner’ to the ‘bottom right corner’ or the ‘top center’ and so on.
Many people will tell you to use scaling properties of ui to achieve the same UI for pc and mobile. I would caution you against it. Mobile has entirely different needs and constraints compared to pc. You cant touch the screen on an xbox, you can reach ur hand across the screen on a phone, mice can’t do pinpoint accuracy like a finger can.
Detect the device and issue the player the corresponding, custom built ui tailored to the device.