Class.Path2D 인스턴스, 그의 API 메서드 및 속성과 함께, 2D 스플라인과 2D 곡선을 구현하는 방법을 제공합니다. 이는 경로 기반 애니메이션 및 그래프 편집기와 같은 사용자 인터페이스 효과에 유용합니다.
2D 경로 생성
화면에 또는 경험 내 개체에 Path2D 를 추가하려면:
In the 탐색기 창에, 보이는 Class.ScreenGui 또는 Class.SurfaceGui (직접 자식이 아님) 아래에 Class.Path2D 인스턴스를 삽입합니다.
새로운 Path2D를 선택하여 뷰포트 도구 위젯을 표시합니다. 기본적으로 점 추가 도구가 선택됩니다.
화면을 클릭하여 시리즈의 제어 포인트 를 추가하여 경로를 만듭니다. 초기 경로는 불확실하지만 나중에 제어 포인트의 위치를 미세 조정할 수 있습니다.
완료되면 위젯의 완료 버튼을 클릭하거나 입력 을 누르십시오.
컨트롤 포인트 수정
탐색기 계층에서 선택한 Path2D로 개별 컨트롤 포인트를 수정하고 해당 컨트롤 포인트의 tangents도 수정할 수 있습니다.
이동 점
경로에 대해 개별 컨트롤 점을 이동하려면 선택 도구(V)를 활성화한 다음 새 위치로 클릭하고 드래그하십시오.
매우 특정 위치를 선택하려면 컨트롤 점을 선택한 다음 속성 창에서 새 위치를 설정하고 SelectedControlPointData 속성(UDim2) 속성(2>데이터 유형2>)에 대해 5>데이터 복사5>를 수행합니다.
위치가 상대적이며 따라서 경로의 상위 컨테이너에 대해 절대적인 위치가 아닌 경우 컨트롤 위치를 30% 왼쪽에서 20% 위로 비교하여 경로 내의 컨트롤 위치를 비교하십시오. 예를 들어, 경로
포인트 추가
새 컨트롤 포인트를 두 개 이상의 기존 포인트 사이에 추가하거나 Path2D 도구를 사용하여 모든 끝점 중 하나에 추가할 수 있습니다.
포인트 삭제
컨트롤 점을 삭제하려면 마우스로 클릭하고 컨텍스트 컨팝업 메뉴에서 점 삭제 를 선택합니다.
Control Point 탄젠트
Control point tangents 는 경로에서 곡선을 만들고 조정하는 데 사용됩니다.
탄젠트 추가
이미 쌍을 가진 컨트롤 점에 쌍을 추가하려면:
도구 위젯에서 탄젠트 추가 도구를 활성화하십시오.
원하는 컨트롤 점에 마우스를 올리고 클릭하여 2개의 미러된 직선대를 추가합니다(클릭한 후 옵션적으로 드래그하여 새 직선대를 조정).
탄젠트 조정
개별 컨트롤 점에 대해 기존 삼각형을 조정하려면:
선택 도구( V )를 활성화합니다.
컨트롤 점이 아닌 표선 표시(예: 탱셟 마커)에 마우스를 올리고 클릭하고 드래그하면 새 위치로 이동합니다. 표선이 미러링된 경우 쌍 표선 점이 동기화됩니다.
센터에 대해 특정 UDim2 위치를 수동으로 설정하려면:
선택 도구( V )를 활성화하고 컨트롤 점을 선택합니다. 속성 창에서 2>Class.Path2D.SelectedControlPointData|SelectedControlPointData2> 필드를 확장하여 5>Datatype.Path2DControlPoint
위치를 설정하십시오 LeftTangent 및/또는 RightTangent . 이 경우 미러링 동작의 왼쪽 및 오른쪽 모두에 중단 됩니다.
tangents 삭제
제어 점에서 둘 다의 측정값을 삭제하려면 해당 측정값을 마우스로 삭제한 다음 측정값 지우기 를 컨텍스트 팝업 메뉴에서 선택하십시오.
왼쪽 또는 오른쪽 측면의 한 가지 삼각형을 삭제하려면 해당 삼각형의 마커를 마우스로 이동한 다음 삼각형 삭제 를 선택합니다.
부서짐 및 미러링
기본적으로 쌍 측면 표시기를 드래그하면 쌍 측면 표시기 마다 서로 맞춥니다.
서로 다른 사람들이 서로 다른 사람들을 영향을 주지 않고 서로 다른 사람들을 서로 다른 사람들을 서로 다른 사람들을 서로 다른 사람들을 서로 다른 사람들을 서로 다른 사람들을 서로 다른 사람들을 서로 다른 사람들을 서로 다른 사람들을 서로 다른 사람들을 서로 다른 사람들을 서로 다른 사람들을 서
경로 시각적 속성
다음 속성으로 Path2D의 시각적 모양을 사용자 정의할 수 있습니다.
속성 | 설명 |
---|---|
Color3 | 경로 라인의 색을 설정합니다. |
Thickness | 경로 라인의 두께를 픽셀 단위로 설정합니다. |
Visible | 경로를 편집 및 런타임 모두에서 보이거나 보이지 않게 합니다. |
ZIndex | 다른 GUI에 대해 경로를 렌더링하는 순서를 지정합니다. |
경로 스크립트
스크립트는 여러 경로 관련 워크플로에 유용합니다. 다음 예에서는 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()