Detectores de arrastrado de interfaz de usuario

La instancia UIDragDetector facilita y alienta la interacción con elementos de interfaz de usuario 2D en una experiencia, como deslizadores, giradores y más.Las características clave incluyen:

• Coloca un UIDragDetector bajo cualquier instancia GuiObject para hacerla arrastrable a través de todas las entradas del usuario sin una sola línea de código.

• Elige entre varias opciones DragStyle , define cómo responde el objeto a la movilidad a través de ResponseStyle , y aplica opcionalmente límites de eje, movimiento o bordes de arrastre.

• Los scripts pueden responder a la manipulación de objetos arrastrados para impulsar respuestas lógicas, como ajustar configuraciones.

• UIDragDetectors trabaja en el modo de edición y reproducción de Studio mientras tanto que estés no usando las herramientas Seleccionar , Mover , Escalar o Rotar , ni ciertos plugins o herramientas del editor de UI de Studio.

Hacer que los elementos de la interfaz sean arrastrables

Para hacer que cualquier instancia GuiObject sea arrastrable, simplemente agregue un UIDragDetector como descendiente directo.

1. En la ventana Explorador, pasa el mouse sobre la instancia GuiObject y haz clic en el botón ⊕. Se muestra un menú contextual.

2. Desde el menú, insira un UIDragDetector .

   

3. Por defecto, el objeto ahora será arrastrable en la interfaz LayerCollector.

Personalizar detectores de arrastrado de la interfaz de usuario

Estilo de arrastrar

UIDragDetectors mueve el cursor del mapa para calcular la propuesta de movimiento y/o rotación 2D.A través de la propiedad DragStyle, puedes elegir entre diferentes mapeos para satisfacer tus necesidades.Por ejemplo, Enum.UIDragDetectorDragStyle.TranslatePlane produce traducción en el plano 2D del LayerCollector , mientras que Enum.UIDragDetectorDragStyle.Rotate normalmente produce una rotación en lugar de traducción.

Dirección de arrastre

Por defecto, el movimiento 2D y el mapa asociado DragStyle al espacio del ancestro LayerCollector .Sin embargo, es posible que desees cambiar el ReferenceUIInstance o el DragAxis al construir diferentes componentes de interfaz de usuario.

Respuesta a la solicitud

La propiedad UIDragDetector.ResponseStyle especifica cómo se cambia el valor de posición de un objeto por la moción propuesta.Los estilos de respuesta personalizados te permiten usar los valores resultantes de UIDragDetector.DragUDim2 y UIDragDetector.DragRotation como desees, sin que el padre del detector ejecute la propuesta de movimiento.

Límites de traducción y rotación

Por defecto, no hay límites para la movimiento 2D detrás de las restricciones inherentes del DragStyle .Los límites para las traducciones y rotaciones mínimas y máximas se pueden declarar con las siguientes propiedades si se desea.Además, puedes definir cómo el objeto arrastrado se ve limitado dentro de los límites de un objeto especificado GuiObject como un Frame .

Ajustes de velocidad

A través de SelectionModeDragSpeed y SelectionModeRotateSpeed, puedes ajustar las velocidades máximas de arrastre/rotación para un detector.Además, a través de UIDragSpeedAxisMapping , puedes ajustar las velocidades de arrastre de la dimensión X / Y , basadas en la del detector SelectionModeDragSpeed.

Respuestas de script al hacer clic y arrastrar

A través de señales de evento , cambios de propiedad, Scriptable estilo de arrastrado, y funciones personalizadas, los scripts pueden responder a la manipulación de elementos de interfaz de usuario arrastrados para conducir varias configuraciones o tomar decisiones lógicas, como deslizadores que ajustan el volumen de música y efectos de sonido por separado.

Señales de evento

A través de las siguientes señales de evento, puedes detectar cuando un usuario comienza, continúa y termina arrastrando un objeto.

El siguiente control deslizador designa a su contenedor como el BoundingUI para limitar su movimiento dentro del área del contenedor, permitiendo que el arrastre basado en escalas TranslateLine se limite a la anchura completa del contenedor sin scripting adicional.

Detector de UIDrag - Cambio de transparencia de señal de evento
-- La jerarquía es SliderContainer ⟩ Handle ⟩ UIDragDetector ⟩ (este script)
local sliderContainer = script.Parent.Parent.Parent
local handle = sliderContainer:FindFirstChild("Handle")
local uiDragDetector = handle:FindFirstChildWhichIsA("UIDragDetector")

uiDragDetector.ResponseStyle = Enum.UIDragDetectorResponseStyle.Scale  -- Establecer arrastrado por redimensionar
uiDragDetector.DragStyle = Enum.UIDragDetectorDragStyle.TranslateLine  -- Restringe el arrastre a la línea
uiDragDetector.BoundingUI = sliderContainer

-- Inicialmente establecer la transparencia del contenedor al valor de escala X de la controlador
sliderContainer.BackgroundTransparency = 1 - handle.Position.X.Scale

-- Expandir el borde del control para indicar el iniciarde agarre
uiDragDetector.DragStart:Connect(function(inputPosition)
	handle:FindFirstChildWhichIsA("UIStroke").Thickness = 6
end)

-- Cambia la transparencia por cuánto se arrastró en redimensionar
uiDragDetector.DragContinue:Connect(function(inputPosition)
	sliderContainer.BackgroundTransparency = 1 - handle.Position.X.Scale
end)

-- Revertir el borde del controlador para indicar el final de finalizar
uiDragDetector.DragEnd:Connect(function(inputPosition)
	handle:FindFirstChildWhichIsA("UIStroke").Thickness = 4
end)

Cambios de posición y rotación

Además de las señales de evento , puedes monitorear los cambios en las propiedades DragUDim2 y/o DragRotation del detector directamente

El siguiente detector tiene su DragStyle configurado a Rotate , permitiendo a los usuarios arrastrar el mango alrededor del anillo rotador de tinte, todo mientras detectan cambios para arrastrar la rotación a través de Instance:GetPropertyChangedSignal() .

Detector de UIDrag - Cambio de rotación por arrastre
local handle = script.Parent.Parent  -- Elemento de interfaz de usuario para arrastrar
local uiDragDetector = handle:FindFirstChildWhichIsA("UIDragDetector")

uiDragDetector.DragStyle = Enum.UIDragDetectorDragStyle.Rotate  -- Establecer el estilo de arrastre para rotar

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

-- Inicialmente establecer el tono para manejar la rotación
changeHue()

-- Función de conexión a GetPropertyChangedSignal() de la rotación de arrastre del detector
uiDragDetector:GetPropertyChangedSignal("DragRotation"):Connect(changeHue)

Estilo de arrastrado programado

Si estableces el detector de UIDragDetector.DragStyle a Enum.UIDragDetectorDragStyle.Scriptable , puedes proporcionar tu propia función que tome una Vector2 de la posición de entrada y devuelva una UDim2 (posición) y un float (rotación).El detector actualizará el objeto a la posición/rotación computada en función de los regresos, la propiedad DragSpace y la propiedad DragRelativity.

Por defecto, el devuelto y flotante será la posición/rotación final deseada en el espacio local del padre del detector.Los límites de traducción/rotación existentes seguirán aplicándose, así como los límites de borde impuestos por una instancia especificada BoundingUI .

El siguiente ejemplo arrastra un elemento de interfaz de usuario siguiendo una onda de sine calculada por el cambio en la entrada de coordenadas X .Tenga en cuenta que el detector de DragSpace está configurado para Enum.UIDragDetectorDragSpace.Relative .

Detector de UIDrag - Arrastrar onda de sineo siguiente
local frame = script.Parent  -- Elemento de interfaz de usuario para arrastrar
local uiDragDetector = frame:FindFirstChildWhichIsA("UIDragDetector")

local initialXValue = 0
local maxHeightChange = 200
local pixelsPerRadian = 75  -- Baje este valor para aumentar la frecuencia

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

local function computeSinWaveCoordinate(inputPosition)
	local deltaX = inputPosition.X - initialXValue
	-- Delta negativo de Y para que vaya "arriba" en la pantalla con cambio de Y positivo
	local deltaY = -math.sin(deltaX / pixelsPerRadian) * maxHeightChange
	return UDim2.fromOffset(deltaX, deltaY)
end

uiDragDetector:SetDragStyleFunction(computeSinWaveCoordinate)

Función de restricción personalizada

UIDragDetectors no tienen reglas de movimiento integradas sobre cuadrículas y ajuste, pero puedes registrar funciones de restricción personalizadas para editar las UIDragDetector.DragUDim2 y UIDragDetector.DragRotation del detector antes de que se apliquen.Por ejemplo, puedes mantener el movimiento en una cuadrícula redondeando las posiciones a incrementos específicos o definiendo áreas de movimiento permitidas.Tenga en cuenta que esto se aplica antes de cualquier límite de traducción/rotación existente.

El siguiente ejemplo utiliza una función de restricción que clava el deslizamiento plano en una cuadrícula X / Y basada en el número de filas y columnas.Tenga en cuenta que el detector de ResponseStyle está configurado para Enum.UIDragDetectorResponseStyle.Scale y su BoundingUI está configurado para el contenedor de la cuadrícula.

Detector de UIDrag - Arrastrar en la cuadrícula, ajustándose a los azulejos
-- La jerarquía es GridContainer ⟩ Handle ⟩ UIDragDetector ⟩ (este script)
local gridContainer = script.Parent.Parent.Parent
local handle = gridContainer:FindFirstChild("Handle")  -- Elemento de interfaz de usuario para arrastrar
local uiDragDetector = handle:FindFirstChildWhichIsA("UIDragDetector")

uiDragDetector.ResponseStyle = Enum.UIDragDetectorResponseStyle.Scale  -- Establecer arrastrado por redimensionar
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)