Greetings!
Am currently looking for help with a project - I’m attempting to create a Ui with [9] individual boxes, the Player is able to select four of these boxes [MouseEnter] and upon selecting, it draws a ‘path’ or ‘line’ from the previous box to the next.
I’ve attempted this and had no success.
My attempts have included simply creating a new Instance from one UDIM2 to the next but has failed.
Any ideas?
To start, it would be helpful for you to set the AnchorPoints of all the boxes to 0.5, 0.5 so that their positions are at the center.
You’ll need to style the “Line” as you please, I didn’t even remove the border. Don’t forget to set the Parent either!
function drawPath(startBtn, endBtn)
local startX, startY = startBtn.Position.X.Offset, startBtn.Position.Y.Offset
local endX, endY = endBtn.Position.X.Offset, endBtn.Position.Y.Offset
local Line = Instance.new("Frame")
Line.AnchorPoint = Vector2.new(0.5, 0.5)
Line.Size = UDim2.new(0, ((endX - startX) ^ 2 + (endY - startY) ^ 2) ^ 0.5, 0, 5) -- Get the size using the distance formula
Line.Position = UDim2.new(0, (startX + endX) / 2, 0, (startY + endY) / 2) -- Get the position using the midpoint formula
Line.Rotation = math.atan2(endY - startY, endX - startX) * (180 / math.pi) -- Get the rotation using atan2, convert radians to degrees
Line.Parent = PARENT_HERE
end
Edit: Added comments for better understanding