how do i scale my UI so that it looks the same on all devices?
normally:
when i change the viewport size:
none of the tutorials i’ve been looking at have been any help.
should i just get a job, get my money up, and hire someone who knows how to scale and position ui?
This is because you’re using Offset instead of Scale inside of the Size property of your UI.
Before:
After:
This will scale the UI on every device, including mobile, console …
Most developers use plugins to auto-scale the UI instead of doing it manually. I really recommend downloading AutoScale plugins, like AutoScale Lite for example.
This is how you use AutoScale Lite:
Click on your UI
Click on Unit Conversion
Then in “Size” click on Scale
how would i use scale instead of offset though?
(i may download autoscale and try that instead)
When you add a UI on Roblox Studio, its size is automatically offset. I usually use the plugin first to make it Scale instead of Offset. This way I don’t have to worry about it once I’m done designing it.
If you don’t want to use the plugin, you can always do it manually by changing the size to {0.5,0},{0.5,0} and then scale it however you want.
Also something that helps to make sure that the UI is in the position you want is to use the AnchorPoint Property and change it to the desired Vector2 so that it doesn’t go off screen on rescaling of the window that the game is in. It is very useful and I use it every time I make UI’s.
What anchorpoint does is set this little point to a different location and then that is the part of the UI that will go to the position that you put into the position property, while moving the rest of the UI element as well.
Also I’m pretty bad at explaining stuff like this so my explanation on Anchor points isn’t that good.
Just to be extremely clear: using a plugin is not recommended (by me, at least) even though most developers use it.
I have to actually fix GUIs made by other members in my team because they don’t know how to edit the properties and instead just use the plugin.
In addition, converting item sizes to scale is not necessarily a good thing. It makes text impossible to read on mobile, and it ruins the experience by making huge buttons for large monitors. What you should do instead is use offset with a centered anchor.
A general rule of thumb is that if the UI item does not exceed 15% of the screen, make it offset.
AnchorPoint is a Vector2, not a UDim2. Your explanation is fine, but it is hard to read.
Anchor points determine where the Position property affects the UI. Simply put, it is the scale-based origin of the UI, represented by a square point visually. An anchor point of 0.5, 0.5 would center the UI into the position. There’s 8 you need to know:
Man, we really need a scale constraint for UIs. Why do we have to script that?
Anyways, in OPs case, they would want roughly:
This should be ideal for most screen sizes; however, I would strongly recommend redesigning your UI so that text like this does not use offset. There are some pretty small screens out there that might not support 300 pixels wide. You might want to make it scaled to {1, 0}, {0, 50} instead, and place it closer or on the top bar or the bottom of the screen. This would be ideal.
I’m just making sure you won’t pick up any bad practices since they’re hard to grow out of.
This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.
