Rilevatori di trascinamento UI

L'istanza UIDragDetector facilita e incoraggia l'interazione con elementi dell'interfaccia utente 2D in un'esperienza, come cursori, giranti e altro ancora. Le caratteristiche principali includono:

• Posizionare un UIDragDetector sotto qualsiasi istanza di GuiObject per renderlo trascinabile tramite tutti gli input dell'utente senza una singola riga di codice.

• Scegliere tra diverse opzioni di DragStyle, definire come l'oggetto risponde al movimento tramite ResponseStyle, e applicare facoltativamente assi, limiti di movimento o confini di trascinamento.

• Gli script possono rispondere alla manipolazione degli oggetti trascinati per guidare risposte logiche, come l'aggiustamento delle impostazioni.

• I UIDragDetectors funzionano nella modalità di modifica e riproduzione di Studio purché tu non stia utilizzando gli strumenti Seleziona, Muovi, Scala o Ruota, né determinati plugin o strumenti dell'editor UI di Studio.

Rendi gli elementi UI trascinabili

Per rendere qualsiasi istanza di GuiObject trascinabile, basta aggiungere un UIDragDetector come discendente diretto.

1. Nella finestra Explorer, passa sopra l'istanza di GuiObject e clicca sul pulsante ⊕. Viene visualizzato un menu contestuale.

2. Dal menu, inserisci un UIDragDetector.

   

3. Per impostazione predefinita, l'oggetto sarà ora trascinabile nell'interfaccia di LayerCollector.

Personalizza i rilevatori di trascinamento UI

Stile di trascinamento

I UIDragDetectors mappano il movimento del cursore per calcolare il movimento 2D proposto e/o la rotazione. Tramite la proprietà DragStyle, puoi scegliere tra diverse mappature per soddisfare le tue esigenze. Ad esempio, Enum.UIDragDetectorDragStyle.TranslatePlane produce una traduzione nel piano 2D del LayerCollector, mentre Enum.UIDragDetectorDragStyle.Rotate normalmente produce una rotazione invece di una traduzione.

Direzione di trascinamento

Per impostazione predefinita, il movimento 2D e il relativo DragStyle mappano allo spazio del genitore LayerCollector. Tuttavia, potresti voler cambiare il ReferenceUIInstance o il DragAxis quando crei diversi componenti UI.

Risposta al movimento

La proprietà UIDragDetector.ResponseStyle specifica come viene modificato il valore di posizione di un oggetto dal movimento proposto. Gli stili di risposta personalizzati ti consentono di utilizzare i valori risultanti UIDragDetector.DragUDim2 e UIDragDetector.DragRotation come desideri, senza che il genitore del rilevatore esegua il movimento proposto.

Limiti di traduzione e rotazione

Per impostazione predefinita, non ci sono limiti al movimento 2D oltre le restrizioni inerenti dello DragStyle. I limiti sia per le traduzioni che per le rotazioni minime e massime possono essere dichiarati con le seguenti proprietà, se desiderato. Inoltre, puoi definire come l'oggetto trascinato è vincolato all'interno dei confini di un determinato GuiObject, come un Frame.

Regolazioni della velocità

Attraverso SelectionModeDragSpeed e SelectionModeRotateSpeed, puoi regolare le velocità massime di trascinamento/rotazione per un rilevatore. Inoltre, tramite UIDragSpeedAxisMapping, puoi affinare le velocità di trascinamento nelle dimensioni X/Y, in base alla SelectionModeDragSpeed del rilevatore.

Risposte degli script ai clic e al trascinamento

Attraverso segni di evento, cambiamenti di proprietà, stile di trascinamento Scriptable, e funzioni personalizzate, gli script possono rispondere alla manipolazione degli elementi UI trascinati per guidare varie impostazioni o prendere decisioni logiche, come cursori che regolano separatamente il volume della musica e degli effetti sonori.

Segni di evento

Attraverso i seguenti segni di evento, puoi rilevare quando un utente inizia, continua e termina il trascinamento di un oggetto.

Il seguente cursore designa il suo contenitore come il BoundingUI per limitare il suo movimento all'interno dell'area del contenitore, consentendo al trascinamento basato sulla scala TranslateLine di essere limitato all'intera larghezza del contenitore senza ulteriore scripting.

UIDragDetector - Cambiamento di Trasparenza da Segnale Evento
-- La gerarchia è SliderContainer ⟩ Handle ⟩ UIDragDetector ⟩ (questo script)
local sliderContainer = script.Parent.Parent.Parent
local handle = sliderContainer:FindFirstChild("Handle")
local uiDragDetector = handle:FindFirstChildWhichIsA("UIDragDetector")

uiDragDetector.ResponseStyle = Enum.UIDragDetectorResponseStyle.Scale  -- Imposta il trascinamento per scala
uiDragDetector.DragStyle = Enum.UIDragDetectorDragStyle.TranslateLine  -- Limita il trascinamento a linee
uiDragDetector.BoundingUI = sliderContainer

-- Imposta inizialmente la trasparenza del contenitore al valore di scala X della maniglia
sliderContainer.BackgroundTransparency = 1 - handle.Position.X.Scale

-- Espandi il bordo della maniglia per indicare l'inizio della presa
uiDragDetector.DragStart:Connect(function(inputPosition)
	handle:FindFirstChildWhichIsA("UIStroke").Thickness = 6
end)

-- Cambia la trasparenza in base a quanto è stato trascinato in scala
uiDragDetector.DragContinue:Connect(function(inputPosition)
	sliderContainer.BackgroundTransparency = 1 - handle.Position.X.Scale
end)

-- Riporta il bordo della maniglia per indicare la fine della presa
uiDragDetector.DragEnd:Connect(function(inputPosition)
	handle:FindFirstChildWhichIsA("UIStroke").Thickness = 4
end)

Cambiamenti di posizione e rotazione

Oltre ai segni di evento, puoi monitorare i cambiamenti delle proprietà DragUDim2 e/o DragRotation del rilevatore direttamente.

Il seguente rilevatore ha il suo DragStyle impostato su Rotate, consentendo agli utenti di trascinare la maniglia attorno all'anello del rotatore di tonalità, tutto mentre si rilevano i cambiamenti alla rotazione di trascinamento tramite Instance:GetPropertyChangedSignal().

UIDragDetector - Cambiamento di DragRotation
local handle = script.Parent.Parent  -- Elemento UI da trascinare
local uiDragDetector = handle:FindFirstChildWhichIsA("UIDragDetector")

uiDragDetector.DragStyle = Enum.UIDragDetectorDragStyle.Rotate  -- Imposta lo stile di trascinamento su ruota

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

-- Imposta inizialmente il colore della tonalità alla rotazione della maniglia
changeHue()

-- Collega la funzione a GetPropertyChangedSignal() della rotazione di trascinamento del rilevatore
uiDragDetector:GetPropertyChangedSignal("DragRotation"):Connect(changeHue)

Stile di trascinamento personalizzato

Se imposti il UIDragDetector.DragStyle di un rilevatore su Enum.UIDragDetectorDragStyle.Scriptable, puoi fornire la tua funzione che accetta un Vector2 della posizione di input e restituisce un UDim2 (posizione) e un numero in virgola mobile (rotazione). Il rilevatore aggiornerà l'oggetto alla posizione/rotazione calcolata basata sui ritorni, sulla proprietà DragSpace, e sulla proprietà DragRelativity.

Per impostazione predefinita, i UDim2 e i numeri in virgola mobile restituiti saranno la posizione/rotazione finale desiderata nello spazio locale del genitore del rilevatore. I limiti di traduzione/rotazione esistenti continueranno ad applicarsi, così come i limiti di confine imposti da un'istanza specificata di BoundingUI.

Il seguente esempio trascina un elemento UI seguendo un'onda sinusoidale calcolata dal cambiamento nella coordinata X di input. Nota che il DragSpace del rilevatore è impostato su Enum.UIDragDetectorDragSpace.Relative.

UIDragDetector - Trascinamento Seguendo Onda Sinusoidale
local frame = script.Parent  -- Elemento UI da trascinare
local uiDragDetector = frame:FindFirstChildWhichIsA("UIDragDetector")

local initialXValue = 0
local maxHeightChange = 200
local pixelsPerRadian = 75  -- Riduci questo valore per aumentare la frequenza

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

local function computeSinWaveCoordinate(inputPosition)
	local deltaX = inputPosition.X - initialXValue
	-- Negative Y delta in modo che vada "su" sullo schermo con cambiamento Y positivo
	local deltaY = -math.sin(deltaX / pixelsPerRadian) * maxHeightChange
	return UDim2.fromOffset(deltaX, deltaY)
end

uiDragDetector:SetDragStyleFunction(computeSinWaveCoordinate)

Funzione di vincolo personalizzata

I UIDragDetectors non hanno regole di movimento integrate riguardanti griglie e aggancio, ma puoi registrare funzioni di vincolo personalizzate per modificare il UIDragDetector.DragUDim2 e UIDragDetector.DragRotation del rilevatore prima che vengano applicate. Ad esempio, puoi mantenere il movimento su una griglia arrotondando le posizioni a incrementi specifici, o definire aree di movimento consentite. Nota che questo viene applicato prima di eventuali limiti di traduzione/rotazione esistenti.

Il seguente esempio utilizza una funzione di vincolo che limita il trascinamento planare a una griglia X/Y in base al numero di righe e colonne. Nota che la proprietà ResponseStyle del rilevatore è impostata su Enum.UIDragDetectorResponseStyle.Scale e la sua proprietà BoundingUI è impostata sul contenitore della griglia.

UIDragDetector - Traslazione nella Griglia, Agganciando ai Riquadri
-- La gerarchia è GridContainer ⟩ Handle ⟩ UIDragDetector ⟩ (questo script)
local gridContainer = script.Parent.Parent.Parent
local handle = gridContainer:FindFirstChild("Handle")  -- Elemento UI da trascinare
local uiDragDetector = handle:FindFirstChildWhichIsA("UIDragDetector")

uiDragDetector.ResponseStyle = Enum.UIDragDetectorResponseStyle.Scale  -- Imposta il trascinamento per scala
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)