AnchorPoint & Making UIs Scaled on All Devices

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

1 Like

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.

You can learn more here and here.

1 Like

This is the formula for GUIs that use only offset for sizing., -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, 250, 0, 250), and a child label sized at, 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, 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, 150, 0, 150) to center it you’d position it at, -75, 0.5, -75).

1 Like

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