2D ścieżki

Instancja Path2D, wraz z metodami API i właściwościami, pozwala na implementację 2D spline'ów i 2D krzywych linii, przydatnych w efektach UI, takich jak animacje oparte na ścieżkach i edytory grafów.

Utwórz ścieżkę 2D

Aby dodać Path2D na ekran lub obiekt w doświadczeniu:

1. W oknie Eksploratora wstaw instancję Path2D pod widocznym ScreenGui lub SurfaceGui (nie musi to być bezpośredni element podrzędny).

   

2. Wybierz nowy Path2D, aby ujawnić narzędzie do edytowania w widoku. Domyślnie wybrane jest narzędzie Dodaj punkt.

   

3. Zacznij klikać na ekranie, aby dodać serię punktów kontrolnych, aby utworzyć ścieżkę. Początkowa ścieżka może być niedokładna, ale możesz dostosować pozycję dowolnego punktu kontrolnego później.

   

   Jeśli przeciągniesz myszkę po kliknięciu, na tym punkcie zostaną utworzone tangenty. Tangenty można także proceduralnie dodać do dowolnego punktu kontrolnego.

4. Po zakończeniu kliknij przycisk Gotowe w widżecie lub naciśnij Enter.

Modyfikuj punkty kontrolne

Z wybranym Path2D w hierarchii Eksploratora, możesz modyfikować jego poszczególne punkty kontrolne oraz ich tangenty.

Przenieś punkty

Aby przenieść pojedynczy punkt kontrolny na ścieżce, włącz narzędzie Wybierz (V) i następnie kliknij i przeciągnij go w nowe miejsce.

Dla bardzo szczegółowego ustawienia, wybierz punkt kontrolny, a następnie w oknie Właściwości ustaw nową pozycję dla właściwości SelectedControlPointData punktu (UDim2).

Zauważ, że pozycja punktu nie jest absolutna, lecz relatywna do kontenera rodzica ścieżki. Na przykład, porównaj punkt kontrolny 30% od lewej i 20% od góry dla ścieżki wewnątrz ScreenGui, w porównaniu do identycznej ścieżki umieszczonej w Frame znajdującej się w prawym górnym rogu ScreenGui.

Dodaj punkty

Nowe punkty kontrolne można dodać do Path2D zarówno między dwoma istniejącymi punktami, jak i z jednego z końcowych punktów przy użyciu narzędzia Dodaj punkt (P).

Usuń punkty

Aby usunąć punkt kontrolny, najedź na niego i kliknij prawym przyciskiem myszy, a następnie wybierz Usuń punkt z kontekstowego menu.

Tangenty punktu kontrolnego

Tangenty punktu kontrolnego pozwalają ci tworzyć i dostosowywać krzywe na ścieżce.

Dodaj tangenty

Aby dodać tangenty do dowolnego punktu kontrolnego, który ich jeszcze nie ma:

1. Włącz narzędzie Dodaj Tangent w narzędziu.

   

2. Najedź na żądany punkt kontrolny, a następnie kliknij, aby dodać dwie lustrzane tangenty (opcjonalnie przeciągnij po kliknięciu, aby dostosować nowe tangenty).

   

Dostosuj tangenty

Aby dostosować istniejące tangenty dla pojedynczego punktu kontrolnego:

1. Włącz narzędzie Wybierz (V).

   

2. Najedź na znacznik tangenta (nie na punkt kontrolny), a następnie kliknij i przeciągnij go w nowe miejsce. Jeśli tangenty są odbite, to punkt tangenta pary poruszy się jednocześnie.

   

Aby ręcznie ustawić konkretną pozycję UDim2 dla tangenta:

1. Włącz narzędzie Wybierz (V) i wybierz punkt kontrolny. W oknie Właściwości rozszerz pole SelectedControlPointData, aby ujawnić LeftTangent i RightTangent.

   

2. Ustaw pozycję dla LeftTangent i/lub RightTangent. Zauważ, że to przerwie lustrzane zachowanie tangentów.

Usuń tangenty

Aby usunąć obie tangenty z punktu kontrolnego, najedź na ten punkt i kliknij prawym przyciskiem myszy, a następnie wybierz Klaruj Tangenty z kontekstowego menu.

Aby usunąć tylko jedną z tangent (lewa lub prawa), najedź na znacznik tangenta i kliknij prawym przyciskiem myszy, a następnie wybierz Usuń Tangenta.

Przerwij i odbij

Domyślnie tangenty odbijają się nawzajem. Gdy przeciągniesz, aby dostosować jeden znacznik tangenta, punkt tangenta pary poruszy się jednocześnie.

Aby "przerwać" tangenty, aby każdy mógł być przenoszony niezależnie od siebie, najedź na powiązany punkt kontrolny i kliknij prawym przyciskiem myszy, a następnie wybierz Przerwij Tangenty z menu kontekstowego. Po przerwaniu możesz przesuwać każdy znacznik tangenta bez wpływu na drugiego.

Właściwości wizualne ścieżki

Możesz dostosować wizualny wygląd Path2D za pomocą następujących właściwości:

Scripting ścieżki

Scripting jest przydatny w kilku związanych ze ścieżką przepływach pracy. Następujące przykłady wykorzystują metody, takie jak GetControlPoints(), która zwraca tabelę Path2DControlPoints, oraz GetPositionOnCurveArcLength(), która zwraca pozycję UDim2 w danej wartości t wzdłuż spline'a.

Rozmieść obiekty UI wzdłuż ścieżki
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

-- Początkowo rozmieść dzieci obiektów UI wzdłuż ścieżki
arrangeChildren()

-- Nasłuchuj na dodawane/usuwane dzieci, aby dostosować rozmieszczenie
parent.ChildAdded:Connect(arrangeChildren)
parent.ChildRemoved:Connect(arrangeChildren)

Animuj obiekt UI wzdłuż ścieżki
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()