Making a GUI perfect on any screen

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.

https://developer.roblox.com/articles/Intro-to-GUIs 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.

If you want it to fit every single screen, you shouldn’t use the second part of the UDim2. The first UDim2 is better because it will actually fit any screen when you move it to the left, right, center, whatever. Make sure you check if your size or position is at the second UDim2.

I think you’ve got this backwards, people with fatter fingers have a lot more trouble with small UI than people with mice. Either way, you still want to use scale to some extent even if you have separate UI for mobile/computer since not all phones or computers have the same sized screen and you’d still approach the general design the same way.

1 Like

Imagine i asked you to hit the top right, bottom left, bottom center, top left in some short timespan and the buttons werent in the precise corners. A finger could do this, a mouse could not. The assumption is a good ui for each system. If you are designing too small of buttons no device can do it.

I’m not trying to argue or get too off-topic, but I find a mouse much easier to make quick and (more) precise movements with. If you have multiple buttons close together, it’s incredibly easy to overreach or accidentally tap with a finger. On the other hand, with a mouse you can easily click exactly what you want, as well as get your mouse across the screen quickly. Then again, I don’t use mobile much and may just have little experience with it.

1 Like

Wait, what? The UI editor uses Scale for me.

The UI editor uses the type it already has (but defaults to scale)
if you manually add offset values it’ll use offset and vise versa for scale

1 Like