Main:
As a Roblox developer, it is currently a huge chore for me to round borders in photoshop and have to export it and import it to Roblox then put the assets into the game. What if I need a whole other frame with a different radius? I have to do that whole entire process all over again just to get that out of the way. Then this leaves me less time to work on more important aspects of my game.
What we need:
Speaking on behalf of myself and the rest of the UI designing community, we’d love to see a corner roundness property added to studio!! This would make life so much easier on us and there’d be more time to develop our UI and other more essential aspects of our games!! There’d also be less assets to load in-game! This would make it easier on slower/older computers that may have to process all of those assets, as well as just eliminating any lag that may come from those assets at all! This property would be added onto frames, buttons, etc!
To anyone that say there’s alternative options to having rounded corners:
Yeah I know you can use 9-slice but why use that when you can have a corner roundness feature right in the palm of your hands with easy use and no extra hassle!!!
Seems like a bloat IMO.
If this gets added, Roblox might as well add a bunch of other small features like this too (e.g. flat corners instead of curve, drop shadows, glows, in-built basic shapes like triangles).
9-slicing is quite easy once you get the hang of it. I’ll quickly explain it since I don’t think you understand it from looking at your tweets.
how 2 slice 9
Alright so the purpose of 9-slicing is to cut up an image into 9 parts - 4 corners, 4 edges and the center.
The corners stay the same size no matter what, and the edges scale only in one direction (based on whether they are vertical or horizontal).
The center is the main body of the image and will resize in every way.
With this in mind, you can design an image. If you want 10px corners, you make your corners 10x10 in size. The 10x10 bit in the center will resize indefinitely, and the 10x10 edges will stay 10px on side and scale on the other (for example, the middle left square will scale up and down, but won’t widen or thin).
Now that you just need to know the coordinates of 2 opposite corners of the center square (which is what you put in the SliceCenter property) - the 9 segments can be extrapolated from that.
For example, 10, 10, 20, 20 would be the coordinates to properly slice the above image. 10 units right, 10 units down, 20 units right, 20 units down.
This is possible, but it requires making an image in something like Paint.Net, saving it, uploading the image to Roblox (the type of which is extremely vulnerable to false deletions), and importing to Studio and setting the 9Slice property. It’s much more efficient to have a single property. Also, I don’t think this one property would be a bloat–at least, no more of a bloat than the other properties.
As for the actual implementation of the border radius properties (each corner), it should really be an UDim instead of just a pixel value - things like ScrollingFrames and 9slices have the issue that you can’t scale it well - if I want to adjust the border radius value using 9slice, I need to reupload a new decal - which is bloat of my inventory.
Having these effects like UI add-ons, such as layouts & constraints are, would be nice - seems to be the way Roblox is going for their UI updates.
Let’s hope so. A property like corner radius would be so useful and I’m surprised they haven’t done it sooner with all the new UI styles people are using in their games now!
Thanks for your suggestion, actually we have tried implementing this with pixel shaders and add a round corners at GuiObjects for you. This does not work well in the sense that it performs poorly on low-end devices like iPad3, and the result does not quite address all the use cases that you guys are expecting.
We are currently deferring on this, and hopefully the devices distribution shifts through the time that we are confident about shipping this without bring too much performance issues on low-end devices. Or we find out better solutions that does not involve too much GPU stress on those devices.
Feel free to dm me if you have other opinions, thanks~
Is there any plan to clip descendants of a ui element with a UICorner property? CSS does this and it’s quite helpful, and allows for alot of UI customization.
Don’t get me wrong, this works great for having images with corners and simplifying development, but I would still love for there to be some way to do what I showed above (with the image that zooms, along with the ability to make those fancy google buttons)
