2D-Pfade

Die Path2D-Instanz, zusammen mit ihren API-Methoden und -Eigenschaften, ermöglicht es Ihnen, 2D-Splines und 2D-gekrümmte Linien zu implementieren, die nützlich für UI-Effekte wie pfadbasierte Animationen und Grafik-Editoren sind.

Erstellen eines 2D-Pfades

Um eine Path2D auf dem Bildschirm oder einem In-Experience-Objekt hinzuzufügen:

1. Fügen Sie in dem Explorer-Fenster eine Path2D-Instanz unter einem sichtbaren ScreenGui oder SurfaceGui ein (es muss kein direktes Kind sein).

   

2. Wählen Sie die neue Path2D aus, um das Werkzeug-Widget imViewport anzuzeigen. Standardmäßig ist das Tool Punkt hinzufügen ausgewählt.

   

3. Beginnen Sie, auf den Bildschirm zu klicken, um eine Reihe von Kontrollpunkten zu einer Form zu erstellen. Der anfängliche Pfad wird wahrscheinlich ungenau sein, aber Sie können die Position eines beliebigen Kontrollpunkts später feinjustieren.

   

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

4. Wenn Sie fertig sind, klicken Sie auf die Schaltfläche Fertig des Widgets oder drücken Sie Enter.

Kontrollpunkte ändern

Mit einer ausgewählten Path2D im Explorer-Verzeichnis können Sie ihre einzelnen Kontrollpunkte sowie deren Tangenten ändern.

Punkte verschieben

Um einen einzelnen Kontrollpunkt auf einem Pfad zu verschieben, aktivieren Sie das Auswahl-Tool (V) und klicken Sie dann darauf, um ihn an eine neue Position zu ziehen.

Für eine sehr präzise Positionierung wählen Sie den Kontrollpunkt aus und setzen dann im Eigenschaften-Fenster eine neue Position für die SelectedControlPointData-Eigenschaft (UDim2).

Beachten Sie, dass die Position eines Punktes nicht absolut ist, sondern relativ zum übergeordneten Container des Pfades. Vergleichen Sie beispielsweise einen Kontrollpunkt, der 30 % von links und 20 % von oben für einen Pfad innerhalb eines ScreenGui entfernt ist, mit einem identischen Pfad, der in einem Frame platziert ist, das sich in der oberen rechten Ecke des ScreenGui befindet.

Punkte hinzufügen

Neue Kontrollpunkte können zu einer Path2D entweder zwischen zwei vorhandenen Punkten oder von einem der Endpunkte aus mit dem Punkt hinzufügen-Tool (P) hinzugefügt werden.

Punkte löschen

Um einen Kontrollpunkt zu löschen, fahren Sie mit der Maus darüber und klicken Sie mit der rechten Maustaste darauf, und wählen Sie Punkt löschen aus dem kontextabhängigen Popup-Menü.

Tangenten von Kontrollpunkten

Die Tangenten von Kontrollpunkten ermöglichen es Ihnen, Kurven auf einem Pfad zu erstellen und anzupassen.

Tangenten hinzufügen

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

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

   

2. Fahren Sie mit der Maus über den gewünschten Kontrollpunkt und klicken Sie, um zwei gespiegelte Tangenten hinzuzufügen (optional ziehen Sie nach dem Klicken, um die neuen Tangenten anzupassen).

   

Tangenten anpassen

Um vorhandene Tangenten für einen individuellen Kontrollpunkt anzupassen:

1. Aktivieren Sie das Auswahl-Tool (V).

   

2. Fahren Sie mit der Maus über einen Tangentenmarker (nicht den Kontrollpunkt), und klicken Sie dann mit gedrückter Maustaste, um ihn an eine neue Position zu ziehen. Wenn die Tangenten gespiegelt sind, wird der zugehörige Tangentenpunkt synchron bewegt.

   

Um eine bestimmte UDim2-Position für eine Tangente manuell festzulegen:

1. Aktivieren Sie das Auswahl-Tool (V) und wählen Sie den Kontrollpunkt aus. Im Eigenschaften-Fenster erweitern Sie das SelectedControlPointData-Feld, um die Eigenschaften LeftTangent und RightTangent anzuzeigen.

   

2. Setzen Sie die Position für LeftTangent und/oder RightTangent. Beachten Sie, dass dies das gespiegelte Verhalten der Tangenten unterbricht.

Tangenten löschen

Um beide Tangenten von einem Kontrollpunkt zu löschen, fahren Sie mit der Maus darüber und klicken Sie mit der rechten Maustaste auf diesen Punkt, und wählen Sie Tangenten löschen aus dem kontextabhängigen Popup-Menü.

Um nur eine der Tangenten (links oder rechts) zu löschen, fahren Sie mit der Maus über den Marker dieser Tangente, und klicken Sie dann mit der rechten Maustaste auf den Marker und wählen Sie Tangente löschen.

Brechen und spiegeln

Standardmäßig spiegeln sich die Tangenten gegenseitig. Wenn Sie ziehen, um anzupassen einen Tangentenmarker, bewegt sich der zugehörige Tangentenpunkt synchron.

Um die Tangenten zu "brechen", sodass jede unabhängig von der anderen verschoben werden kann, fahren Sie mit der Maus über den zugehörigen Kontrollpunkt und klicken Sie dann mit der rechten Maustaste darauf, und wählen Sie Tangenten brechen aus dem Kontextmenü. Sobald sie gebrochen sind, können Sie jeden Tangentenmarker verschieben, ohne die andere zu beeinflussen.

Visuelle Eigenschaften des Pfades

Sie können das visuelle Erscheinungsbild einer Path2D mit den folgenden Eigenschaften anpassen:

Pfad-Scripting

Das Scripting ist nützlich für mehrere pfadbezogene Workflows. Die folgenden Beispiele verwenden Methoden wie GetControlPoints(), die eine Tabelle von Path2DControlPoints zurückgibt, und GetPositionOnCurveArcLength(), die die UDim2-Position zu einem bestimmten t-Wert entlang des Splines zurückgibt.

UI-Objekte über den 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

-- Zu Beginn UI-Objekte über den Pfad anordnen
arrangeChildren()

-- Auf das Hinzufügen/Entfernen von Kindern hören, um die Anordnung anzupassen
parent.ChildAdded:Connect(arrangeChildren)
parent.ChildRemoved:Connect(arrangeChildren)

UI-Objekt entlang 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()