Good UI tutorials that cover thoroughly

[Oficcer_F]

Hi, I have been making games for some years now and I know how to script and use GUIs. But there is one thing that I have always been struggling with on Roblox, and that is how to keep the same ratio on different screen sizes and when to use Scale and Offset.

As a result, all my tries on making a good UI have failed and caused a lot of frustration.

I know there are plenty of tutorials on Roblox GUI’s, but none of them have really fulfilled my needs, none of the tutorials cover for example the Aspect Ratio Constraint nor any other constraints. They don’t cover when to use Offset and when to use Scale. They also never cover how to make the UI’s mobile-friendly so they work on iPad’s, Phones and computers.

Therefore, I always feel like I am behind the Roblox “UI technology” if you like. I always feel like I know the basics but there it stops. And as UI’s are such a big and important part of a game, it’s impossible to ignore the fact that I am far from good enough to make good and quality UI’s that fit on all screens.

So in short, are there any good wholesome and detailed Roblox GUI tutorials out there? I might’ve been dumb and not found those but I have really tried finding good and all-covering tutorials. So again, are there any tutorials, videos, documents, articles and what not that cover everything from basics, when to use Offset and Scale up until how to make them compatible on touch screens, animate them and how to make the ratio correct on other screen sizes etc.

And if there are no such articels, videos etc. Would you consider maybe taking time to explain these topics?

This will not only help me, but the whole developing community on Roblox.

Thank you in advance.

EDIT: Would love to get even more recomendations

[rolbloxguy1876]

Here’s a quick rundown:

Scale - Percent of the screen (OR PARENT) the object covers. 0.5 = 1/2 of the screen across all screen sizes. If the GUIObject is inside another (Like a textbox inside a frame, for example), it’s the same deal.

Offset - Pixels. An offset value has to be an integer (No decimals). For example, an offset value of 5 means 5 pixels.

Aspect ratio constraint - As easy as it sounds. It will be in control of the size of the GUI element. These are only useful when using scale, because for example if you were trying to make a square, a scale size of (0.5,0.5) will only be a square on square monitors, which are very uncommon. A value of 1 inside the constraint means it will keep the frame a square while still being responsive to different aspect ratios and screen sizes.

As for when to use scale vs offset, this is when it gets a little blurry. You may hear some people saying only scale or only offset, but based on my personal experience, it really just comes down to the situation. In a perfect world, you should always use scale to make responsive UI. Combine it with UIListLayouts and AspectRatioConstraints and it will scale across all screen sizes.

-You should ALWAYS use scale when positioning GUI elements. There are some exceptions.

-You should mainly use offset to size GUI elements (IF you use offset at all, again, to make a responsive UI you need to use scale, but sometimes offset gets the job done. Offset is easier to work with.) However, if the frame is going to be big (I say that loosely) don’t use it. Offset is perfect for sizing generally smaller things like shops or information cards.

-When making something like a health bar, offset is acceptable to use for sizing the background of the bar. To make the bar itself, insert it as a child of the background and use scale to size that. Much easier to script that way.

There’s a lot more to this. In my experience, those articles or tutorials you’re looking for are very confusing. I taught myself all I know about Roblox GUI and I’d consider myself pretty fluent in this stuff. If you want to know more, don’t hesitate to shoot me a private message or ask a question.

[Oficcer_F]

Thank you for your reply. If I understand it correctly, scale should be used most of the times (if not always?).

But could you explain UIAspectRatioConstraint, what does it do, do I need to use it when using scale etc?

Could you just explain UIAspectRatioConstraint a little more detaled? Thank you!

[rolbloxguy1876]

It really depends on whether or not you want to go all in with scale. If you’re making a game that you need to work on mobile and PC, then definitely do all scale.

Like I said in my previous reply, the aspect ratio constraint is as easy as it sounds.

An aspect ratio is the ratio of the X plane of the screen to the Y plane of the screen. So, for example, a frame with pixel size (100,200) has an aspect ratio of 0.5.

Now this is where it gets a little tricky. You would want to use aspect ratio constraints to keep a GUI element at the same aspect ratio across all screens (if you’re using offset, you don’t need to worry about it because offset is just pixels!) Because scale represents a percentage of the screen, and every screen resolution is different, the aspect ratio will not be the same. This can present a problem if for example you wanted to make a square. It won’t be a square on all screen sizes.

To make this square, you would use an aspect ratio constraint with a value of 1. The constraint will affect the size.

Hope this helped.