2D 경로

*이 콘텐츠는 AI(베타)를 사용해 번역되었으며, 오류가 있을 수 있습니다. 이 페이지를 영어로 보려면 여기를 클릭하세요.

Class.Path2D 인스턴스, 그의 API 메서드 및 속성과 함께, 2D 스플라인과 2D 곡선을 구현하는 방법을 제공합니다. 이는 경로 기반 애니메이션 및 그래프 편집기와 같은 사용자 인터페이스 효과에 유용합니다.

2D 경로 생성

화면에 또는 경험 내 개체에 Path2D 를 추가하려면:

  1. In the 탐색기 창에, 보이는 Class.ScreenGui 또는 Class.SurfaceGui (직접 자식이 아님) 아래에 Class.Path2D 인스턴스를 삽입합니다.

    Path2D instance parented to a ScreenGui in the Explorer hierarchy.
  2. 새로운 Path2D를 선택하여 뷰포트 도구 위젯을 표시합니다. 기본적으로 점 추가 도구가 선택됩니다.

    Add Point tool indicated in the 2D path editor widget.
  3. 화면을 클릭하여 시리즈의 제어 포인트 를 추가하여 경로를 만듭니다. 초기 경로는 불확실하지만 나중에 제어 포인트의 위치를 미세 조정할 수 있습니다.

    Diagram illustrating an example path created using the Add Point tool to connect a series of points.
  4. 완료되면 위젯의 완료 버튼을 클릭하거나 입력 을 누르십시오.

컨트롤 포인트 수정

탐색기 계층에서 선택한 Path2D로 개별 컨트롤 포인트를 수정하고 해당 컨트롤 포인트의 tangents도 수정할 수 있습니다.

이동 점

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

Select tool indicated in the 2D path editor widget. Diagram illustrating how a path control point is moved to a new position by clicking and dragging with the Select tool enabled.

매우 특정 위치를 선택하려면 컨트롤 점을 선택한 다음 속성 창에서 새 위치를 설정하고 SelectedControlPointData 속성(UDim2) 속성(2>데이터 유형2>)에 대해 5>데이터 복사5>를 수행합니다.

SelectedControlPointData property of a Path2D instance indicated in the Properties window.

위치가 상대적이며 따라서 경로의 상위 컨테이너에 대해 절대적인 위치가 아닌 경우 컨트롤 위치를 30% 왼쪽에서 20% 위로 비교하여 경로 내의 컨트롤 위치를 비교하십시오. 예를 들어, 경로

Diagram illustrating how the positions of path control points are relative to their parent container.

포인트 추가

새 컨트롤 포인트를 두 개 이상의 기존 포인트 사이에 추가하거나 Path2D 도구를 사용하여 모든 끝점 중 하나에 추가할 수 있습니다.

Add Point tool indicated in the 2D path editor widget.
Diagram illustrating how a control point is added between two existing points using the Add Point tool.
경로 위로 마우스를 이동하고 클릭하여 두 개의 기존 점 사이에 컨트롤 지점을 추가합니다.
Diagram illustrating how a control point is added to the end of a path using the Add Point tool.
종점을 클릭한 다음 다시 클릭하여 종점을 추가합니다.

포인트 삭제

컨트롤 점을 삭제하려면 마우스로 클릭하고 컨텍스트 컨팝업 메뉴에서 점 삭제 를 선택합니다.

Diagram illustrating how a path control point is deleted by right-clicking it and selecting Delete Point.

Control Point 탄젠트

Control point tangents 는 경로에서 곡선을 만들고 조정하는 데 사용됩니다.

Diagram illustrating a curved path with several tangent control points.

탄젠트 추가

이미 쌍을 가진 컨트롤 점에 쌍을 추가하려면:

  1. 도구 위젯에서 탄젠트 추가 도구를 활성화하십시오.

    Add Tangent tool indicated in the 2D path editor widget.
  2. 원하는 컨트롤 점에 마우스를 올리고 클릭하여 2개의 미러된 직선대를 추가합니다(클릭한 후 옵션적으로 드래그하여 새 직선대를 조정).

    Diagram illustrating how a path control point with tangents is created with the Add Tangent tool.

탄젠트 조정

개별 컨트롤 점에 대해 기존 삼각형을 조정하려면:

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

    Select tool indicated in the 2D path editor widget.
  2. 컨트롤 점이 아닌 표선 표시(예: 탱셟 마커)에 마우스를 올리고 클릭하고 드래그하면 새 위치로 이동합니다. 표선이 미러링된 경우 쌍 표선 점이 동기화됩니다.

    Diagram illustrating how the tangents of a control point are adjusted with the Select tool enabled.

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

  1. 선택 도구( V )를 활성화하고 컨트롤 점을 선택합니다. 속성 창에서 2>Class.Path2D.SelectedControlPointData|SelectedControlPointData2> 필드를 확장하여 5>Datatype.Path2DControlPoint

    LeftTangent and RightTangent properties of a Path2D control point indicated in the Properties window.
  2. 위치를 설정하십시오 LeftTangent 및/또는 RightTangent . 이 경우 미러링 동작의 왼쪽 및 오른쪽 모두에 중단 됩니다.

tangents 삭제

제어 점에서 둘 다의 측정값을 삭제하려면 해당 측정값을 마우스로 삭제한 다음 측정값 지우기 를 컨텍스트 팝업 메뉴에서 선택하십시오.

Diagram illustrating how both tangents of a control point are cleared by right-clicking it and selecting Clear Tangents.

왼쪽 또는 오른쪽 측면의 한 가지 삼각형을 삭제하려면 해당 삼각형의 마커를 마우스로 이동한 다음 삼각형 삭제 를 선택합니다.

Diagram illustrating how one tangent of a control point is deleted by right-clicking it and selecting Delete Tangent.

부서짐 및 미러링

기본적으로 쌍 측면 표시기를 드래그하면 쌍 측면 표시기 마다 서로 맞춥니다.

Diagram illustrating how the tangents of a control point are adjusted with the Select tool enabled.

서로 다른 사람들이 서로 다른 사람들을 영향을 주지 않고 서로 다른 사람들을 서로 다른 사람들을 서로 다른 사람들을 서로 다른 사람들을 서로 다른 사람들을 서로 다른 사람들을 서로 다른 사람들을 서로 다른 사람들을 서로 다른 사람들을 서로 다른 사람들을 서로 다른 사람들을 서로 다른 사람들을 서

Diagram illustrating how the tangents of a control point are broken by right-clicking it and selecting Break Tangents.

경로 시각적 속성

다음 속성으로 Path2D의 시각적 모양을 사용자 정의할 수 있습니다.

속성설명
Color3경로 라인의 색을 설정합니다.
Thickness경로 라인의 두께를 픽셀 단위로 설정합니다.
Visible경로를 편집 및 런타임 모두에서 보이거나 보이지 않게 합니다.
ZIndex다른 GUI에 대해 경로를 렌더링하는 순서를 지정합니다.
Diagram illustrating a path with Thickness of 2 and Color3 of (125, 125, 125).
두께 = 2색3 = (125, 125, 125)
Diagram illustrating a path with Thickness of 10 and Color3 of (225, 0, 50).
두께 = 10색3 = (225, 0, 50)
Diagram illustrating a path layered in front of another using the ZIndex property.
ZIndex 레이어

경로 스크립트

스크립트는 여러 경로 관련 워크플로에 유용합니다. 다음 예에서는 GetControlPoints()와 같은 메서드를 사용하여 데이터 형식의 경로

경로에 따라 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()