Benutzeroberfläche Drag-Detektoren

Die UIDragDetector Instanz erleichtert und fördert die Interaktion mit 2D-Benutzeroberflächenelementen in einem Erlebnis, wie z. B. Schiebern, Drehern und mehr.Die wichtigsten Funktionen umfassen:

• Platziere ein UIDragDetector unter jeder GuiObject Instanz, um sie über alle Benutzeingänge hinweg ziehbar zu machen, ohne eine einzige Zeile Codes.

• Wählen Sie aus mehreren DragStyle Optionen, definieren Sie, wie das Objekt auf Bewegung durch ResponseStyle reagiert, und wenden Sie optional Achsen, Bewegungslimiten oder Ziehgrenzen an.

• Skripte können auf die Manipulation von verschleppten Objekten reagieren, um logische Antworten zu treiben, wie das Anpassen von Einstellungen.

• UIDragDetectors Arbeite im Bearbeitungs- und Spielmodus von Studio, solange du nicht nicht die Werkzeuge Auswählen , Bewegen , Skalieren oder Drehen verwendest, oder bestimmte Plugins oder Studio- UI- -Editor-Tools.

Machen Sie UI-Elemente ziehbar

Um jede GuiObject Instanz ziehbar zu machen, füge einfach einen UIDragDetector als direkten Nachfolgerhinzu.

1. In dem Explorer-Fenster bewegen Sie den Mauszeiger über die GuiObject und klicken auf die Schaltfläche ⊕. Ein Kontextmenü wird angezeigt.

2. Aus dem Menü, fügen Sie einen UIDragDetector ein.

   

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

Benutzerdefinierte UI-Zieherdetektoren anpassen

Ziehstil

UIDragDetectors Kartocurrency-Bewegung zum Berechnen vorgeschlagener 2D-Bewegung und/oder Rotation.Mit der EigenschaftenDragStyle kannst du aus verschiedenen Mappings wählen, um deinen Bedürfnissen gerecht zu werden.Zum Beispiel produziert Enum.UIDragDetectorDragStyle.TranslatePlane Übersetzung in der 2D-Ebene des LayerCollector , während Enum.UIDragDetectorDragStyle.Rotate normalerweise eine Rotation statt einer Übersetzung erzeugt.

Ziehrichtung

Standardmäßig, 2D-Bewegung und die zugeordnete DragStyle Karte in den Raum des Vorfahren LayerCollector.Sie möchten jedoch möglicherweise die ReferenceUIInstance oder die DragAxis ändern, wenn Sie verschiedene UI-Komponenten erstellen.

Antwort auf Bewegung

Die Eigenschaft UIDragDetector.ResponseStyle gibt an, wie sich der Positionswert eines Objekts durch den vorgeschlagenen Antrag ändert.Die benutzerdefinierten Antwort styles ermöglichen es Ihnen, die sich ergebenden UIDragDetector.DragUDim2 und UIDragDetector.DragRotation Werte wie gewünscht zu verwenden, ohne dass der Elternprozess des Detektors die vorgeschlagene Bewegung ausführt.

Übersetzungs- und Rotationsgrenzen

Standardmäßig gibt es keine Einschränkungen für 2D-Bewegung hinter den angeborenen Einschränkungen von DragStyle.Grenzen für minimale und maximale Übersetzungen und Rotationen können mit den folgenden Eigenschaften erklärt werden, wenn gewünscht.Zusätzlich kannst du definieren, wie das verschobene Objekt innerhalb der Grenzen eines bestimmten GuiObject wie eines Frame eingeschränkt wird.

Geschwindigkeitsanpassungen

Durch SelectionModeDragSpeed und SelectionModeRotateSpeed kannst du die maximalen Zieh-/Drehgeschwindigkeiten für einen Detektor anpassen.Darüber hinaus können Sie durch UIDragSpeedAxisMapping die Drag-Geschwindigkeiten der Dimension X / Y anpassen, basierend auf der des Detektors SelectionModeDragSpeed.

Skriptantworten auf Klicken und Ziehen

Durch Ereignissignale, Eigenschaftsänderungen, Scriptable Drag-Stil und benutzerdefinierte Funktionen können Skripte auf die Manipulation von gezogenen UI-Elementen reagieren, um verschiedene Einstellungen zu treffen oder logische Entscheidungen zu treffen, wie z. B. Schieber, die die Musik- und Soundeffektlautstärke separat anpassen.

Ereignissignale

Mit den folgenden Ereignissignalen kannst du erkennen, wann ein Benutzer beginnt, weiterzieht und beendet, ein Objekt zu ziehen.

Das folgende Schieberegler weist seinen Container als BoundingUI aus, um seine Bewegung innerhalb des Containerbereichs zu begrenzen, so dass die skalierbare TranslateLine Ziehung auf die volle Breite des Containers ohne zusätzliche Scriptingbeschränkt werden kann.

UIDragDetektor - Änderung der Transparenz des Ereignissignals
-- Hierarchie ist SliderContainer ⟩ Handle ⟩ UIDragDetector ⟩ (dieses Skript, das. PL: die Skripts)
local sliderContainer = script.Parent.Parent.Parent
local handle = sliderContainer:FindFirstChild("Handle")
local uiDragDetector = handle:FindFirstChildWhichIsA("UIDragDetector")

uiDragDetector.ResponseStyle = Enum.UIDragDetectorResponseStyle.Scale  -- Ziehen durch Skalierung Größenverhältnis
uiDragDetector.DragStyle = Enum.UIDragDetectorDragStyle.TranslateLine  -- Beschränkt das Ziehen auf die Linie
uiDragDetector.BoundingUI = sliderContainer

-- Setze zunächst die Containertransparenz auf den X-Skalierungswert des Ziehpunkt
sliderContainer.BackgroundTransparency = 1 - handle.Position.X.Scale

-- Erweitere Griffgrenze erweitern, um den startenanzuzeigen
uiDragDetector.DragStart:Connect(function(inputPosition)
	handle:FindFirstChildWhichIsA("UIStroke").Thickness = 6
end)

-- Ändere die Transparenz darin, wie viel sie in der Größenverhältnisverschoben hat
uiDragDetector.DragContinue:Connect(function(inputPosition)
	sliderContainer.BackgroundTransparency = 1 - handle.Position.X.Scale
end)

-- Griffgrenze rückgängig machen, um das beendenzu markieren
uiDragDetector.DragEnd:Connect(function(inputPosition)
	handle:FindFirstChildWhichIsA("UIStroke").Thickness = 4
end)

Positionierungs- und Rotationsänderungen

Zusätzlich zu Ereignissignalen kannst du Änderungen an den DragUDim2 und/oder DragRotation Eigenschaften des Detektors direkt überwachen.

Der folgende Detektor hat seine DragStyle Einstellung auf Rotate gesetzt, so dass Benutzer den Griff um den Farbton-Rotator herum ziehen können, während sie Änderungen an der Ziehrotierung durch Instance:GetPropertyChangedSignal() erkennen.

UIDragDetektor - DragRotation-Änderung
local handle = script.Parent.Parent  -- UI-Element zum Ziehen
local uiDragDetector = handle:FindFirstChildWhichIsA("UIDragDetector")

uiDragDetector.DragStyle = Enum.UIDragDetectorDragStyle.Rotate  -- Ziehstil auf drehen

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

-- Farbe zunächst festlegen, um Rotation zu handhaben
changeHue()

-- Funktion verbinden mit GetPropertyChangedSignal() der Drag-Rotation des Detektors
uiDragDetector:GetPropertyChangedSignal("DragRotation"):Connect(changeHue)

Skriptgesteuerte Ziehstil

Wenn du die eines Detektors auf festlegst, kannst du deine eigene Funktion bereitstellen, die einen des Eingangspositions aufnimmt und eine (Position) und einen Float (Rotation) zurückgibt.Der Detektor aktualisiert das Objekt auf die berechnete Position/Rotation basierend auf den Rückgaben, der EigenschaftenDragSpace und der EigenschaftenDragRelativity.

Standardmäßig werden die zurückgegebenen UDim2 und Float die endgültige Position/Rotation im lokalen Raum des übergeordnetes Teildes Detektors sein.Bestehende Übersetzungs-/Drehbeschränkungen werden weiterhin gelten, ebenso wie die Grenzen, die von einer bestimmten BoundingUI auferlegt werden.

Das folgende Beispiel zieht ein UI-Element nach einer Sinuswelle, die durch die Änderung der X -Koordinaten输入 berechnet wurde.Beachten Sie, dass der Detektor von DragSpace auf Enum.UIDragDetectorDragSpace.Relative gesetzt ist.

UIDragDetektor - Folgende Sinuswelle ziehen
local frame = script.Parent  -- UI-Element zum Ziehen
local uiDragDetector = frame:FindFirstChildWhichIsA("UIDragDetector")

local initialXValue = 0
local maxHeightChange = 200
local pixelsPerRadian = 75  -- Senke diesen Wert, um die Häufigkeit zu erhöhen

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

local function computeSinWaveCoordinate(inputPosition)
	local deltaX = inputPosition.X - initialXValue
	-- Negatives Y-Delta, damit es "auf" auf dem Bildschirm geht, mit positiver Y-Änderung
	local deltaY = -math.sin(deltaX / pixelsPerRadian) * maxHeightChange
	return UDim2.fromOffset(deltaX, deltaY)
end

uiDragDetector:SetDragStyleFunction(computeSinWaveCoordinate)

Benutzerdefinierte Einschränkungsfunktion

UIDragDetectors haben keine integrierten Bewegungsregeln über Raster und Einstellung, aber Sie können benutzerdefinierte Einschränkungsfunktionen registrieren, um die Detektor-UIDragDetector.DragUDim2 - und -UIDragDetector.DragRotation -Funktionen vor ihrer Anwendung zu bearbeiten.Zum Beispiel können Sie die Bewegung auf einem Raster halten, indem Sie Positionen auf bestimmte Schritte runden oder definierte Bewegungsbereiche festlegen.Beachten Sie, dass dies vor jeglichen vorhandenen Übersetzungs-/Rotationsgrenzen angewendet wird.

Das folgende Beispiel verwendet eine Einschränkungsfunktion, die den planaren Zug in ein X / Y -Gitter einpresst, basierend auf der Anzahl der Reihen und Spalten.Beachten Sie, dass der Detektor von ResponseStyle auf Enum.UIDragDetectorResponseStyle.Scale und sein BoundingUI auf den Rastercontainer festgelegt ist.

UIDragDetektor - Ziehen in Raster, Anpassen an Fliesen
-- Hierarchie ist GridContainer ⟩ Handle ⟩ UIDragDetector ⟩ (dieses Skript, das. PL: die Skripts)
local gridContainer = script.Parent.Parent.Parent
local handle = gridContainer:FindFirstChild("Handle")  -- UI-Element zum Ziehen
local uiDragDetector = handle:FindFirstChildWhichIsA("UIDragDetector")

uiDragDetector.ResponseStyle = Enum.UIDragDetectorResponseStyle.Scale  -- Ziehen durch Skalierung Größenverhältnis
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)