UI-Ziehdetektoren

Die Instanz UIDragDetector erleichtert und fördert die Interaktion mit 2D-Benutzeroberflächenelementen in einem Erlebnis, wie z. B. Schiebereglern, Spinern und mehr. Zu den Hauptfunktionen gehören:

• Platzieren Sie einen UIDragDetector unter einer beliebigen Instanz von GuiObject, um diese per Benutzerinteraktion ohne eine einzige Codezeile ziehbar zu machen.

• Wählen Sie aus verschiedenen Optionen für DragStyle und definieren Sie, wie das Objekt auf Bewegungen reagiert, indem Sie ResponseStyle verwenden, und wenden Sie optional Achsen-, Bewegungsgrenzen oder Ziehgrenzen an.

• Skripte können auf die Manipulation von gezogenen Objekten reagieren, um logische Antworten zu steuern, wie z. B. das Anpassen von Einstellungen.

• UIDragDetectors funktionieren im Editier- und Spielmodus von Studio, solange Sie nicht die Werkzeuge Auswählen, Bewegen, Skalieren oder Drehen verwenden, sowie keine bestimmten Plugins oder die UI-Editor-Tools von Studio nutzen.

Machen Sie UI-Elemente ziehbar

Um alle Instanzen von GuiObject ziehbar zu machen, fügen Sie einfach einen UIDragDetector als direkten Nachfolger hinzu.

1. Bewegen Sie im Explorer-Fenster den Mauszeiger über die Instanz von GuiObject und klicken Sie auf die Schaltfläche ⊕. Ein kontextuelles Menü wird angezeigt.

2. Wählen Sie im Menü UIDragDetector einfügen.

   

3. Standardmäßig wird das Objekt nun im LayerCollector-Interface ziehbar sein.

Passen Sie UI-Ziehdetektoren an

Ziehstil

UIDragDetectors koppeln die Mauszeigerbewegung, um vorgeschlagene 2D-Bewegungen und/oder -Drehungen zu berechnen. Über die Eigenschaft DragStyle können Sie aus verschiedenen Zuordnungen wählen, um Ihren Bedürfnissen gerecht zu werden. Zum Beispiel erzeugt Enum.UIDragDetectorDragStyle.TranslatePlane eine Translation in der 2D-Ebene des LayerCollector, während Enum.UIDragDetectorDragStyle.Rotate normalerweise eine Drehung anstelle einer Translation erzeugt.

Ziehrichtung

Standardmäßig werden 2D-Bewegungen und der zugehörige DragStyle an den Raum des übergeordneten LayerCollector gebunden. Möglicherweise möchten Sie die ReferenceUIInstance oder die DragAxis bei der Erstellung verschiedener UI-Komponenten ändern.

Reaktion auf Bewegungen

Die Eigenschaft UIDragDetector.ResponseStyle gibt an, wie der Positionswert eines Objekts durch die vorgeschlagene Bewegung geändert wird. Die benutzerdefinierten Antwortstile ermöglichen es Ihnen, die resultierenden Werte UIDragDetector.DragUDim2 und UIDragDetector.DragRotation nach Wunsch zu verwenden, ohne dass das übergeordnete Element des Detektors die vorgeschlagene Bewegung ausführt.

Translations- und Drehbeschränkungen

Standardmäßig gibt es keine Beschränkungen für 2D-Bewegungen, abgesehen von den inhärenten Einschränkungen des DragStyle. Grenzen für sowohl minimale als auch maximale Translations- und Rotationsbewegungen können mit den folgenden Eigenschaften deklariert werden, falls gewünscht. Darüber hinaus können Sie definieren, wie das gezogene Objekt innerhalb der Grenzen eines bestimmten GuiObject, wie z. B. eines Frame, eingeschränkt ist.

Geschwindigkeitsanpassungen

Über SelectionModeDragSpeed und SelectionModeRotateSpeed können Sie die maximalen Zieh-/Drehgeschwindigkeiten für einen Detektor feinabstimmen. Darüber hinaus können Sie über UIDragSpeedAxisMapping die Ziehgeschwindigkeiten der X/Y-Dimensionen basierend auf der SelectionModeDragSpeed feinabstimmen.

Skriptreaktionen auf Klicken und Ziehen

Über Ereignis-Signale, Eigentumsänderungen, Scriptable-Ziehstile und benutzerdefinierte Funktionen können Skripte auf die Manipulation von gezogenen UI-Elementen reagieren, um verschiedene Einstellungen zu steuern oder logische Entscheidungen zu treffen, wie z. B. Schieberegler, die die Lautstärke von Musik und Geräuschen separat anpassen.

Ereignis-Signale

Durch die folgenden Ereignis-Signale können Sie erkennen, wann ein Benutzer mit dem Ziehen eines Objekts beginnt, fortfährt und aufhört.

Der folgende Schieberegler bezeichnet seinen Container als BoundingUI, um seine Bewegung innerhalb des Containerbereichs zu begrenzen, sodass der skalierungsbasierte TranslateLine-Zug auf die gesamte Breite des Containers beschränkt werden kann, ohne zusätzliche Skripterstellung.

UIDragDetector - Ereignissignal Transparenzänderung
-- Hierarchie ist SliderContainer ⟩ Handle ⟩ UIDragDetector ⟩ (dieses Skript)
local sliderContainer = script.Parent.Parent.Parent
local handle = sliderContainer:FindFirstChild("Handle")
local uiDragDetector = handle:FindFirstChildWhichIsA("UIDragDetector")

uiDragDetector.ResponseStyle = Enum.UIDragDetectorResponseStyle.Scale  -- Setzen Sie das Ziehen nach Maßstab
uiDragDetector.DragStyle = Enum.UIDragDetectorDragStyle.TranslateLine  -- Beschränkt das Ziehen auf Linie
uiDragDetector.BoundingUI = sliderContainer

-- Stellen Sie zunächst die Transparenz des Containers auf den X-Maßstabwert des Griffs ein
sliderContainer.BackgroundTransparency = 1 - handle.Position.X.Scale

-- Erweitern Sie die Griffkante, um den Beginn des Greifens anzuzeigen
uiDragDetector.DragStart:Connect(function(inputPosition)
	handle:FindFirstChildWhichIsA("UIStroke").Thickness = 6
end)

-- Ändern Sie die Transparenz, je nachdem, wie viel sie im Maßstab gezogen wurde
uiDragDetector.DragContinue:Connect(function(inputPosition)
	sliderContainer.BackgroundTransparency = 1 - handle.Position.X.Scale
end)

-- Setzen Sie die Griffkante zurück, um das Ende des Greifens anzuzeigen
uiDragDetector.DragEnd:Connect(function(inputPosition)
	handle:FindFirstChildWhichIsA("UIStroke").Thickness = 4
end)

Position- und Rotationsänderungen

Zusätzlich zu Ereignis-Signalen können Sie Änderungen an den Eigenschaften DragUDim2 und/oder DragRotation des Detektors direkt überwachen.

Der folgende Detektor hat seinen DragStyle auf Rotate gesetzt, sodass Benutzer den Griff um den Farbtonrotator-Ring ziehen können, während gleichzeitig Änderungen der Drehung verfolgt werden, indem Instance:GetPropertyChangedSignal() verwendet wird.

UIDragDetector - DragRotation Änderung
local handle = script.Parent.Parent  -- UI-Element, das gezogen werden soll
local uiDragDetector = handle:FindFirstChildWhichIsA("UIDragDetector")

uiDragDetector.DragStyle = Enum.UIDragDetectorDragStyle.Rotate  -- Ziehstil auf Drehen setzen

local function changeHue()
	local currAngle = (math.fmod(handle.Rotation, 360)) / 360
	if currAngle < 0 then
		currAngle += 1
	end
	handle.BackgroundColor3 = Color3.fromHSV(currAngle, 1, 1)
end

-- Stellen Sie zunächst den Farbton auf die Griffrotation ein
changeHue()

-- Verbinden Sie die Funktion mit dem GetPropertyChangedSignal() des Drehwinkels des Detektors
uiDragDetector:GetPropertyChangedSignal("DragRotation"):Connect(changeHue)

Skriptiert Ziehstil

Wenn Sie den UIDragDetector.DragStyle eines Detektors auf Enum.UIDragDetectorDragStyle.Scriptable setzen, können Sie Ihre eigene Funktion bereitstellen, die einen Vector2 der Eingabeposition erhält und ein UDim2 (Position) sowie einen Float (Rotation) zurückgibt. Der Detektor aktualisiert das Objekt auf die berechnete Position/Drehung basierend auf den Rückgaben, der Eigenschaft DragSpace und der Eigenschaft DragRelativity.

Standardmäßig sind die zurückgegebenen UDim2 und der Float die endgültige gewünschte Position/Drehung im lokalen Raum des übergeordneten Detektors. Bestehende Übersetzungs-/Rotationsgrenzen gelten weiterhin, ebenso wie die von einem bestimmten BoundingUI-Element auferlegten Grenzen.

Das folgende Beispiel zieht ein UI-Element entlang einer sinusförmigen Welle, die durch die Änderung der X-Koordinate der Eingabe berechnet wird. Beachten Sie, dass der DragSpace des Detektors auf Enum.UIDragDetectorDragSpace.Relative gesetzt ist.

UIDragDetector - Folgen einer Sinuswelle beim Ziehen
local frame = script.Parent  -- UI-Element, das gezogen werden soll
local uiDragDetector = frame:FindFirstChildWhichIsA("UIDragDetector")

local initialXValue = 0
local maxHeightChange = 200
local pixelsPerRadian = 75  -- Verringern Sie diesen Wert, um die Frequenz zu erhöhen

uiDragDetector.DragStart:Connect(function(inputPosition)
	initialXValue = inputPosition.X
end)

local function computeSinWaveCoordinate(inputPosition)
	local deltaX = inputPosition.X - initialXValue
	-- Negativer Y-Differenz, sodass es auf dem Bildschirm mit einer positiven Y-Änderung "nach oben" geht
	local deltaY = -math.sin(deltaX / pixelsPerRadian) * maxHeightChange
	return UDim2.fromOffset(deltaX, deltaY)
end

uiDragDetector:SetDragStyleFunction(computeSinWaveCoordinate)

Benutzerdefinierte Einschränkungsfunktion

UIDragDetectors haben keine integrierten Bewegungsregeln bezüglich Rastern und Schnappen, aber Sie können benutzerdefinierte Einschränkungsfunktionen registrieren, um die UIDragDetector.DragUDim2 und UIDragDetector.DragRotation des Detektors zu bearbeiten, bevor sie angewendet werden. Zum Beispiel können Sie die Bewegung auf einem Raster halten, indem Sie Positionen auf bestimmte Inkremente runden oder zulässige Bewegungsbereiche definieren. Beachten Sie, dass dies vor jeglichen bestehenden Übersetzungs-/Rotationsgrenzen angewendet wird.

Das folgende Beispiel verwendet eine Einschränkungsfunktion, die das Planar-Ziehen in ein X/Y-Raster auf der Basis der Anzahl von Zeilen und Spalten begrenzt. Beachten Sie, dass der ResponseStyle des Detektors auf Enum.UIDragDetectorResponseStyle.Scale und sein BoundingUI auf den Rastercontainer gesetzt ist.

UIDragDetector - Ziehen im Raster, Snapping zu Kacheln
-- Hierarchie ist GridContainer ⟩ Handle ⟩ UIDragDetector ⟩ (dieses Skript)
local gridContainer = script.Parent.Parent.Parent
local handle = gridContainer:FindFirstChild("Handle")  -- UI-Element, das gezogen werden soll
local uiDragDetector = handle:FindFirstChildWhichIsA("UIDragDetector")

uiDragDetector.ResponseStyle = Enum.UIDragDetectorResponseStyle.Scale  -- Ziehen nach Maßstab setzen
uiDragDetector.DragRelativity = Enum.UIDragDetectorDragRelativity.Relative
uiDragDetector.BoundingUI = gridContainer

local NUM_COLUMNS = 10
local NUM_ROWS = 5

local xScaleIncrement = 1 / NUM_COLUMNS
local yScaleIncrement = 1 / NUM_ROWS
local initialParentPosition = uiDragDetector.Parent.Position

uiDragDetector.DragStart:Connect(function()
	initialParentPosition = uiDragDetector.Parent.Position
end)

local function dragToGridOnly(proposedPosition, proposedRotation)
	local griddedXScale = math.round(proposedPosition.X.Scale / xScaleIncrement) * xScaleIncrement
	local griddedYScale = math.round(proposedPosition.Y.Scale / yScaleIncrement) * yScaleIncrement

	return UDim2.fromScale(griddedXScale, griddedYScale), proposedRotation
end

uiDragDetector:AddConstraintFunction(1, dragToGridOnly)