Roundify plugin

Resources Community Resources
,
#6

Just a heads up, there’s a plugin that already exists with a similar name. But good work!

9 Likes
#7

Thanks for the heads up, I was unaware she had created one.

Mine does it differently, so hopefully there shouldn’t be any conflicts between the two.

12 Likes
#9

God bless you.

5 Likes
#10

Haha, You are very welcome!! I’ll be adding more to it in the coming days. :slight_smile:

5 Likes
#11

Thank you!

5 Likes
#12

love the name Roudify xd

6 Likes
User Interfaces | Chapter 1
#13

Haha, thanks. :slight_smile:

4 Likes
#14

I’ve been waiting for this aha!! Perfect <3

5 Likes
#15

Glad you like it!

3 Likes
#16

I thought you were the same guy who made that other Roundify Plugin lol
Anyways, thanks.

4 Likes
#17

Cool, this is great :slight_smile:

5 Likes
#18

Thanks!

2 Likes
#19

Nope, different person, different plugin. :stuck_out_tongue:

2 Likes
#20

Hey there - nice plugin!

However, there are things I’d like to seen changed :slightly_smiling_face:
image
First of all, your used images suffers from black outline pixels, as talked about in Quenty’s article

Provided below are some spritesheets without this issue - feel free to use them.
7 9 11 13 15 17 19 21 23 25

(Edit: right-click the image and save it, instead of copying it to your clipboard - saving the actual file keeps the original data, so you won’t get black transparent pixels that way)

You also seem to generate a bunch of ImageLabels - why not use 9-slicing?
Here’s a tutorial on how that works: How to use SliceCenter (Roblox's 9-Slice GUI Property)
Besides that, it simplifies your plugin a whole lot by using 9-slicing - you only need to upload 1 image for each radius size, and you only need 1 ImageLabel to get it all done, making it easier for you to add to your plugin and for people who use your plugin to adjust the generated ImageLabel later on. Simply set the SliceCenter property to Rect.new(d / 2 - 0.5, d / 2 - 0.5, d / 2 + 0.5, d / 2 + 0.5) for the above uploaded spritesheets and it should work like a charm with 9-slicing (where d is assumed to be the diameter of the circle / width or height of image)

As for suggestions to the plugin:

  • With enough small increments, you can change your current list-selection for the size into a numeric spinner or a slider, making the size selection step feel smoother.
  • Currently the generated ImageLabels are sized outside of the boundary of the GuiObject used when roundifying it - you should definitely try add an option (or make it default behavior) to keep the rounded borders inside of the frame, as roundifying a container element currently makes its size not represent the actual size of the container element. (Although I do see it might be an issue for ImageLabels/Buttons with an image set)
21 Likes
#21

I want to first off say thank you for testing it and giving me some suggestions!

I knew that the corners would sometimes start to distort…Just didn’t know how to fix it, but now you showed me something that should help with that.
I didn’t even think of using 9-Slice, so thank you for showing me that!! :slight_smile:
I’ve thought of a slider…Just didn’t know how to do so, so I did what I knew and saved that for a later update.
And about it going outside the boundary, I like you suggestion of adding an option to keep it inside the frame.

I will definitely work to implement your suggestion and make a better plugin overall.

Few question though, would it work the same way if I used my square box image or would I need to mess with the ZIndex?

Would I have to make seperate images to get larger corners or can I use just this one?

MyImage:
TestRounded2

Thanks again for the feedback!

6 Likes
#22

This just goes to show how subpar Roblox’s UI system is in terms of built in functionality.

7 Likes
#23

You don’t need to upload multiple images for different border radius sizes - however, it seems like the most flexible solution for the long-term run in my opinion.

Using the ImageRectOffset and ImageRectSize properties of an ImageLabel, you can create a spritesheet with different border radius sizes in one single image, and have 9-slicing work with that.

I also want to recommend making your spritesheets as small as possible - you don’t actually need that blocky big shape if all you care about is to get the corners round, right? - meaning that the blue area below can be cut away to make the image load faster for users, and have Roblox handle the stretching.
example_roundedcorners_square
(rough estimate of stretched sides)

As for the circles I provided in my previous post, the sizes aren’t randomly picked either - by using an odd size, I can ensure that the center row and column can be used for stretching, as seen below (pink/light pink is stretched, white are the corners)
23 - original sprite
example_roundedcorners_spritestretched - 9-sliced sprite

You do need to make larger images to have larger border radius sizes - we cannot scale how much a corner is per pixel using 9-slice, as that’s tied to your SliceCenter property (unless you use some UIZoom constraint perhaps? Not sure about going about it that way :thinking:)

8 Likes
#24

This is honestly gonna save me a ton of time, thank you.

3 Likes
#25

I’ve released a HUGE update to Roundify. Be sure to update the Plugin if you own it…And if you don’t, then what are you waiting for?

Also, If you’d vote on the poll, that’d be much appreciated. Thanks!

2 Likes
#26

Can’t wait to try this! I’ve used Jacey’s Roundifier for months, and I wanted to have a plugin that customizes more, and this is the perfect plugin from what I was looking for! Thank you for making this, will definitely use this in upcoming games. :grinning:

2 Likes