What is UICorner?
UICorner is a UIComponent that will apply deformation to shapes of corners of its parent GuiObject.
Input will be clipped to the round corner area, while we don’t clip descendants to the round corner area.
How do I use it?
To enable the beta feature:
- Go to File - Beta Features in studio
- Check the box before UICorner Beta
- Restart studio
To use the new UICorner UIComponent:
- Create a Frame / ImageLabel / ImageButton / TextLabel / TextButton / ViewportFrame
- Insert a UICorner component as its children
- Change the round corner radius by changing the property CornerRadius
FAQ
Which one should I use, UICorner or 9-slices?
Making background for buttons can be done through 9 slices alternatively. It would be helpful to understand the pros and cons of UICorner and 9-slices.
UICorner:
Pros
- Could apply to a viewport frame / image asset
- Scriptable corner radius which can be dynamic.
Cons
- Has a performance overhead (Screen Space specifically) as it needs extra processing on each pixel, while 9 slice just involve simple sampling.
9-slices:
Pros
- Suitable for highly decorative borders that are not just rounded.
- If you have a lot of rounded rectangle with solid color and you pay special attention to low-end devices, using 9-slice would be more perf-efficient.
Cons
- Hard to apply to existing image assets.
- For different corner sizes, it requires different assets.
Can I configure different corner radius values for each corner?
Round corner is implemented at shader level, it adds extra calculation for all the rounded Guis that renders onto your screen. So before we can do extra implementation like borders and different corner radius, we have to run the basic version for a while to verify the impact of it on performance.
Is there anything else I should know about?
We no longer apply Gui effects such as RoundCorner and Gradient to scrolling frames. This is due to that fact that we realize some pitfalls in our legacy design of scrolling frame, and may do some improvements in the near future. Before we finalizing the new structure of scrolling frames, we temporarily disable all the Gui effects in case it has unexpected behavioral changes afterwards.
If you want a rounded scrolling frame, you should apply the round corner to a parent frame and then insert a scrolling frame as children and turn off the background of scrolling frame.
We temporarily don’t support rounded borders. Similar to above, the legacy design of GuiObject’s borders left no space for separation of border/background transparency, while we want to gradually de-couple them so that you can have border-only coloring. Besides, rendering rounded borders also has performance implications so we want to be more careful with it.
Advanced topic
How does the internal corner radius calculated using the existing UDim value?
In order to keep the circular shape of round corners with the UDim CornerRadius value (which means we guarantee that radius at x axis always the same as the radius of y axis), the round corner radius internally will be calculated as follows:
radius = min(min(rectWidth, rectHeight) / 2, CornerRadius.scale * min(rectWidth, rectHeight) + CornerRadius.offset)
This means:
1). the scale will always apply to the minimum edge.
2). your rounded rectangle will always in a pill shape if you set CornerRadius to a value that would leads to a calculated result greater than half of your rectangles minimum edge.
We suggest that you always use either scale or offset to define CornerRadius instead of mixing them up.
Why does not it clip text/children to roundcorner area?
Currently the round corner is done without render-to-target support, which means we still render all Guis into one huge buffer at a time.
Pending Fixes
Community feedbacks are well respected and we will track them here in this post so that you can see updates for issues you reported.
Blurry edges when UICorner is applied.
?
