Jailbreak-like garage connection points

[Lapheuz (IGWT_inactive)]

Hey DevForum!

How can I create these Jailbreak garage connecting points that connect UI element with a workspace object?

[Artzified]

I believe you need to get the points in the 3d space, into the 2d screen space, then draw a line using a Frame (using Position and Rotation to point it at where the other point is)

Camera | Documentation - Roblox Creator Hub

Converting 3D position into 2D screen position

So first I am aware that these functions exist https://developer.roblox.com/en-us/api-reference/function/Camera/WorldToViewportPoint https://developer.roblox.com/en-us/api-reference/function/Camera/WorldToScreenPoint I am making this as a learning experience local Camera = workspace.CurrentCamera local Frame = script.Parent while true do task.wait(0.1) local ViewportSize = Camera.ViewportSize local AspectRatio = ViewportSize.X/ViewportSize.Y local VerticalFoV = math.rad(Camera.FieldOf…

[YoungKnightSoul]

You can use:

local Camera = workspace.CurrentCamera
local uiPos = Camera:WorldToScreenPoint(position)

That will return the gui position once you get the workspace position

[Lapheuz (IGWT_inactive)]

I still am not able to do it properly. Could you please help me do it? Script the thing?

[animation_br101 (Techdev)]

local Camera = workspace.CurrentCamera
local rawPos = Camera:WorldToScreenPoint(position)
local uiPos = UDim2.new(0, rawPos.X, 0, rawPos.Y)

try that

[Lapheuz (IGWT_inactive)]

I already did this but got stuck at actually connecting two points with a visible ui line

[animation_br101 (Techdev)]

hmmmm

local relativeX = point1.X.Offset - point2.X.Offset
local relativeY = point1.Y.Offset - point2.Y.Offset

local angle = math.deg(math.atan(relativeX/relativeY))
line.Rotation = angle

im not so sure, but this should help finding the angle, the position part shouldnt be that hard

[animation_br101 (Techdev)]

finding the lenght will probably be easy using the pythagorean theorem

[FlikterIsLinked (Flikter)]

Following @Artzified’s idea, this is how it can be done:

-- Change the first 3 variable values to your UI elements
local line = gui.Line -- The line connecting the two points
local origin = gui.Origin -- The starting point of the line
local target = gui.Target -- The point which follows the vehicle on the screen

local camera = workspace.CurrentCamera
local targetWorldPosition = Vector3.zero -- Set the value of this variable to the world position of the vehicle
local targetViewportPosition = camera:WorldToViewportPoint(targetWorldPosition)

target.Position = UDim2.fromOffset(targetViewportPosition.X, targetViewportPosition.Y)

local relativePosition = target.AbsolutePosition - origin.AbsolutePosition
local linePosition = origin.Position:Lerp(target.Position, 0.5)
local lineRotation = math.deg(math.atan2(relativePosition.Y, relativePosition.X))

line.Size = UDim2.fromOffset(relativePosition.Magnitude, 2)
line.Position  = linePosition
line.Rotation = lineRotation

This code can be used with the RenderStepped event so the line is updated every frame.

[Lapheuz (IGWT_inactive)]

Man TYSM sending virtual hugs