Rilettori di trascinamento UI

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

• Posiziona un UIDragDetector sotto qualsiasi GuiObject istanza per renderla trascinabile attraverso tutti gli input dell'utente senza una singola linea di codice.

• Scegli tra diverse opzioni DragStyle , definisci come l'oggetto risponde alla moto attraverso ResponseStyle , e applica opzionalmente limiti di asse, movimento o confini di trascinamento.

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

• lavorare nella modalità di modifica e riproduzione di Studio finché non sei non utilizzando gli strumenti Seleziona , Movimento , Scala o Ruota , né alcuni plugin o strumenti dell'editor di Studio.

Rendi gli elementi dell'interfaccia utente draggabili

Per rendere qualsiasi GuiObject istanza trascinabile, aggiungi semplicemente un UIDragDetector come DIscendentediretto.

1. Nella finestra Explorer, passa il mouse sull'istanza GuiObject e fai clic sul pulsante ⊕. Viene visualizzato un menu contestuale.

2. Dal menu, inserisci un UIDragDetector .

   

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

Personalizza i rilevatori di trascinamento dell'interfaccia utente

Trascina lo stile

UIDragDetectors mappa la movimento del cursore per calcolare la moto e/o la rotazione proposta in 2D.Attraverso la ProprietàDragStyle puoi scegliere tra diverse mappe per soddisfare le tue esigenze.Ad esempio, Enum.UIDragDetectorDragStyle.TranslatePlane produce la traduzione nel piano 2D del LayerCollector , mentre Enum.UIDragDetectorDragStyle.Rotate produce normalmente una rotazione invece di una traduzione.

Trascina la direzione

Per impostazione predefinita, la mappa di movimento 2D e l' associata DragStyle mappa allo spazio dell'antenato LayerCollector .Tuttavia, potresti voler cambiare il ReferenceUIInstance o il DragAxis quando costruisci diversi componenti UI.

Risposta alla mozione

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

Limiti di traduzione e rotazione

Per impostazione predefinita, non ci sono limiti alla moto 2D dietro le restrizioni intrinseche del DragStyle .I limiti per entrambe le traduzioni minime e massime e le rotazioni possono essere dichiarati con le seguenti proprietà se desiderato.Inoltre, puoi definire come l'oggetto trascinato sia vincolato all'interno dei confini di un oggetto specificato GuiObject come un Frame .

Adeguamenti della velocità

Attraverso SelectionModeDragSpeed e SelectionModeRotateSpeed, puoi ottimizzare le velocità di trascinamento/rotazione massime per un rilevatore.Inoltre, attraverso UIDragSpeedAxisMapping , puoi ottimizzare le velocità di trascinamento della dimensione X / Y , in base alle velocità del rilevatore SelectionModeDragSpeed.

Risposte dello script al clic e al trascinamento

Tramite segnali di evento , modifiche di proprietà, Scriptable stile di trascinamento e funzioni personalizzate, gli script possono rispondere alla manipolazione di elementi UI trascinati per guidare diverse impostazioni o prendere decisioni logiche, come slider che regolano separatamente il volume della musica e degli effetti sonori.

Segnali di evento

Attraverso i seguenti segnali di evento, puoi rilevare quando un utente inizia, continua e termina trascinando un oggetto.

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

UIDragDetector - Cambio di trasparenza del segnale evento
-- La gerarchia è SliderContainer ⟩ Gestore ⟩ 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 trascinamento per Ridimensionare
uiDragDetector.DragStyle = Enum.UIDragDetectorDragStyle.TranslateLine  -- Rimuove il trascinamento alla linea
uiDragDetector.BoundingUI = sliderContainer

-- Inizialmente imposta la trasparenza del contenitore al valore di scala X della gestire
sliderContainer.BackgroundTransparency = 1 - handle.Position.X.Scale

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

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

-- Ripristina il bordo dell'impugnatura per indicare la Terminaredella presa
uiDragDetector.DragEnd:Connect(function(inputPosition)
	handle:FindFirstChildWhichIsA("UIStroke").Thickness = 4
end)

Posizione e cambi di rotazione

Oltre ai segnali di evento , puoi monitorare le modifiche alle proprietà del rilevatore DragUDim2 e/o DragRotation direttamente

Il seguente rilevatore ha il suo DragStyle impostato su Rotate , consentendo agli utenti di trascinare la maniglia intorno al cerchio del rotatore del colore, tutto mentre rileva le modifiche per trascinare la rotazione attraverso Instance:GetPropertyChangedSignal() .

UIDragDetector - Cambio Rotazione Drag
local handle = script.Parent.Parent  -- Elemento UI da trascinare
local uiDragDetector = handle:FindFirstChildWhichIsA("UIDragDetector")

uiDragDetector.DragStyle = Enum.UIDragDetectorDragStyle.Rotate  -- Imposta lo stile di trascinamento per Rotare

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

-- Inizialmente imposta il colore per gestire la rotazione
changeHue()

-- Funzione di connessione a GetPropertyChangedSignal() della rotazione trascinamento del rilevatore
uiDragDetector:GetPropertyChangedSignal("DragRotation"):Connect(changeHue)

Stile di trascinamento scriptato

Se impostate il UIDragDetector.DragStyle di un rilevatore su Enum.UIDragDetectorDragStyle.Scriptable , potete fornire la vostra funzione che prende in input una Vector2 della posizione di input e restituisce una UDim2 (posizione) e un float (rotazione).Il rilevatore aggiornerà l'oggetto alla posizione/rotazione calcolata in base ai ritorni, alla ProprietàDragSpace e alla ProprietàDragRelativity.

Per impostazione predefinita, il ritorno e il galleggiante saranno la posizione/rotazione finale desiderata nello spazio locale del parentdel rilevatore.Le esistenti limitazioni di traduzione/rotazione continueranno ad applicarsi, così come le limitazioni di confine imposte da un'esempiospecificata BoundingUI .

L'esempio seguente trascina un elemento UI dopo una onde sinusoidale calcolata dal cambiamento nell'input di coordinate X .Nota che il rilevatore di DragSpace è impostato su Enum.UIDragDetectorDragSpace.Relative .

UIDragDetector - Trascina la seguente onda sinusoidale
local frame = script.Parent  -- Elemento UI da trascinare
local uiDragDetector = frame:FindFirstChildWhichIsA("UIDragDetector")

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

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

local function computeSinWaveCoordinate(inputPosition)
	local deltaX = inputPosition.X - initialXValue
	-- Delta Y negativo 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

UIDragDetectors non hanno regole di movimento integrate sulle griglie e lo snap, ma puoi registrare funzioni di vincolo personalizzate per modificare il rilevatore di UIDragDetector.DragUDim2 e UIDragDetector.DragRotation prima che vengano applicate.Ad esempio, puoi mantenere la velocità su una griglia arrotondando le posizioni a incrementi specifici o definendo le aree di movimento consentite.Si noti che questo viene applicato prima di qualsiasi limite di traduzione/rotazione esistente.

L'esempio seguente utilizza una funzione di vincolo che avvolge il trascinamento piano in una griglia X / Y in base al numero di righe e colonne.Nota che il rilevatore di ResponseStyle è impostato su Enum.UIDragDetectorResponseStyle.Scale e il suo BoundingUI è impostato sul container di griglia.

UIDragDetector - Trascina in griglia, agganciando ai piastrelle
-- La gerarchia è GridContainer ⟩ Gestore ⟩ 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 trascinamento per Ridimensionare
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)