2D-Wege

Die Path2D Instanz, zusammen mit ihren API-Methoden und Eigenschaften, ermöglicht es Ihnen, 2D-Splines und 2D-Curved-Lines zu implementieren, nützlich für Benutzeroeffekte wie Path-based Animationen und Graph-Editoren.

Erstellen eines Pfad

Um ein Path2D an den Bildschirm oder ein In-Experience-Objekt hinzuzufügen:

1. In dem Explorer-Fenster, fügen Sie eine Path2D Instanz unter einem sichtbaren ScreenGui oder 1> Class.SurfaceGui1> (es muss kein direkter Kind sein) ein.

   

2. Wählen Sie das neue Path2D , um das In-Viewport-Werkzeug-Widget zu enthüllen. Standardmäßig wird das Zufügen-Punkt-Werkzeug ausgewählt.

   

3. Beginnen Sie, auf dem Bildschirm zu klicken, um eine Reihe von Kontrollpunkten hinzuzufügen, um einen Pfad zu bilden. Der ursprüngliche Pfad wird wahrscheinlich ungenau sein, aber Sie können die Position eines Kontrollpunkts später feinjustieren.

   

   Wenn Sie nach dem Klicken die Maus ziehen, werden Tangente auf diesem Punkt erstellt. Tangente können auch prozedural hinzugefügt werden an jeden Kontrollpunkt.

4. Wenn Sie fertig sind, klicken Sie auf die Widget"Erledigt" in der Navigation oder drücken Sie Enter.

Steuungspunkte modifizieren

Mit einem Path2D ausgewählt in der Explorer-Hierarchie, können Sie seine einzelnen Kontrollpunkte sowie seine Tangente modifizieren.

Bewegliche Punkte

Um einen einzelnen Kontrollpunkt auf einem Pfad zu verschieben, aktivieren Sie das Auswählen -Werkzeug ( V ) und klicken Sie dann auf ihn und ziehen Sie ihn zu einer neuen Position.

Für eine sehr spezifische Platzierung wählen Sie den Kontrollpunkt und dann im Eigenschaften-Fenster die neue Position für die Eigenschaft des Punkts SelectedControlPointData ( UDim2 ).

Beachten Sie, dass die Position eines Punkts nicht absolut ist, sondern vielmehr relativ zu dem Elternbehälter des Weges. Zum Beispiel vergleichen Sie einen Kontrollpunkt 30% von links und 20% von oben für einen Weg innerhalb eines ScreenGui , im Gegensatz zu einer identischen Position, die in der oberen-rechten Ecke des Class

Punkte hinzufügen

Neue Kontrollpunkte können zu einem Path2D hinzugefügt werden, entweder zwischen zwei bestehenden Punkten oder von einem Endpunkt aus mit dem Werkzeug Punkt hinzufügen ( P ).

Punkte löschen

Um einen Kontrollpunkt zu löschen, bewegen Sie den Mauszeiger über ihn und klicken Sie dann mit der rechten Maustaste auf Punkt löschen aus dem Kontextmenü.

Steuungspunkt Tangente

Control point Tangente lässt Sie Kurven auf einem Pfad erstellen und anpassen.

Tangente hinzufügen

Um jedem Kontrollpunkt, der keine Tangente bereits hat, einen Tangenten hinzuzufügen:

1. Aktivieren Sie das Tangente hinzufügen Werkzeug im Widget.

   

2. Bewegen Sie den Mauszeiger über den gewünschten Kontrollpunkt und klicken Sie dann, um zwei gespiegelte Tangente hinzuzufügen (optionale Ziehung nach dem Klicken, um die neuen Tangente anzupassen).

   

Anpassung von Tangente

Um bestehende Tangente für einen einzelnen Kontrollpunkt anzupassen:

1. Aktivieren Sie das Auswählen-Werkzeug ( V ).

   

2. Bewegen Sie den Mauszeiger über einen Tangensmarter (nicht den Kontrollpunkt), dann klicken Sie darauf und ziehen Sie es zu einer neuen Position. Wenn die Tangente gespiegelt ist, bewegt sich der zugeordnete Tangenspunkt in Einklang.

   

Um eine bestimmte UDim2 Position für einen Tangenten manuell zu setzen:

1. Aktivieren Sie das Werkzeug Auswählen ( V ) und wählen Sie den Kontrollpunkt. Im Eigenschaften-Fenster erweitern Sie das Feld 1> Class.Path2D.SelectedControlPointData|SelectedControlPointData1> , um die 4> Dat

   

2. Set the position for LeftTangent and/or RightTangent . Beachten Sie, dass dies das mirrored-Verhalten der Tangente bricht.

Tangente löschen

Um beide Tangente von einem Kontrollpunkt zu löschen, bewegen Sie den Mauszeiger über und rechtsklicken Sie auf diesen Punkt, dann wählen Sie Tangente löschen aus dem Kontextmenü.

Um nur einen der Tangente (links oder rechts) zu löschen, bewegen Sie den Mauszeiger über die Markierung und klicken Sie dann auf Tangente löschen .

Aufbrechen und Mirror

Standardmäßig spiegeln sich Tangente nacheinander. Wenn Sie ziehen, um einen Tangentenmarkierer anzupassen, bewegt sich der kombinierte Tangenzentpunkt in Einklang.

Um die Tangente "zu brechen", damit jeder von der anderen abhängig ist, bewegen Sie den Mauszeiger über die mit dem anderen verbundene Steuerelement und klicken Sie dann mit der rechten Maustaste auf "Tangente brechen" aus dem Kontextmenü. Einmal gebrochen, können Sie jeden Tangentenmarker ohne das andere bewegen.

Weg- visuelle Eigenschaften

Du kannst das visuelle Aussehen eines Path2D mit den folgenden Eigenschaften anpassen:

Weg-Skripting

Skripte sind für mehrere Pfad-bezogene Workflows nützlich. Die folgenden Beispiele verwenden Methoden wie GetControlPoints(), die eine Tabelle von Path2DControlPoints und

UI-Objekte auf dem Pfad anordnen
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

-- Kinder-UI-Objekte anfangen mit dem Pfad
arrangeChildren()

-- Hören Sie, wenn Kinder hinzugefügt/entfernt werden, um die Anordnung anzupassen
parent.ChildAdded:Connect(arrangeChildren)
parent.ChildRemoved:Connect(arrangeChildren)

UI-Objekt während des Pfades animieren
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()