UI Scalability: All Devices (No Plugins)

[OceanTubez (GK_OceanTubez)]

Okay. You want to know how to make all those Frames and TextLabels scalable on all devices? I got you.

Now, first of all, I’m not saying you shouldn’t use plugins for this. This tutorial is for those who want to make it without plugins.

---

Why choose this method over other manual methods?
This method allows you to actually use provided Size and Position changing tools provided by ROBLOX on the screen instead of the Properties Tab.

---

Going to start off easy with a simple ScreenGui in StarterGui. Call it whatever you want. Or you can use an already built one.

Tip: It’s better to build rescaling Ui’s from scratch for this method.

Now in order to make something be rescalable on all devices, we have to follow these same steps for every single piece of UI you have, like Frames, TextLabels, TextButtons etc.

Step 1. Make Anchor Point’s value (0.5, 0.5)

Step 2. Go into the position value, and set it to (0.1, 0, 0.1, 0)

Step 3. Go into the size value and set it to (0.5, 0, 0.5, 0)

Now what you’ve done, is made your UI use scale instead of offset manually.

What you can do now, is use the provided screen tools to change the size and position without having to worry about them rescaling on all devices! As long as you did the above steps, and even did anything using the screen tools after that, it’ll still rescale!

This tutorial is a follow up for this one:

Intro to Plugins: The 3 basic types

(This is my first tutorial) Alright. I’ll start this off simple enough. You want to know how to make a plugin? I got you. There are 3 basic types of plugins, 2 of which are in the same category: Toolbar Button Click Plugins (Single Click Button) DockWidgetUI (GUI) CoreGui UI (GUI) I’ll explain how to make each one of them in detail.

Toolbar Button Click (Easiest)

Okay. This one’s pretty simple. I don’t want you to copy and paste my code, but rather understand it. So first of all, you nee…

Thank you for reading this tutorial!

[Misinformater (Manteca)]

There’s a lot of posts about this out there…?

[OceanTubez (GK_OceanTubez)]

This one declares the benefits, and plus, it’s for my other dedicated tutorial.
But, you do have a point. I just wanted to make it so I did.

[VegetationBush (FartedAtLightspeed)]

This is a very misleading tutorial.

Setting these properties you mentioned to any UI:

@OceanTubez

Step 1. Make Anchor Point’s value (0.5, 0.5)

Step 2. Go into the position value, and set it to (0.1, 0, 0.1, 0)

Step 3. Go into the size value and set it to (0.5, 0, 0.5, 0)

does not fix any of the screen size scalability issues.

Properties are circumstantial. Depending on the end result, different elements will be used.

Using scale for every UI is terrible practice. Not only is what you said not true, but it also results in low consistency and requires text scaled, which you want to try to avoid. A more experienced designer would reside closer to using offset and constraints.

I’m going to be straight to the point here: none of this really helps. These aren’t tips but are regurgitations of what other people suddenly started repeating because individuals who were more experienced said them and it worked, which was only a solution because it was within the correct context.

[OceanTubez (GK_OceanTubez)]

I don’t think you saw the part after. I may be wrong here, but the point of using this is to still be able to use the provided screen tools and have scalable UI.

[3rdhoan123 (FutureNoob)]

Gonna have to agree with @VegetationBush on some parts.

First and foremost:

@OceanTubez

Now in order to make something be rescalable on all devices, we have to follow these same steps for every single piece of UI you have, like Frames , TextLabels , TextButtons etc.

Step 1. Make Anchor Point’s value (0.5, 0.5)

Step 2. Go into the position value, and set it to (0.1, 0, 0.1, 0)

Step 3. Go into the size value and set it to (0.5, 0, 0.5, 0)

Now what you’ve done, is made your UI use scale instead of offset manually.

All you’re doing at this point is making roblox’s tool switch from changing the offset to scale only. The anchor point also has nothing prevelant in terms of making it scale, it only determines where in which the UI will be anchored on within a given area.

I can change any element to have any scale I want, example being:
Position = (0.000000000005, 0, 0.999999, 0)
Size = (0.02525252, 0, -0.52, 0)

And it’ll still switch the tool to using scale instead of offset. There is no need in changing both the position and size to be certain values. All you’re doing is switching from offset to scale for the UI tool dragging.

This also doesn’t mention the underlying issues when going about this method. For starters, scale and offset behave different, each having their own use cases. Although scaled does certainly make it easier to quickly make things inherently scale based on the screen size, alot of several other issues will pop up that will require resolving + more headaches including text inconsistences, sizing issues, shape issues, and many others.

@VegetationBush Puts it best:

@VegetationBush

does not fix any of the screen size scalability issues.

Properties are circumstantial. Depending on the end result, different elements will be used.

Using scale for every UI is terrible practice. Not only is what you said not true, but it also results in low consistency and requires text scaled, which you want to try to avoid . A more experienced designer would reside closer to using offset and constraints.

I will admit I made this mistake many times in the past without knowing due to seeing alot of tutorials saying to use only scale. This is why I’ll mention it here and now that for that practice, I would not advise doing so.

Henceforth, this point does not stand:

@OceanTubez

I don’t think you saw the part after. I may be wrong here, but the point of using this is to still be able to use the provided screen tools and have scalable UI.

A better way of rewording this tutorial would be to mention that:

1. It does not resolve all scaling issues AND should not be the only thing used to maintain scaling across different screen sizes/devices.
2. All you need to do for the screen tools to use scaling instead of offset is to use scale numbers in the position/size values instead of offset. (There might be a different method but thats one that I know of)
3. Several constraints, offset, and avoidance of text scaled when possible should be advised.

[OceanTubez (GK_OceanTubez)]

I guess that’s true. But the screen dragging tools part, that is what I was going for, I just put some values I commonly use when switching over.