How To Make Circular GUI Objects on Roblox

Hello. I am Sky, a user interface designer. A lot of people on Roblox want to be able to have triangular GUI objects and circular GUI objects on Roblox. Unfortunately, you cannot make triangular objects on Roblox, but what if I told you that you can make circular GUI objects on Roblox? Well, you actually can.

To do this, you’ll be needing a Roblox plugin called Roundify , made by @Stelrex . This plugin basically rounds the corners of your GUI. Though with this plugin, I just have figured out how to make circular GUI objects with this plugin.

Before you start these steps, have Roundify downloaded.

Step 1:

Open up Roblox Studio. Then, simply open up a place of yours. I just opened up a place I have.

Step 2:

Next, go to StarterGui and click on that plus sign right next to it, or you can right click on StarterGui and click on “Insert Object”. After that, insert a ScreenGui into StarterGui. It should be like this:
image
You can name the ScreenGui anything you want. I named it CircleGuiTest.

Step 3:

Insert another object into your ScreenGui. I’ll be inserting a frame. Once you’ve inserted a GUI object into your ScreenGui, look at your main screen.
image
I have a frame at the corner of my screen.

Step 4:

Now comes the part where you use roundify. Go to your plugins and you should see Roundify there. If you don’t go to Toolbox, and click on this:
image
Then, you should click on My Models and you will see this:
image
Click on “My Plugins”. Then, click on the plugin Roundify. It should be installed. If not, install it. Then, go to your plugins tab (not in toolbox), and click on Roundify. You’ll see this:
image
Click on the GUI object you are roundifying whether it is a frame or whatever GUI object you want. When you click Roundify, your GUI object should have rounded corners like this:
image

Step 5:

Now come the final part. You must make this into a circle. Go to your properties section and type in ScaleType. Remember to have your GUI object clicked on, so you can change the properties of your GUI object. Now, if you look at your ScaleType property, this is what you will see:
image
Change “Slice” to “Crop”.

Result:
image
A perfect circle.

This will work even if you put the ScaleType to anything else. As long as it is not “Slice”, your GUI object should turn into a circle.

Now if you do this with a TextButton for example, the result is a little more interesting. My ScaleType property for my TextButton is “Crop” and here is the result of it:
image
Anything but “Crop” or “Slice” will work for the TextButton. This applies to a TextLabel as well.

If you are having trouble with using the plugin Roundify, I suggest you check out @Stelrex’s post about the Roundify plugin. You can view that post here.

In Roblox you can make circular GUI objects with this plugin. Other external softwares such as Adobe XD allow you to make triangular and circular GUI objects. If you’d like to stick with Roblox when making GUIs, then here’s the tutorial on how to make circular GUI objects on Roblox.

Thanks for reading and have a great day! :smile:

7 Likes

I’m also making a video tutorial on this soon, so stay tune! :slight_smile:

I don’t understand why it has to be so complicated, can you not just upload an image of a circle and be done with it?

1 Like

Why make your own tutorial for this? The plugin you used (Roundify) already has instructions in its main post. As they aren’t indepth, its understandable, but its unnecessary to make a new thread instead of just replying on that one with the instructions.

You know, this isn’t really complicated. Sure, it may look like a lot of steps, but it isn’t really hard to do and it isn’t time consuming. So, there isn’t even a point of taking a picture of a circle.

That way you won’t have any ability to easily customize your UI. Scaling the image or changing the colour might sometimes lead into a mess. Additionally, if it’s an image it might take some time to load or not load at all due to some issues.

@TotallyTrustful This post shows you how to make then on your own, from what I’ve seen the plugin’s post only shows how to use the plugin.

Unfortunately this is not substantial enough for this category. Explaining how to use basic functionality of someone else’s plugin is insufficient.