Drogi 2D

instancjaClass.Path2D z wbudowanymi metodami i właściwościami API, umożliwia implementację 2D splinek i 2D zakrzywionych linii, przydatnych dla efektów UI, takich jak animacje oparte na ścieżce i edytory grafik.

Tworzenie 2D Path

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

1. W oknie Explorer, wpisz instancję Path2D pod widocznym ScreenGui lub 1> Class.SurfaceGui1> (nie musi to być bezpośrednie dziecko).

   

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

   

3. Rozpocznij klikać na ekranie, aby dodać serię punktów kontrolnych , aby stworzyć ścieżkę. Pierwsza ścieżka będzie prawdopodobnie nieprecyjna, ale możesz dostosować pozycję dowolnego punktu kontrolnego później.

   

   Jeśli przeciągniesz myszką po kliknięciu, tangenty zostaną stworzone na tym punkcie. Tangenty można również dodawać do dowolnego punktu kontrolnego.

4. Kiedy skończysz, kliknij przycisk Gotowe w widgetzie lub naciśnij Enter.

Modowanie punktów kontrolnych

Z wybranym Path2D w hierarchii Explorer, możesz modyfikować jego poszczególne punkty kontrolne, a także jego tangenty.

Punkty przemieszczania

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

Dla bardzo sprecyzyjnej lokalizacji wybierz punkt kontrolny, a następnie w oknie Właściwości ustaw nową pozycję dla właściwości SelectedControlPointData ( UDim2 ).

Uwaga, że pozycja punktu nie jest absolutna, ale raczej względna do kontenera rodzica. Na przykład, porównaj punkt kontrolny 30% z lewej i 20% z góry dla pociągu wewnątrz ScreenGui , w porównaniu z identycznym pociągiem umieszczonym w górnym lewym rogu

Dodawanie punktów

Nowe punkty kontrolne można dodać do Path2D pomiędzy dwoma istniejącymi punktami lub z każdego końca używając narzędzia Dodaj punkt ( P ).

Usuwanie punktów

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

Kontrolowanie punktów Tangents

Punkt kontrolny kąty pozwala na tworzenie i dostosowywanie zakrętów na ścieżce.

Dodawanie kątów

Aby dodać kąty do dowolnego punktu kontrolnego, który nie ma już kątów:

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

   

2. Następnie połącz kursorem pożądany punkt kontrolny, a następnie kliknij, aby dodać dwa zmierzone kąty (opcjonalnie przeciągnij po kliknięciu, aby dostosować nowe kąty).

   

Dostosowywanie kątów

Aby dostosować obecne tangenty dla jednego punktu kontrolnego:

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

   

2. Przytrzymajте kursor nad oznacznikiem kłęcia (nie jest to punkt kontrolny), a następnie kliknijте i przeciągnijcie go do nowej pozycji. Jeśli kłęcia są odzwierciedlone, parytyczny punkt kłęcia się poruszy w jednorożbie.

   

Aby ręcznie ustawić określoną pozycję UDim2 dla kąta:

1. Włącz narzędzie Wybierz ( V ) i wybierz punkt kontrolny. W oknie Właściwości rozwinię pola 2>Class.Path2D.SelectedControlPointData|SelectedControlPointData2> i 5>Datatype.Path2DControlPoint.LeftTang

   

2. Ustaw pozycję dla LeftTangent i/lub RightTangent . Uwaga, że to spowoduje przerwy w zachowaniu lustro tangent.

Usuwanie kątów

Aby usunąć obie tangenty z punktu kontrolnego, połącz kursór z punktem i kliknij go prawym przyciskiem myszy, a następnie wybierz Usuń Tangenty z menu kontekstowego popup.

Aby usunąć tylko jeden z tangentów (lewy lub prawy), nawinądź kursorem nad tym markerem tangentu i wybierz Usuń Tangentę .

Łamanie i Odbijanie

Domyślnie kąty ze sobą się odzwierciedlają. Gdy użyjesz do ustawienia jednego kąta kątów, kąt kątów kombinowanych poruszy się w jednolitym ruchu.

Aby "złamać" kąty, aby każdy może być poruszony niezależnie od drugiego, połącz kursorem i kliknięciem prawym nad powiązanym punktem kontrolnym i wybierz Złamanie kątów z menu kontekstowego. Po złamaniu możesz poruszać każdy kątowy marker bez wpływu na inne.

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

Możesz dostosować wizualny wygląd Path2D z następującymi parami właściwości:

Skrypty ścieżkowe

Skryptowanie jest użyteczne dla kilku związanych z drogą pracy. Poniższe przykłady używają metod takich jak GetControlPoints() , które zwraca tabelę Datatype.Path2D

Zorganizuj obiekty interfejsu na ścieżce
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 rozdziel obiekty interfejsu dziecka na ścieżce
arrangeChildren()

-- Słuchaj, aby dzieci były dodawane/usuwane, aby dostosować układ
parent.ChildAdded:Connect(arrangeChildren)
parent.ChildRemoved:Connect(arrangeChildren)

Przedmioty interfejsu animowanego wzdług ś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()