Ścieżki 2D

instancjaPath2D pozwala na wdrożenie 2D splin i 2D zakrzywionych linii, przydatnych do efektów interfejsu użytkownika, takich jak animacje oparte na ścieżkach i edytory grafów.

Stwórz ścieżkę 2D

Aby dodać Path2D do ekranu lub obiekt w doświadczeniu:

1. W oknie Eksploratora wstaw instancję Path2D pod widoczne ScreenGui lub SurfaceGui (nie musi być bezpośrednim dzieckiem).

   

2. Wybierz nowy Path2D, aby ujawnić widget narzędzi do programowania w widoku. Domyślnie wybrano narzędzie Dodaj punkt .

   

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

   

   Jeśli przeciągniesz mysz po kliknięciu, tangensy zostaną utworzone na tym punkcie.Tangencje mogą również być proceduralnie dodane do dowolnego punktu kontroli.

4. Gdy skończysz, kliknij przycisk Zrobione widgetu lub naciśnij Enter .

Modyfikuj punkty kontrolne

Wybierając Path2D w hierarchii Explorer, możesz modyfikować jej pojedyncze punkty kontroli, a także ich tangenty.

Przesuń punkty

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

Do bardzo precyzyjnego pozycjonowania wybierz punkt kontrolny, a następnie, w oknie Właściwości, ustaw nową pozycję dla właściwości punktu SelectedControlPointData (UDim2).

Zauważ, że pozycja punktu nie jest absolutna, ale raczej względna wobec kontenera rodzica ścieżki.Na przykład, porównaj punkt kontrolny 30% z lewej strony i 20% z góry dla ścieżki wewnątrz ScreenGui , w porównaniu z identyczną ścieżką umieszczoną wewnątrz Frame położoną w prawym górnym rogu ScreenGui.

Dodaj punkty

Nowe punkty kontrolne można dodać do Path2D między dwoma istniejącymi punktami lub z dowolnego punktu końcowego za pomocą narzędzia Dodaj punkt ( P ).

>

Usuń punkty

Aby usunąć punkt kontrolny, przewiń nad nim i kliknij prawym przyciskiem myszy, a następnie wybierz Usuń punkt z menu kontekstowego.

Tangencje punktu kontrolnego

Punkt kontrolny tangenty pozwala tworzyć i dostosowywać krzywe na ścieżce.

Dodaj tangenty

Aby dodać tangенsy do dowolnego punktu kontroli, który nie ma już tangensów:

1. Włącz narzędzie Dodaj tangensę w widgetzie narzędziowym.

   

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

   

Dostosuj nachylenia

Aby dostosować istniejące tangенsy dla pojedynczego punktu kontroli:

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

   

2. Najedź na znacznik tangenty (nie punkt kontroli), a następnie kliknij i przeciągnij go do nowej pozycji.Jeśli tangensy są odzwierciedlone, punkt połączonych tangensów będzie się poruszał jednomyślnie.

   

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

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

   

2. Ustaw pozycję dla LeftTangent i/lub RightTangent. Zauważ, że spowoduje to złamanie zachowania lusterowanego przez tangенsy.

Usuń tangenty

Aby usunąć obie tangенsy z punktu kontrolnego, przewiń nad nim i kliknij prawym przyciskiem myszy, a następnie wybierz Wyczyść tangенsy z menu kontekstowego.

Aby usunąć tylko jedną z tangent (lewą lub prawą), przewiń i kliknij prawym przyciskiem myszy znacznik tangenty, a następnie wybierz Usuń tangentę .

Złam i odbij

Domyślnie tangensy odzwierciedlają się nawzajem. Gdy przeciągniesz przesuń, aby dostosować jeden marker tangensów, połączony punkt tangensów będzie się poruszał jednomyślnie.

Aby "złamać" tangensy, tak aby każdy mógł być przesuwany niezależnie od drugiego, przewiń i kliknij prawym przyciskiem myszy powiązany punkt kontroli, a następnie wybierz Złamuj tangensy z menu kontekstowego.Gdy jeden z nich zostanie złamany, możesz przenieść każdy znacznik tangenty bez wpływu na drugi.

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

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

>

>

>

Skryptowanie ścieżki

Skryptowanie jest przydatne do kilku powiązanych z ścieżką przepływów pracy.Poniższe przykłady wykorzystują metody takie jak GetControlPoints(), które zwracają tabelę Path2DControlPoints i GetPositionOnCurveArcLength(), która zwraca pozycję UDim2 wzdłuż spliny na daną wartość t.

Umów obiekty interfejsu użytkownika na całej ś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 skonfiguruj dziecięce obiekty UI na ścieżce
arrangeChildren()

-- Słuchaj dzieci, które są dodawane/usuwane, aby dostosować układ
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()