This just goes to show how subpar Roblox’s UI system is in terms of built in functionality.
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.
(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)
- original sprite
- 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 )
This is honestly gonna save me a ton of time, thank you.
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!
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.
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!
It’s quick maths → 30px (size) - 10px (radius) = 20
As a visual person I give your presentation a 10/10.
If you scrolled up a just a bit, you wouldve seen As8D already told me about them.
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.
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?
I usually just set my slice centres to the same number (e.g. 10, 10, 10, 10)
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.
Well, more or less it’s an unadded feature.
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!
What is the anchor point used for anyways? I never use it.
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)
Oh, alright.
I might start using that in my UI work, then.
Pretty cool plugin. I will definitely check this out.
Havent used the plugin but it seems you can just put 3 “roundified” elements on top of each other.
Now all we need to take this to the next level is some sweet drop shadow…
Feature request?
but I mean… you could just roundify a frame, then dupe it, and make it somewhat transparent,
and put it below the roundified frame