I have been attempting to make a UI look scaled on all devices. However, what I have tried is not working. Please note that I am not an experienced UI Designer. UI is very important for a game, as many of you know. How do I fix this?
I have tried changing the anchor point to {0.5, 0.5}. That did not fix the scaling issue (I tested it on my phone). I have also tried creating a script for it. That did not work either. Do any UI Designers know how to fix this?
– ChasingNachos
When sizing and positioning your GUI elements, use scale instead of offset. While offset works in pixels, scale takes into account the size of the element’s parent; this way, the position and size of elements are relative to the client’s screen size. You can use a UIAspectRatioConstraint to maintain the aspect ratio of your GUI while using scale.
This is the formula for GUIs that use only offset for sizing.
UDim2.new(0.5, -xOffset/2, 0.5, -yOffset/2)
Scale is a number that generally ranges from 0 to 1 but it can be any number you want. This number refers to a percentage of the GUI’s parent window it will be sized/positioned to. Say for example you have a frame sized UDim2.new(0, 250, 0, 250), and a child label sized at UDim2.new(1, 0, 1, 0). The label would cover the entire frame. Because 1 would be 100% of the frame like how 0.5 would be 50%, 0 would be 0% and ect.
Offset refers to how many pixels to offset your UI element. Using another frame example, say you have a frame sized at UDim2.new(0, 100, 0, 100) a child frame sized with the same size as the parent frame, it would cover the whole thing.
In this case you want to move your UI element left and up to center it because right now only the top corner is in the center. So you move it up by yOffset/2 and to the left by xOffset/2.
So if you had a frame sized at UDim2.new(0, 150, 0, 150) to center it you’d position it at UDim2.new(0.5, -75, 0.5, -75).
Just as a little tip, you should use scale instead of offset.
But, I recommend making seperate UI, one for desktop, and one for mobile devices.
Mobile devices have controls that are on screen that can block certain elements or make it harder to tap on smaller elements.
Scale will help size down on desktop screens for laptops and desktops while it would do the same for mobile screens.
Kinda confusing but I think you might get it?
The anchor point is used to determine how the position and size variables affect the object. If you position the anchor point for example x = 0.5, then when you size the object on the x-axis the object will scale in both directions rather then to the right like it does when the anchor point is at 0.
See the above posts on when to use scale and offset.
Tip: If you want to position a object so it’s always in the center of the screen, set anchor point 0.5,0.5 and position in the scale values to 0.5,0.5 (have y offset to -18 if you want it to be perfectly centered and account for the Roblox top bar which is 36 pixels tall)
How would I acomplish creating seperate UIs? (Please note: I do not UI design)
Hey! AnchorPoint does not work like that. If you want to make an UI fit for all screens use scale instead of offset and use an UIAspectRatioConstraint to make it look the same on all screens.
If you’d like to, I recommend my plugin to make all UIs fit every screen. To use it, install it (obviously) and then in studio select all the UI Objects and click the plugin button.
Thats only if you purchased a UI package from somebody or made your own.
Simply just delete parts that would be separate, and export.
Keep doing that till all your elements are separated.
I do not like to use free plugins or models, but for now, I will be using your plugin! Thank you!
To be honest, I believe such plugins are okay to use, but you do you. Also no problem