Rotated UI elements don't work with ScrollingFrames

I’m using a ScrollingFrame to create a grid in Roblox Studio, to create a skill tree-esque menu. I want to connect each item in the skill tree to its requirements, and as such I looked for a function on the devforums that would allow me to do such a thing. The problem here is how ScrollingFrames interact with rotated UI elements–in that, rather than making the rotated UI element invisible as it goes out of bounds like every other UI element, it makes the entire UI element invisible after half of it goes outside the ScrollingFrame. Is there a way to connect two points without rotating a Frame?

This is the script that I used to draw a line from one point to another.

local function createLine(from, to, parent : Instance?)
	local distance = to - from

	local line = Instance.new("Frame")
	line.BorderSizePixel = 0
	line.AnchorPoint = Vector2.new(0.5, 0.5)
	line.BackgroundColor3 = Color3.fromRGB(255, 0, 0)
	line.Rotation = math.atan2(distance.Y, distance.X) * (180 / math.pi)
	line.Position = UDim2.fromOffset((to + from).X / 2, (to + from).Y / 2)
	line.Size = UDim2.fromOffset((distance.X ^ 2 + distance.Y ^ 2) ^ 0.5, 4)
	if parent ~= nil then line.Parent = parent end

	local corners = Instance.new("UICorner")
	corners.Parent = line

	return line
end

An example of the lines going off the grid:

1 Like

CanvasGroup is the class you are looking for and that’s the primary reason why it exists now. Place the ScrollingFrame under CanvasGroup and set any frame’s rotation to any number.

Have a good day!

I searched around and found out that it was the ClipDescendants property that made ScrollingFrames render objects outside of its bounds invisible, a property that, in the Roblox documentation, says ignores UI objects with rotation.

The reason why CanvasGroup acts as it does (rendering UI elements outside of it invisible) is because it has this property permanently set to true.

Thus, the only solution I can think of is either hardcoding from point to point or changing the way the lines are created such that it no longer rotates the created Frame.

Thanks, though.

In the past, there were a lot of feature requests that demanded the ClipsDescendants property to respect the rotated UIs. However, the Roblox staff had stated that it was a hard fix to implement, therefore they added this class.

You should have read the documentation improperly. I made a quick showcase so that you can see the difference. Both ClipsDescendants properties are set to true.

1 Like

I have found the reason for why the CanvasGroup didn’t work for me - for some reason, setting a ScreenGui’s ZIndexBehavior to ‘Global’ makes the CanvasGroup not work properly.
Thank you for helping.

1 Like

Glad I helped you out. Here’s the reason why it doesn’t work with Global.

Have a great day!

1 Like