2D 경로

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

2D 경로 생성

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

1. 탐색기 창에서 가시적인 Path2D 또는 ScreenGui (직접 자식이 필요하지 않음) 아래에 SurfaceGui 인스턴스를 삽입합니다.

   

2. 새로운 Path2D 를 선택하여 뷰포트 도구 위젯을 표시합니다. 기본적으로 점 추가 도구가 선택됩니다.

   

3. 화면을 클릭하여 경로를 형성하기 위한 일련의 제어 지점 을 추가하기 시작합니다.초기 경로는 불확실할 가능성이 높지만 나중에 모든 컨트롤 지점의 위치를 조정할 수 있습니다.

   

   클릭 후 마우스를 드래그하면 곡선이 해당 지점에 생성됩니다.삼각형도 절차적으로 추가 될 수 있습니다 어떤 컨트롤 지점에.

4. 완료되면 위젯의 완료 버튼을 클릭하거나 Enter.

제어 지점 수정

탐색기 계층에서 를 선택하여 개별 컨트롤 지점과 그들의 곡선 을 수정할 수 있습니다.

포인트 이동

경로에서 개별 컨트롤 지점을 이동하려면 선택 도구(V)를 활성화하고 새 위치로 클릭하고 드래그하십시오.

매우 특정한 위치에서는 컨트롤 지점을 선택한 다음, 속성 창에서 지점의 SelectedControlPointData 새 위치(UDim2)를 설정합니다.

점의 위치가 절대적인 것이 아니라 경로의 부모 컨테이너에 상대적인 것 임을 참고하십시오.예를 들어, 왼쪽에서 30% 및 상단에서 20%의 컨트롤 지점을 비교하여 내부의 경로와 동일한 경로를 상단 오른쪽 모서리의 내에 배치한 것과 비교합니다.

포인트 추가

새로운 제어 지점은 기존 지점 간이나 추가 지점 도구(추가 지점)를 사용하여 두 끝점 중 하나에서 추가될 수 있습니다().

포인트 삭제

컨트롤 지점을 삭제하려면 마우스로 가리키고 오른쪽 클릭하고, 컨텍스트 팝업 메뉴에서 점 삭제 를 선택합니다.

제어 점 곡선

제어 지점 곡선 을 사용하면 경로에서 곡선을 만들고 조정할 수 있습니다.

곡선 추가

아직 삼각형이 없는 모든 컨트롤 지점에 삼각형을 추가하려면:

1. 도구 위젯에서 곡선 추가 도구를 활성화합니다.

   

2. 원하는 제어 지점 위로 마우스를 이동한 다음 클릭하여 두 개의 거울된 곡선을 추가(새 곡선을 조정하기 위해 클릭 후 드래그할 수도 있음)합니다.

   

오차 조정

개별 컨트롤 포인트에 대한 기존 오차를 조정하려면:

1. 선택 도구 를 활성화하십시오().

   

2. 접선 표시기(제어 지점이 아님) 위로 마우스를 이동한 다음 새 위치로 클릭하고 드래그하십시오.곡선이 거울처럼 반영되면 쌍으로 된 곡선 지점이 동시에 이동합니다.

   

곡선에 대해 특정 UDim2 위치를 수동으로 설정하려면:

1. 선택 도구( 선택 )를 활성화하고 컨트롤 지점을 선택하십시오(V).속성 창에서Class.Path2D.SelectedControlPointData|SelectedControlPointData``Datatype.Path2DControlPoint.LeftTangent|LeftTangent 및 RightTangent 속성을 노출합니다.

   

2. 및/또는 위치를 설정합니다. 이렇게 하면 삼각형의 거울 행동이 깨집니다.

곡선 삭제

컨트롤 지점에서 두 가지 곡선을 모두 삭제하려면 해당 지점을 마우스로 가리키고 오른쪽 클릭한 다음 컨텍스트 팝업 메뉴에서 곡선 지우기 를 선택합니다.

오직 한 가지 곡선(왼쪽 또는 오른쪽)을 삭제하려면 해당 곡선의 마커를 마우스로 가리키고 오른쪽 클릭하고 곡선 삭제 를 선택합니다.

부수고 거울 만들기

기본적으로 각진은 서로 미러링됩니다. 한 각진 마커를 조정하기 위해 드래그하면 쌍의 각진 지점이 동시에 이동합니다.

서로 독립적으로 이동할 수 있도록 각각의 접선을 "깨기"하려면 관련 컨트롤 지점을 마우스로 가리키고 오른쪽 클릭하고 컨텍스트 메뉴에서 접선 깨기 를 선택합니다.한 번 부서지면 다른 영향을 주지 않고 각 곡선 표시기를 이동할 수 있습니다.

경로 시각 속성

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

>

>

경로 스크립팅

스크립트는 여러 경로 관련 워크플로에 유용합니다.다음 예제에서는 GetControlPoints() 와 같은 메서드를 사용하여 테이블의 Path2DControlPoints 및 GetPositionOnCurveArcLength() 위치를 반환하고, 스플라인에서 지정된 UDim2 값에서 위치 t 를 반환합니다.

경로를 통해 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 개체 애니메이션 Animate UI Object Along Path
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()