As we know, UICorners only create rounded corners, but as demonstrated by this illustration, corners come in many shapes and sizes.
The conundrum I face, is creating a component in Roblox, which has bevelled corners, and when resizes, the length and depth of these corners stay the same (exactly how the UICorner instance works!).
Having some sort of prop to adjust the depth of the bevel (which means a longer bevel since it’s taking up more of the space in the middle) would be nice, but it’s a non-criterion. Not neccesary.
We’ve tried the following to no avail:
- Creating said component in Figma, we were close, and I believe it’s possible due to this tutorial, but it’s lackluster, so no cigar. Would accept a response which details how to create such a component in Figma, although Roblox is preferrable.
- Using 9-Slice, unfortunately, this didn’t have the same behaviour as UI corners. As the aspect ratio changed, the bevel depth got larger and smaller, the closer the shape was to 1:1, the larger the bevel depth was. We still believe 9-Slice to be a possiblity, but are unsure of how.
This is our base asset:
The stroke is dealt with separately. One approach we tried was using 9-Slice for the fill, and then using math based on the resolution of the asset to create the border.
Many others before me have raised this issue, that being that UICorners are very lackluster. We should be able to interact with alot more Enums for the corner. Making a chamfer in most design programs is very easy, but even in said design programs, making an asset which is practical for game development (resizable) is difficult, and borderline impossible in Roblox, but for a company with the resources like Roblox, and the expertise of their team, expanding the capabilites of the UICorner instance do not pose as much challenge.
Post is intended primarily to ask for help, but also open to discussion on the UICorner instance’s potential as a whole.