UI-Zieh-Detektoren

Die Instanz UIDragDetector erleichtert und fördert die Interaktion mit 2D-Benutzerschnittstellenelementen in einem Spiel, wie Schiebereglern, Drehreglern und mehr. Zu den Hauptmerkmalen gehören:

• Platzieren Sie einen UIDragDetector unter einer beliebigen Instanz von GuiObject, um sie über alle Benutzereingaben ohne eine einzige Zeile Code ziehbar zu machen.

• Wählen Sie aus mehreren Optionen von DragStyle, definieren Sie, wie das Objekt auf Bewegungen über ResponseStyle reagiert, und wenden Sie optional Achsen, Bewegungsgrenzen oder Ziehgrenzen an.

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

• UIDragDetectors funktionieren im Bearbeitungs- und Spielmodus von Studio, solange Sie nicht die Werkzeuge Auswählen, Bewegen, Skalieren oder Drehen verwenden, noch bestimmte Plugins oder die UI-Editor-Tools von Studio.

Machen Sie UI-Elemente ziehbar

Um beliebige Instanzen von GuiObject ziehbar zu machen, fügen Sie einfach einen UIDragDetector als direkten Nachkommen 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. Fügen Sie aus dem Menü einen UIDragDetector ein.

   

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

Passen Sie UI-Zieh-Detektoren an

Ziehstil

UIDragDetectors ordnen die Mauszeigerbewegung zu, um die vorgeschlagene 2D-Bewegung und/oder Rotation 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 Rotation anstelle einer Translation erzeugt.

Ziehrichtung

Standardmäßig sind 2D-Bewegung und der zugehörige DragStyle auf den Raum des übergeordneten LayerCollector abgebildet. Sie möchten möglicherweise die ReferenceUIInstance oder die DragAxis ändern, wenn Sie verschiedene UI-Komponenten erstellen.

Reaktion auf Bewegung

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 von UIDragDetector.DragUDim2 und UIDragDetector.DragRotation nach Belieben zu verwenden, ohne dass der übergeordnete Detektor die vorgeschlagene Bewegung ausführt.

Übersetzungs- & Rotationsgrenzen

Standardmäßig gibt es keine Grenzen für 2D-Bewegungen, abgesehen von den inhärenten Einschränkungen des DragStyle. Grenzen für sowohl minimale als auch maximale Übersetzungen und Rotationen können mit den folgenden Eigenschaften deklariert werden, wenn 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 wird.

Geschwindigkeitsanpassungen

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

Skriptantworten auf Klicken und Ziehen

Durch Ereignissignale, Eigenschaftenänderungen, Scriptable Ziehstil und benutzerdefinierte Funktionen können Skripte auf die Manipulation gezogener UI-Elemente reagieren, um verschiedene Einstellungen zu steuern oder logische Entscheidungen zu treffen, wie z.B. Schieberegler, die die Musik- und Soundeffektlautstärke separat anpassen.

Ereignissignale

Durch die folgenden Ereignissignale können Sie erkennen, wann ein Benutzer mit dem Ziehen eines Objekts beginnt, fortfährt und es beendet.

Der folgende Schieberegler bezeichnet seinen Container als BoundingUI, um seine Bewegung innerhalb des Containerbereichs zu begrenzen, wodurch der skalierungsbasierte TranslateLine-Zug auf die volle Breite des Containers ohne zusätzliches Skripting begrenzt wird.

-- 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  -- Setze Ziehen nach Maßstab
uiDragDetector.DragStyle = Enum.UIDragDetectorDragStyle.TranslateLine  -- Beschränkt das Ziehen auf Linie
uiDragDetector.BoundingUI = sliderContainer

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

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

-- Ändere die Transparenz basierend darauf, wie viel in der Skala gezogen wurde
uiDragDetector.DragContinue:Connect(function(inputPosition)
	sliderContainer.BackgroundTransparency = 1 - handle.Position.X.Scale
end)

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

Positions- & Rotationsänderungen

Zusätzlich zu Ereignissignalen können Sie Änderungen an den DragUDim2 und/oder DragRotation-Eigenschaften 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 Änderungen an der Ziehrotation über Instance:GetPropertyChangedSignal() erkannt werden.

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

uiDragDetector.DragStyle = Enum.UIDragDetectorDragStyle.Rotate  -- Setze den 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

-- Setze den Farbton zunächst auf die Griffrotation
changeHue()

-- Verbinde die Funktion mit GetPropertyChangedSignal() der Dragrotation des Detektors
uiDragDetector:GetPropertyChangedSignal("DragRotation"):Connect(changeHue)

Skriptierten Ziehstil

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

Standardmäßig sind die zurückgegebenen UDim2 und der Float die endgültige gewünschte Position/Rotation im lokalen Raum des übergeordneten Detektors. Vorhandene Übersetzungs-/Rotationsgrenzen gelten weiterhin, ebenso wie die durch eine bestimmte BoundingUI-Instanz auferlegten Begrenzungen.

Das folgende Beispiel zieht ein UI-Element, das einer Sinuswelle folgt, die durch die Änderung der X-Koordinate des Eingabepunkts berechnet wird. Beachten Sie, dass der DragSpace des Detektors auf Enum.UIDragDetectorDragSpace.Relative gesetzt ist.

local frame = script.Parent  -- UI-Element zum Ziehen
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-Delta, damit es "nach oben" auf dem Bildschirm mit positiver Y-Änderung 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 für Raster und Snapping, 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 erlaubte Bewegungsbereiche definieren. Beachten Sie, dass dies vor bestehenden Übersetzungs-/Rotationsgrenzen angewendet wird.

Das folgende Beispiel verwendet eine Einschränkungsfunktion, die die planare Ziehung in ein X/Y-Raster basierend auf der Anzahl der Zeilen und Spalten einschränkt. Beachten Sie, dass der ResponseStyle des Detektors auf Enum.UIDragDetectorResponseStyle.Scale gesetzt ist und seine BoundingUI auf den Rastercontainer gesetzt ist.

-- Hierarchie ist GridContainer ⟩ Handle ⟩ UIDragDetector ⟩ (dieses Skript)
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  -- Setze Ziehen nach Maßstab
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)