Draw line to connect 2 UI points (2D)

Help and Feedback Scripting Support
#1

Hey developers!
I am trying to draw a line between 2 UI points.

Here is the current code, I have left a comment where the line drawing should go.

In this case, Line1 should be connecting Shirt1 and Shirt2 - and Line2 should be connecting Pants1 and Pants2.

local Line1 = Instance.new("Frame", script.Parent)
local Line2 = Instance.new("Frame", script.Parent)

game:GetService("RunService").RenderStepped:Connect(function()	
	local ClosestRig = nil

	local Character = game.Players.LocalPlayer.Character or game.Players.LocalPlayer.CharacterAdded:Wait()

	for _, Folder in pairs(game.Workspace.Areas:GetChildren()) do
		for _, Rig in pairs(Folder:GetChildren()) do
			if Rig:FindFirstChild("HumanoidRootPart") then
				if not ClosestRig or (Rig.HumanoidRootPart.Position-Character.HumanoidRootPart.Position).magnitude < (ClosestRig.HumanoidRootPart.Position-Character.HumanoidRootPart.Position).magnitude then
					ClosestRig = Rig
				end
			end
			wait()
		end
	end
	
	local Pants1 = script.Parent.Pants1
	local Pants2 = script.Parent.Pants2
	local Shirt1 = script.Parent.Shirt1
	local Shirt2 = script.Parent.Shirt2

	if ClosestRig and (ClosestRig.HumanoidRootPart.Position-Character.HumanoidRootPart.Position).magnitude < 10 then
		Pants1.Visible = true
		Pants2.Visible = true
		Shirt1.Visible = true
		Shirt2.Visible = true
		local D3ToD2 = workspace.CurrentCamera:WorldToScreenPoint(ClosestRig.PantsAnchor.Position)
		Pants1.Position = UDim2.new(0, D3ToD2.X-(Pants1.Size.X.Offset/2), 0, D3ToD2.Y-(Pants1.Size.Y.Offset/2))
		D3ToD2 = workspace.CurrentCamera:WorldToScreenPoint(ClosestRig.ShirtAnchor.Position)
		Shirt1.Position = UDim2.new(0, D3ToD2.X-(Shirt1.Size.X.Offset/2), 0, D3ToD2.Y-(Shirt1.Size.Y.Offset/2))

------------------------------------------------
----------- LINE DRAWING HERE
------------------------------------------------
	else
		Pants1.Visible = false
		Pants2.Visible = false
		Shirt1.Visible = false
		Shirt2.Visible = false
	end
end)

I honestly have no idea how to go about creating this, does anyone have ideas/suggestions to try?
Thanks!

2 Likes
#2

Maybe you can try lerping? I can’t read through the code atm so please try it

1 Like
#3

There’s no dedicated way to draw a line in a GUI. The closest way to it (which everyone uses) is to make a Frame that’s thin and as long as the distance between the points you want to connect, and rotate it.

To get the distance between two points, use e.g. Vector2.magnitude (or Vector3.magnitude, if both points have a dimension with the same value), or use the Pythagorean theorem to calculate it.

To get the rotation or angle, you will have to use math.atan2(vertical distance, horizontal distance) to get the angle in radians, then use math.deg to turn the radians into degrees.
atan2 means arctangent 2. There is a function math.atan that takes one value, which is supposed to be vertical distance divided by horizontal distance, but atan2 will gracefully deal with one of these distances being 0 (which would otherwise be a division by 0)

After you have the length and angle, you position the frame and give it the rotation.
Rotation will rotate the frame about its center, so you have to position the frame between the two points ((point1 + point2) / 2, i.e. average the positions) and set the AnchorPoint to (0.5, 0.5)

7 Likes