UICorner [Live]

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
    Screen Shot 2020-06-12 at 1.15.53 PM
  • Restart studio

To use the new UICorner UIComponent:

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.
743 Likes

Wow! Is this for real! lol! I am pretty sure everyone has wanted this! Thank you Roblox for the fantastic update! Next maybe drop shadows :wink:?

To point out to everyone, this is better then roundify because it can be used with viewport frames (i dont think roundify can change those)

113 Likes

WHOA
Time to curve those GuiElements without having to use Slice

Why is 2020 getting so many good updates all of a sudden? :thinking:

69 Likes

That’s an amazing feature for creating great GUI’s. That’s what we need right now! Thanks, Roblox! :heart:
I just tested this new feature out and made this amazing futuristic looking button in less than 2 minutes.
image
It’s just astonishing!

67 Likes

Oh wow.

A UI Compoment to add rounded corners?

Is this a dream…? :smiley:

Can’t wait though!

31 Likes

This is a great update for UI objects and other things along with UI that will make this change into the community, kind of happy that it got released today! :happy4:

No more using plugins in order to make things roundify or especially other long strategies that will be used to make round UI.

My hats are off to you! :tophat:

21 Likes

I have no idea how that happened but can’t wait to try it.

18 Likes

WHOA! This update has been my favorite so far, finally I can do some cool UI Designing into the ROBLOX Platform without using any external software.

That’s we needed, can’t wait to see this into any game! :smiley:

20 Likes

This is literally awesome! Thank you to the roblox team for implementing this new update!

10 Likes

While this is nice, it is very late. Plugins have allowed users to do this for the past… I don’t know how long… at least 2 years.

This is a great start to getting studio caught up to plugins tho! (Is ROBLOX finally going to step up their game?)

26 Likes

Welp goodbye Roundify… You have been replaced…

Well anyways such a good update! While looking at other posts I can see that it basically mimics Roundify! (the plugin)

33 Likes

I can see this coming in handy for quite alot of us, RIP the roundify plugin lmao.

20 Likes

Great feature! Its not RIP Roundify as the plugin has some few extra things there to help we out like auto ordering and so, but its good to see that the Roblox team is working to give us what has been missing for soo long. Better late than never :wink:

12 Likes

Hmmmmmm I was excited by this and sad at the same time you will be missed Roundify but with the performance impact, it might not be scalable for a game with >50 UI elements that need to be rounded looks like you’re staying Roundify :slight_smile:

Still, nice to know this is available for image assets and viewports. Viewports in particular, I think, was requested a while ago so thank you for putting this in the engine

11 Likes

We can finally create circles.

98 Likes

Really love this new Instance, especially how CornerRadius is scriptable. Might use this and MouseEnter/MouseLeave to create some responsive corner tweening.

12 Likes

WOW! :open_mouth:

The expectations have been exceeded! I never knew that Roblox could handle such hover accuracy!

Not only that, I especially love that we can use scale to set the corner radius. I always didn’t like the 9-slice method because the corners would be more or less rounded on different devices.

#1: I’d be great to have an option to use simple sampling or pixel-based. This is to that if we have small corners, we don’t really need that accuracy, while with large corners, it’d be great to have such accuracy.

#2: I don’t necessarily like the border going away due to the UICorner:

image

I’d be great to make the border wrap around the corner like this:

#3: Please add an option to “wrap” instead of “crop”. For example, a square border looks like this with UICorner in it:


If the corners got distorted in order to form a round shape, then silhouette images like these can benefit a lot. For full images like thumbnails, cropping would work, therefore, there should be an option to switch between the two. IDK if this will be good on the engine, but it’d be great to have.

Honestly, this kind of give me UIGradient vibes when we all thought it was such a new feature and all. I even remember that you posted it @0xabcdef1234! Now it’s like it’s part of our daily lives LOL. :rofl:

Also, I just noticed that your username is a hexadecimal value! I just converted it and it shows:

P.S. I’m curious, why are your threads never locked like other announcement threads? I thought it was consistent…

Nevertheless, keep it up, Roblox! :roblox: :roblox_light:

48 Likes

Wow! This is an update I’ve been waiting a long time for! Keep it up!

But, when can we expect GUI effects to return to Scrolling Frames?

8 Likes

This is amazing! I don’t have to make images and hope to align them properly anymore! Love this!

5 Likes

Squares are a thing of the past. Amazing update! :x::black_square_button:

13 Likes