Roundify plugin

Resources Community Resources
,
#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
#27

Why not using Roblox’s built-in slice? This only seems to make a mess of image labels all over your UI that will struggle scaling dynamically…

Both of those are using a single ImageLabel for their corners (the right one has a top lip):
https://i.gyazo.com/976f3364bdc400157f0711a3f588078d.mp4

All you need is 30 second, photoshop or gimp. You make a 30x30 rounded square with 10px radius (and clean the alpha mess, look at quenty’s medium post about this). Upload it, set the ScaleType to Slice and set the SliceCenter according to your numbers. That’s it!
image
It’s quick maths → 30px (size) - 10px (radius) = 20

For more visual people

image
image520Ă—512 90.7 KB

22 Likes
#28

As a visual person I give your presentation a 10/10.

13 Likes
#29

If you scrolled up a just a bit, you wouldve seen As8D already told me about them. :stuck_out_tongue:

Currently I’m using Circle Sprites, for 12 px it is 25x25, and I set the Slice Center to 12,12,13,13 and it works like a charm.
The way I made the plugin is so that scaling will not make the rounded corners look odd, and I already used Quenty’s tutorial to fix my corners. :slight_smile:

I don’t understand why you used a 30x30 square when you could’ve used 21x21 diameter circle to get a radius of 10, by setting the SliceCenter to 10,10,11,11.

I guess I didn’t make it clear that I used Slice Center in my plugin, but maybe try my plugin out and let me know what you think of it?

3 Likes
#30

I usually just set my slice centres to the same number (e.g. 10, 10, 10, 10)

4 Likes
#31

Is this a bug or it isn’t intended to be supported? When I try using Roundify on any GuiObject, it always resets the AnchorPoint to 0,0.

2 Likes
#32

Well, more or less it’s an unadded feature. :stuck_out_tongue:

i didn’t think to have it inherent the AnchorPoint, which is why it defaults to 0,0. I’ll code it in to inherent the AnchorPoint hopefully in the next couple days.

Thank you for pointing this out! :slight_smile:

4 Likes
#33

What is the anchor point used for anyways? I never use it.

1 Like
#34

I use it all the time. It allows for a UI object to have its position origin somewhere other than (0,0) or the top left corner of the object. As a small example, use this for TextLabels I want in the direct center of the screen (.5,.5)

4 Likes