Automatic Aspect Ratio Plugin [UI designing]

Resources Community Resources
, , , ,
#1

Introduction:

  • Hey there! I’ve been working as a UI designer for a while now, and let me tell you, adjusting anchor points for each UI element can be quite a pain. I’m not a fan of the plugins either, where you have to select all the UIs and then press the plugin button. But guess what? After doing some intense research, I stumbled upon a plugin that does all this work automatically for all the UIs under the focused screenGUI. It’s a total game-changer, saving me loads of time and effort.

Resources:

Auto UI helper | Plugin

Tutorial on how to use it:

To get started, let’s create a screenGUI. But before we proceed any further, we need to enable a plugin. Don’t worry, I’ve got you covered! Just follow these simple steps and we’ll be up and running in no time:

  1. Let’s get started by creating a cool screenGUI. You can name it anything you want, but for now let’s call it “Test Screen”. Sound good? Let’s dive in!
    NOTE: “the plugin does not work if there are two screenGUI with the same name. so I suggest you to have different names for the ScreenGUI itself”
    1
  2. NOW! we enable the plugin.
    2
  3. Now You will get this screen in front of you
    3
    31231×837 60.1 KB

    time to explain this:
    We have two things to consider. First, we have the name of the Screen GUI. Second, we need to decide how long the plugin should take to check the Screen GUI. Enabling this option is a good idea if your device is laggy. However, I suggest leaving it blank as it adjusts the UI instantly.
  4. Let’s select our ScreenGUI now
    4
  5. next we will have a pop up that the plugin is now enabled.
  6. Let’s add a frame to test the plugin if it works.
    5
    5258×507 22.8 KB
  7. Now you should get your screen like this
    as when you add your frame, it will be spawned right on the needed anchor point, no worries if you find it like this, just drag it to the middle and work on it as usual.
    6
    61236×843 48.2 KB
  8. Lastly if we check the anchor point of any just added item under the focused screenGUI would have them set to (0.5, 0.5)
    7

Conclusion

  • I wanted to share my experience with a plugin that I recently used to create UIs. I must say, it made my life so much easier! However, I did encounter a small issue with Texts getting broken (Only when you have a selected text size, e.g: 12). But don’t worry, I found a solution - just add a UIAspectRatioConstraint and your Texts will be good to go!

Thanks for taking the time to read through my tutorial. I’m not sure if many people will find it helpful, but I hope it can assist at least a few of you. Keep an eye out for my next tutorial!

2 Likes
#2

Wrong topic, this post should be on #resources:community-tutorials.

1 Like
#3

oh alright thank you for the help, I really didn’t know, as this is my first topic on the devforum

1 Like
#5

it’s actually supposed to be in #resources:community-resources

I recommend asking the user to select a ScreenGui instead of typing the name so you don’t get issues with the naming

1 Like
#6

First idk whether it should be in resources or tutorials, either ways its good
Second thing is that the plugin is not mine but there is a way to select the screengui instead of typing it’s name, you just click m1 on the name text box, so u actually don’t have to write the name of it

1 Like
#7

Oh also It may be a good idea, I’ll get the idea to the plugin designer, might he take it into consideration

1 Like
#8

Since I’m using a 34 inch 21:9 screen to develop games on, will this work for UI to be correct on 16:9 screens and more?

#9

If implemented well yes, as this is actually the way to make uis look better on all different screen sizes

#10

image
image1219×408 48 KB

well… idk if im doing smth wrong orrrr…

#11

That’s why I said before making any further uis you need to enable it then create your uis as usual, if you enable it and you had a created uis, the plugin will adjust them to fit óther screens, but you will need to adjust them again as they were before you use the plugin

1 Like
#12

That’s becuase you changed AnchorPoint after making the GUI. Just move them and everything’s fine

1 Like