Calculating a UI corner in scale based off of the UI's parent

Help and Feedback Scripting Support
#1

I am trying to use a UI corner in scale so it remains relative across devices. But the problem is inside my UI I have another UI as a header which needs the same corner rounding as its parent so it fits well.

Example:

Parent UI Scale: Udim.new(0.1, 0)

Child UI Scale: Udim.new(?, 0)

How do I do this so the Child UI’s corner scale is the exact same corner radius

2 Likes
#2

Maybe divide by the ratio of the sizes of the two elements

#3

Could you elaborate on this idea? I have tried things similar

#4

TLDR:

Multiply the size of the shortest axis of the parent frame by the scale corner radius of the UICorner, and then take that result and divide it by the length of the shortest axis of the child frame.

In depth view

Let’s calculate the exact size (in pixels) the UICorner takes up.

Using absolute size on the parent frame, you can do that.

Since Scale is relative to the size of the parent, you can take the length of the shorter axis of the AbsoluteSize of the parent frame and multiply it by the scale of the UICorner.

Example:

[[Frame AbsoluteSize]]: (452, 65 <--[[Shorter side]])
[[UICorner CornerRadius]]: (0.25 <--[[Scale]], 0)

[[Size Of Corner In Pixels]] = 65 * 0.25

From there, you have the size of the corner radius in pixels!

Now you just need to change it back for all of the child frames.

To do that, take your newly found product (16.25), and divide it by the shortest axis of the child absolute size.

From my tests, that seems to work. Tell me how that does!