2D 경로

Path2D 인스턴스는 API 메서드 및 속성과 함께 2D 스플라인과 2D 곡선을 구현할 수 있도록 해줍니다. 이는 경로 기반 애니메이션 및 그래프 편집기와 같은 UI 효과에 유용합니다.

2D 경로 만들기

Path2D를 화면이나 경험 내 객체에 추가하려면:

1. 탐색기 창에서, 보이는 ScreenGui 또는 SurfaceGui 아래에 Path2D 인스턴스를 삽입합니다(직접적인 자식일 필요는 없습니다).

   

2. 새로 추가된 Path2D를 선택하여 뷰포트 내 도구 위젯을 표시합니다. 기본적으로 포인트 추가 도구가 선택되어 있습니다.

   

3. 화면을 클릭하기 시작하여 경로를 형성할 제어 포인트 시리즈를 추가합니다. 초기 경로는 어렴풋할 수 있지만 나중에 미세 조정할 수 있습니다.

   

   클릭 후 마우스를 드래그하면 해당 포인트에서 탄젠트가 생성됩니다. 또한, 모든 제어 포인트에 대해 프로시저적으로 추가할 수 있습니다.

4. 완료되면 위젯의 완료 버튼을 클릭하거나 Enter를 누릅니다.

제어 포인트 수정하기

탐색기(Explorer) 계층에서 Path2D를 선택하면 그 개별 제어 포인트와 탄젠트를 수정할 수 있습니다.

포인트 이동하기

경로에서 개별 제어 포인트를 이동하려면 선택 도구(V)를 활성화한 다음 클릭하여 끌어 새 위치로 이동합니다.

매우 구체적인 위치를 설정하려면 제어 포인트를 선택한 후, 속성 창에서 포인트의 SelectedControlPointData 속성(UDim2)에 대한 새로운 위치를 설정합니다.

포인트의 위치는 절대적이지 않으며, 경로의 부모 컨테이너에 상대적입니다. 예를 들어, ScreenGui 내부에 있는 경로에서 왼쪽에서 30%, 위에서 20% 떨어진 제어 포인트와, ScreenGui의 오른쪽 상단에 위치한 Frame 내부에 놓인 동일한 경로의 제어 포인트를 비교해 보세요.

포인트 추가하기

기존 두 포인트 사이 또는 각 끝점에서 포인트 추가 도구(P)를 사용하여 새로운 제어 포인트를 추가할 수 있습니다.

포인트 삭제하기

제어 포인트를 삭제하려면 그것에 마우스를 올리고 마우스 오른쪽 버튼으로 클릭한 다음 컨텍스트 팝업 메뉴에서 포인트 삭제를 선택합니다.

제어 포인트 탄젠트

제어 포인트 탄젠트는 경로에서 곡선을 만들고 조정할 수 있게 해줍니다.

탄젠트 추가하기

이미 탄젠트가 없는 모든 제어 포인트에 탄젠트를 추가하려면:

1. 도구 위젯에서 탄젠트 추가 도구를 활성화합니다.

   

2. 원하는 제어 포인트에 마우스를 올리고 클릭하여 두 개의 대칭 탄젠트를 추가합니다(선택적으로 클릭 후 드래그하여 새로운 탄젠트를 조정할 수 있습니다).

   

탄젠트 조정하기

개별 제어 포인트의 기존 탄젠트를 조정하려면:

1. 선택 도구(V)를 활성화합니다.

   

2. 탄젠트 마커(제어 포인트는 아님)에 마우스를 올리고 클릭하여 드래그하여 새 위치로 이동합니다. 탄젠트가 대칭이면 쌍의 탄젠트 포인트도 함께 이동합니다.

   

특정 UDim2 위치를 수동으로 설정하려면:

1. 선택 도구(V)를 활성화하고 제어 포인트를 선택합니다. 속성 창에서 SelectedControlPointData 필드를 확장하여 LeftTangent 및 RightTangent 속성을 표시합니다.

   

2. LeftTangent 및/또는 RightTangent를 설정합니다. 이는 탄젠트의 대칭 동작을 끊습니다.

탄젠트 삭제하기

제어 포인트의 두 탄젠트를 모두 삭제하려면 마우스를 올리고 오른쪽 클릭한 후 컨텍스트 팝업 메뉴에서 탄젠트 지우기를 선택합니다.

왼쪽 또는 오른쪽 중 하나의 탄젠트만 삭제하려면 해당 탄젠트의 마커에 마우스를 올리고 오른쪽 클릭한 다음 탄젠트 삭제를 선택합니다.

끊기 및 미러링

기본적으로 탄젠트는 서로를 미러링합니다. 하나의 탄젠트 마커를 드래그하여 조정하면 쌍의 탄젠트 포인트도 함께 이동합니다.

위치 이동 없이 각 탄젠트를 독립적으로 이동할 수 있도록 하려면 관련 제어 포인트에 마우스를 올리고 오른쪽 클릭한 후 컨텍스트 메뉴에서 탄젠트 끊기를 선택합니다. 끊어진 후에는 각 탄젠트 마커를 이동해도 서로에게 영향을 주지 않습니다.

경로 시각적 속성

다음 속성을 사용하여 Path2D의 시각적 모양을 사용자 정의할 수 있습니다:

경로 스크립팅

스크립팅은 여러 경로 관련 워크플로에 유용합니다. 다음 예시는 GetControlPoints() 메서드를 사용하여 Path2DControlPoints의 테이블을 반환하고, GetPositionOnCurveArcLength() 메서드를 사용하여 주어진 t 값에 대한 UDim2 위치를 반환합니다.

경로를 가로지르는 UI 개체 정렬하기
local parent = script.Parent
local path = parent:FindFirstChildWhichIsA("Path2D")

local function arrangeChildren()
	local segmentCount = #path:GetControlPoints()
	local objectsToArrange = {}

	for _, child in parent:GetChildren() do
		if child:IsA("GuiObject") then
			table.insert(objectsToArrange, child)
		end
	end

	for idx, child in objectsToArrange do
		local t = idx / (#objectsToArrange + 1)
		child.Position = path:GetPositionOnCurveArcLength(t)
	end
end

-- 경로를 가로지르는 자식 UI 개체를 처음 정렬합니다.
arrangeChildren()

-- 자식이 추가/제거될 때 정렬을 조정하기 위해 듣습니다.
parent.ChildAdded:Connect(arrangeChildren)
parent.ChildRemoved:Connect(arrangeChildren)

경로를 따라 UI 개체 애니메이션
local Tweenservice = game:GetService("TweenService")

local parent = script.Parent
local path = parent:FindFirstChildWhichIsA("Path2D")
local objectToAnimate = parent:FindFirstChildWhichIsA("GuiObject")

local TWEEN_DURATION = 4
local TWEEN_EASING_STYLE = Enum.EasingStyle.Cubic
local TWEEN_EASING_DIRECTION = Enum.EasingDirection.InOut

local pathSampleValue = Instance.new("NumberValue")
local tweenInfo = TweenInfo.new(TWEEN_DURATION, TWEEN_EASING_STYLE, TWEEN_EASING_DIRECTION, 0, true, 2)
local tween = Tweenservice:Create(pathSampleValue, tweenInfo, {Value = 1})

local function onSampleValueChanged()
	objectToAnimate.Position = path:GetPositionOnCurveArcLength(pathSampleValue.Value)
end
pathSampleValue.Changed:Connect(onSampleValueChanged)

tween:Play()