How would you script UI Beams?

Hey! I’m trying to work on a few UI Tasks similar to Among Us, where you can connect Wires from one End to another.

I know you can create “Beams” from One Part to Another through attachments

as shown in the picture above.

However, I want to replicate this with the use of UI Frames and Buttons so I can have that similar “Electrical Wire” Task in Among Us where you have 4 wires and you have to match them the right way.

How would you guys go on about and code something like this?

For the Among Us Reference, this is what I am thinking of.

It’d require some math that I don’t entirely know but I’m pretty sure you would need to somehow get the distance between the 2 points and then position it in the middle of the two points. I’d don’t know how you would go about calculating the rotation though.

Edit: Found this Drawing a line between two points

You can achieve this with simple Trigonometry and frames. You essentially want to connect 2 positions together with a frame. Frames have a rotation property which you can use to angle. You can easily find how long the frame needs to be by calculating the distance between the two points: a^2 + b^2 = c^2. You could make your own function for this, but Roblox has a built-in function called magnitude to calculate the distance between 2d and 3d points: distance = (Vector2.new(x1,y1) - Vector2.new(x2,y2)).Magnitude You can then set the size of the frame to this.

For the rotation, you’ll need to use some more maths. angle = inverse tangent (opposite / adjacent) which translates to lua pretty easily: rotation = math.ang(math.atan((x2-x1)/(y2-y1)))

2 Likes