How can i properly position UI

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?

4 Likes

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

4 Likes

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

2 Likes

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

1 Like

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:

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
    09
    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
    57
    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!

21 Likes

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

2 Likes