2D-Pfade

Die Path2D, zusammen mit ihren API-Methoden und Eigenschaften, lässt dich 2D-Splines und 2D-gebogene Linien implementieren, die für UI-Effekte wie Pfad-basierte Animationen und Grafikbearbeiter nützlich sind.

Erstelle einen 2D-Pfad

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

1. In dem Explorer-Fenster füge eine Path2D unter einem sichtbaren ScreenGui oder SurfaceGui (es muss kein direktes Kind sein).

   

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

   

3. Beginne, auf den Bildschirm zu klicken, um eine Reihe von Steuerelementen hinzuzufügen, um einen Weg zu bilden.Der ursprüngliche Weg wird wahrscheinlich ungenau sein, aber du kannst die Position jedes Kontrollpunkts später feinabstimmen.

   

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

4. Wenn du fertig bist, klicke auf die Schaltfläche Fertig des Widgets oder drücke Enter.

Kontrollpunkte modifizieren

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

Punkte verschieben

Um einen einzelnen Kontrollpunkt auf einem Pfad zu verschieben, aktiviere das Werkzeug Auswählen (） und ziehe es dann an eine neue Position.

Für eine sehr spezifische Positionierung wählen Sie den Kontrollpunkt aus und legen dann im Eigenschaften-Fenster eine neue Position für das Eigenschaftselement des Punkts fest ( ).

Beachten Sie, dass die Position eines Punkts nicht absolut ist, sondern relativ zum Eltern-Container des Weges.Vergleichen Sie zum Beispiel einen Kontrollpunkt 30% von links und 20% von oben für einen Weg innerhalb eines ScreenGui , gegenüber einem identischen Weg, der in einer Frame oberen rechten Ecke des ScreenGui platziert wurde.

Punkte hinzufügen

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

Punkte löschen

Um einen Kontrollpunkt zu löschen, bewegen Sie den Mauszeiger darüber und klicken Sie mit der rechten Maustaste darauf, dann wählen Sie Punkt löschen aus dem Kontextmenü.

Kontrollpunkt-Tangente

Kontrollpunkt Tangente lässt dich Kurven auf einem Weg erstellen und anpassen.

Tangente hinzufügen

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

1. Aktiviere das Tangente hinzufügen -Werkzeug im Tooling-Widget.

   

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

   

Tangente anpassen

Um vorhandene Tangente für einen einzelnen Kontrollpunkt anzupassen:

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

   

2. Bewegen Sie den Mauszeiger über einen Tangentenmarkierer (nicht über den Kontrollpunkt), dann klicken und ziehen Sie ihn in eine neue Position.Wenn die Tangente gespiegelt wird, bewegt sich der paarige Tangentenpunkt im Einklang.

   

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

1. Aktivieren Sie das Auswählen -Werkzeug ( V ) und wählen Sie den Kontrollpunkt aus.Erweitere im Eigenschaften-Fenster das Feld SelectedControlPointData um die LeftTangent und RightTangent Eigenschaften freizulegen.

   

2. Stelle die Position für und/oder fest. Beachte, dass dies das gespiegelte Verhalten der Tangente bricht.

Tangente löschen

Um beide Tangente aus einem Kontrollpunkt zu löschen, bewegen Sie den Mauszeiger und klicken Sie mit der rechten Maustaste 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 darüber und klicken mit der rechten Maustaste auf den Marker der Tangente, dann wählen Sie Tangente löschen .

Zerbrechen und Spiegeln

Standardmäßig spiegeln sich die Tangente gegenseitig. Wenn du ziehst, um einen Tangentenmarkierer anzupassen, bewegt sich der paarige Tangentenpunkt im Einklang.

Um die Tangente zu "brechen", damit jede unabhängig von der anderen bewegt werden kann, bewegen Sie den Mauszeiger und klicken Sie mit der rechten Maustaste auf den dazugehörigen Kontrollpunkt, wählen Sie dann Tangente brechen aus dem Kontextmenü.Sobald gebrochen, kannst du jeden Tangentenmarkierer ohne Auswirkung auf den anderen bewegen.

Weg visuelle Eigenschaften

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

>

>

>

Scripting

Skripte sind nützlich für mehrere wegbezogene Workflows.Die folgenden Beispiele verwenden Methoden wie GetControlPoints(), die eine Tabelle von Path2DControlPoints und GetPositionOnCurveArcLength() zurückgibt, die die UDim2 Position an einem bestimmten t Wert entlang der Kerbverzahnung zurückgibt.

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

-- Stelle zuerst Kind-UI-Objekte auf dem Pfad an
arrangeChildren()

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

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