How can i properly position UI

[I_Claire]

Hello, can anyone give me an in-depth explanation of how I can properly position my UI to fit every platform or are there any ways to automatically position the UI to fit their device screen?

[H_mzah]

See https://devforum.roblox.com/t/keeping-the-aspect-ratio-of-your-guis/17171

[3rdhoan123 (Future Noob)]

Try using scale instead of offset as it would scale on multiple screen devices.

[kipp4h]

This is also a very useful plugin to help with UI scaling:

[Plugin] AutoScale Lite for GUIs - Scale your UI

[AutoScale Lite Banenr] Overview The plugin has two main functions. Converting a UI element’s size/position to Scale or Offset, and the auto scaling feature. The Add Constraint feature makes use of the UIAspectRatioConstraint which ensures that your UI retains it’s size on all screen sizes. You can add this constraint to your UI manually but my plugin does the calculating of the AspectRatio property by dividing the AbsoluteSizes so you don’t have to! [image] How do I use it hmmmmm? Firs…

[Alexander_Ashford (Alex)]

Alrighty this explanation should hopefully cover everything you need to know.

If you are a complete beginner I am going to recommend some helpful plugins first which I will talk about later:

AutoScale Lite - Roblox

Zawie's GUI Positioning Tools - Roblox

Steps to perfectly positioning your GUI:

1. Make your GUI in scale or offset, in this tutorial it actually doesn’t matter and I will get into why later. Basically if you don’t know what scale or offset are, there are two sizes for GUIs
   
   The first numbers in each bracket (in this case 0 for both) are the scale size. They change size based on your screen size so if you had 0.1 it would be 10% of your screen no matter what platform. The second number (in this case 100 for both) is the offset number and it makes GUIs at a set size.

2. The reason it does not matter is because of the AutoScale GUI plugin I linked above. When you have finished making your GUI then select it and click
   
   in the plugin menu. This will scale your GUI and make all the sizes at a percentage of your screen.

3. After you have done this add a UIAspectRatioConstraint to the background and to the buttons of the GUI. You also need to make sure your AspectType is ScaleWithParentSize. (UI AspectRatio constraints can make things into squares so mess with the AspectRatio property to get it to the correct sizing.)

4. Then you should make sure all text is wrapped and scaled so it stays within the text box and is resized for different screens.

5. Lastly you can position it using the GUI positioning tools. There is a way you can manually do this but the plugin does the trick well.

The result should be a smooth GUI that resizes for screens and is positioned properly. Hopefully you find this tutorial helpful!

[Inspirre (kyo)]

Change offset to 0 on both x and y (manual way)