Detectores de arrastamento de UI

A instância facilita e incentiva a interação com elementos de interface de usuário 2D em uma experiência, como sliders, spinners e muito mais.As principais características incluem:

• Coloque um UIDragDetector sob qualquer instância GuiObject para torná-la arrastável através de todos os inputs do usuário sem uma única linha de código.

• Escolha entre várias opções DragStyle de, defina como o objeto responde a movimentos através de ResponseStyle e aplique opcionalmente limites de eixo, movimento ou bordas de arrastamento.

• Scripts podem responder à manipulação de objetos arrastados para impulsionar respostas lógicas, como ajustar configurações.

• trabalhar no modo de edição e reprodução do Studio enquanto você estiver não usando as ferramentas Selecionar , Mover , Escala ou Girar , nem certos plugins ou ferramentas de editor do Studio.

Tornar os elementos de UI arrastáveis

Para tornar qualquer instância GuiObject arrastável, adicione simplesmente um UIDragDetector como Descendentedireto.

1. Na janela Explorer, passe o mouse sobre a instância GuiObject e clique no botão ⊕. Um menu contextual é exibido.

2. Do menu, insira um Detector de UIDrag .

   

3. Por padrão, o objeto agora será arrastável na interface LayerCollector .

Personalizar detectores de arrastamento de UI

Estilo de arrastar

UIDragDetectors mapear o movimento do cursor para calcular a movimentação e/ou rotação proposta de 2D.Através da propriedade DragStyle, você pode escolher entre diferentes mapeamentos para atender às suas necessidades.Por exemplo, Enum.UIDragDetectorDragStyle.TranslatePlane produz tradução no plano 2D do LayerCollector, enquanto Enum.UIDragDetectorDragStyle.Rotate normalmente produz uma rotação em vez de tradução.

Direção de arrastamento

Por padrão, 2D movimento e o mapa associado DragStyle ao espaço do ancestor LayerCollector .No entanto, você pode querer alterar o ReferenceUIInstance ou o DragAxis ao construir diferentes componentes de UI.

Resposta ao movimento

A propriedade UIDragDetector.ResponseStyle especifica como o valor da posição de um Objetoé alterado pela proposta de movimento.Os estilos de resposta personalizados permitem que você use os valores resultantes de UIDragDetector.DragUDim2 e UIDragDetector.DragRotation como desejar, sem que o pai do detector execute a proposta de movimento.

Limites de tradução e rotação

Por padrão, não há limites para a movimentação 2D atrás das restrições inerentes do DragStyle.Limites para traduções e rotações mínimas e máximas podem ser declarados com as seguintes propriedades, se desejado.Além disso, você pode definir como o objeto arrastado é restrito dentro dos limites de um objeto especificado GuiObject , como um Frame .

Ajustes de velocidade

Através de SelectionModeDragSpeed e SelectionModeRotateSpeed, você pode ajustar as velocidades máximas de arrasto/rotação para um detector.Além disso, através de UIDragSpeedAxisMapping , você pode ajustar as velocidades de arrastamento da dimensão X / Y , com base na velocidade do detector SelectionModeDragSpeed.

Respostas de script ao clicar e arrastar

Através de sinais de evento , alterações de propriedade, Scriptable estilo de arrastamento de propriedade e funções personalizadas, os scripts podem responder à manipulação de elementos de UI arrastados para dirigir várias configurações ou tomar decisões lógicas, como controle deslizante que ajusta o volume de música e efeito de som separadamente.

Sinais de evento

Através dos seguintes sinais de evento, você pode detectar quando um usuário começa, continua e termina arrastando um Objeto.

O seguinte controle deslizante designa seu contêiner como o BoundingUI para limitar seu movimento dentro da área do contêiner, permitindo que o arrastamento baseado em escala TranslateLine seja limitado à largura total do contêiner sem script extra.

Detector de UIDrag - Mudança de transparência do sinal de evento
-- Hierarquia é 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  -- Definir arrastamento por dimensionar/escalonar
uiDragDetector.DragStyle = Enum.UIDragDetectorDragStyle.TranslateLine  -- Restringe o arrastamento para a linha
uiDragDetector.BoundingUI = sliderContainer

-- Inicialmente, defina a transparência do contêiner para o valor de escala X da Manipulador / alça
sliderContainer.BackgroundTransparency = 1 - handle.Position.X.Scale

-- Expandir a borda do cabo para indicar o iniciarde agarrar
uiDragDetector.DragStart:Connect(function(inputPosition)
	handle:FindFirstChildWhichIsA("UIStroke").Thickness = 6
end)

-- Altere a transparência pelo quanto ela foi arrastada na dimensionar/escalonar
uiDragDetector.DragContinue:Connect(function(inputPosition)
	sliderContainer.BackgroundTransparency = 1 - handle.Position.X.Scale
end)

-- Reverter a borda do cabo para indicar o fim da terminar/parar/sair
uiDragDetector.DragEnd:Connect(function(inputPosition)
	handle:FindFirstChildWhichIsA("UIStroke").Thickness = 4
end)

Mudanças de posição e rotação

Além dos sinais de evento , você pode monitorar as alterações nas propriedades e/ou do detector diretamente.

O seguinte detector tem seu DragStyle definido para Rotate, permitindo que os usuários arrastem o cabo ao redor do anel de rotação de tom, enquanto detectam mudanças para arrastar a rotação através de Instance:GetPropertyChangedSignal().

Detector de UIDrag - Mudança de Rotação de Drag
local handle = script.Parent.Parent  -- Elemento de UI para arrastar
local uiDragDetector = handle:FindFirstChildWhichIsA("UIDragDetector")

uiDragDetector.DragStyle = Enum.UIDragDetectorDragStyle.Rotate  -- Defina o estilo de arrastamento para girar

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 defina o tom para lidar com a rotação
changeHue()

-- Função de conexão para GetPropertyChangedSignal() da rotação de arrasto do detector
uiDragDetector:GetPropertyChangedSignal("DragRotation"):Connect(changeHue)

Estilo de arrastamento programado

Se você definir um detector de UIDragDetector.DragStyle para Enum.UIDragDetectorDragStyle.Scriptable , você pode fornecer sua própria função que recebe um Vector2 da posição de entrada e retorna um UDim2 (posição) e um float (rotação).O detector atualizará o objeto para a posição/rotação computada com base nas devoluções, na propriedade DragSpace e na propriedade DragRelativity.

Por padrão, o retornado e flutuação será a posição/rotação final desejada no espaço local do pai do detector.Os limites de tradução/rotação existentes ainda se aplicarão, assim como os limites de borda impostos por uma instância especificada BoundingUI .

O seguinte exemplo arrasta um elemento de UI após uma onda de sine calculada pela mudança na entrada de coordenadas X .Observe que o detector de DragSpace é definido como Enum.UIDragDetectorDragSpace.Relative .

Detector de UIDrag - Dragir onda sinus seguinte
local frame = script.Parent  -- Elemento de UI para arrastar
local uiDragDetector = frame:FindFirstChildWhichIsA("UIDragDetector")

local initialXValue = 0
local maxHeightChange = 200
local pixelsPerRadian = 75  -- Diminua esse valor para aumentar a frequência

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

local function computeSinWaveCoordinate(inputPosition)
	local deltaX = inputPosition.X - initialXValue
	-- Delta negativo de Y para que ele vá "para cima" na tela com mudança positiva de Y
	local deltaY = -math.sin(deltaX / pixelsPerRadian) * maxHeightChange
	return UDim2.fromOffset(deltaX, deltaY)
end

uiDragDetector:SetDragStyleFunction(computeSinWaveCoordinate)

Função de restrição personalizada

UIDragDetectors não tem regras de movimento integradas sobre redes e encaixe, mas você pode registrar funções de restrição personalizadas para editar o detector UIDragDetector.DragUDim2 e UIDragDetector.DragRotation antes que sejam aplicadas.Por exemplo, você pode manter a movimentação em uma grade arredondando posições para incrementos específicos ou definir áreas de movimento permitidas.Observe que isso é aplicado antes de quaisquer limites de tradução/rotação existentes.

O seguinte exemplo utiliza uma função de restrição que prende o arrasto plano em uma grade X / Y com base no número de linhas e colunas.Observe que o detector de ResponseStyle é definido para Enum.UIDragDetectorResponseStyle.Scale e seu BoundingUI é definido para o contêiner de grade.

Detector de UIDrag - Arraste na Grade, Ajustando-se aos Azulejos
-- Hierarquia é GridContainer ⟩ Handle ⟩ UIDragDetector ⟩ (este script)
local gridContainer = script.Parent.Parent.Parent
local handle = gridContainer:FindFirstChild("Handle")  -- Elemento de UI para arrastar
local uiDragDetector = handle:FindFirstChildWhichIsA("UIDragDetector")

uiDragDetector.ResponseStyle = Enum.UIDragDetectorResponseStyle.Scale  -- Definir arrastamento por dimensionar/escalonar
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)