Issue with drawing a line connecting 2 frames

Help and Feedback Scripting Support
#1

I’ve been working on a skill tree system and I wanted to make a line appear connecting the skills that branch off of each other, but for some reason this code I’m using doesn’t rotate the line correctly and it also doesn’t make the line the right length either, it will always be longer or shorter than it should be, same with the rotation, the rotation does work if its a straight line though (ex: 90 degrees).

The code im using to draw the line.

local function DrawConnector(Connector,Parent, Skill1, Skill2)
	Connector.Parent = Parent
	local Size = workspace.CurrentCamera.ViewportSize
	local startX, startY = Skill1.Position.X.Scale*Size.X, Skill1.Position.Y.Scale*Size.Y
	local endX, endY = Skill2.Position.X.Scale*Size.X, Skill2.Position.Y.Scale*Size.Y
	local startVector = Vector2.new(startX, startY)
	local endVector = Vector2.new(endX, endY)
	local Distance = (startVector - endVector).Magnitude
	Connector.Size = UDim2.new(Distance, 0, 0, 5)
	Connector.Position = UDim2.new((startX + endX) / 2,0,(startY + endY) / 2,0)
	Connector.Rotation = math.atan2(startY - endY, startX - endX) * 180 / math.pi
end

Image of the rotation and length not being correct.

Untitled1
Untitled11124×548 41.9 KB

#2 
local function DrawConnector(Connector,Parent, Skill1, Skill2)
	Connector.Parent = Parent
	local Size = workspace.CurrentCamera.ViewportSize
	local startX, startY = Skill1.Position.X.Scale*Size.X, Skill1.Position.Y.Scale*Size.Y
	local endX, endY = Skill2.Position.X.Scale*Size.X, Skill2.Position.Y.Scale*Size.Y
	local startVector = Vector2.new(startX, startY)
	local endVector = Vector2.new(endX, endY)
	local Distance = (startVector - endVector).Magnitude
	Skill1.AnchorPoint = Vector2.one * 0.5
	Skill2.AnchorPoint = Vector2.one * 0.5
	Connector.AnchorPoint = Vector2.one * 0.5
	Connector.Size = UDim2.fromOffset(Distance, 5)
	Connector.Position = UDim2.fromOffset((startX + endX) / 2,(startY + endY) / 2)
	Connector.Rotation = math.atan2(startY - endY, startX - endX) * 180 / math.pi
end

Fixing all the frames to AnchorPoint (0.5, 0.5) seems to fix the issue for me. Also, I noticed that there are some mistakes in you code where the number is supposed to be in offset but it’s in scale, so I fixed that aswell. Give it a try and let me know if it works!

image
image503×577 23.4 KB

2 Likes
#3

The two frames I’ve been using are already at AnchorPoint (0.5, 0.5), after changing the size property to local Size = Parent.AbsoluteSize it ended up rotating the line in the right direction I’m pretty sure, but its position is almost entirely off, any ideas where to go from here?

1 Like
#4

You can disregard the last reply, the main issue was that the parents anchorpoint was set to 0.5,0.5 causing it not to position it correctly, after a few more minor tweaks this is the working code if you are interested.

local function DrawConnector(Connector, Parent, Skill1, Skill2)
	Connector.Parent = Parent
	local parentSize = Parent.AbsoluteSize
	local parentCenter = Parent.AbsolutePosition + parentSize / 2
	local startPos = Skill1.AbsolutePosition + Skill1.AbsoluteSize / 2
	local endPos = Skill2.AbsolutePosition + Skill2.AbsoluteSize / 2
	local direction = endPos - startPos
	local distance = direction.Magnitude
	local midPos = (startPos + endPos) / 2
	local relativeMidX = (midPos.X - parentCenter.X) / parentSize.X + 0.5
	local relativeMidY = (midPos.Y - parentCenter.Y) / parentSize.Y + 0.5
	Connector.Size = UDim2.new(0, distance * 2, 0, 5)
	Connector.Position = UDim2.new(relativeMidX, 0, relativeMidY, 0)
	Connector.Rotation = math.deg(math.atan2(direction.Y, direction.X))
end
1 Like