Détecteurs de glisser de l'UI

L'instance UIDragDetector facilite et encourage l'interaction avec les éléments de l'interface utilisateur 2D dans une expérience, tels que les curseurs, les molettes, et plus encore. Les principales fonctionnalités incluent :

• Placez un UIDragDetector sous n'importe quelle instance de GuiObject pour le rendre déplaçable via toutes les entrées utilisateur sans une seule ligne de code.

• Choisissez parmi plusieurs options de DragStyle, définissez comment l'objet réagit au mouvement via ResponseStyle, et appliquez éventuellement des axes, des limites de mouvement ou des frontières de glissement.

• Les scripts peuvent réagir à la manipulation des objets déplacés pour conduire des réponses logiques, comme ajuster des paramètres.

• Les UIDragDetectors fonctionnent en mode édition et de lecture dans Studio tant que vous n'utilisez pas les outils Sélectionner, Déplacer, Échelle ou Rotation, ni certains plugins ou outils d'édition d'UI de Studio.

Rendre les éléments de l'UI déplaçables

Pour rendre n'importe quelle instance de GuiObject déplaçable, ajoutez simplement un UIDragDetector comme descendant direct.

1. Dans la fenêtre Explorateur, survolez l'instance GuiObject et cliquez sur le bouton ⊕. Un menu contextuel s'affiche.

2. Dans le menu, insérez un UIDragDetector.

   

3. Par défaut, l'objet sera maintenant déplaçable dans l'interface LayerCollector.

Personnaliser les détecteurs de glisser de l'UI

Style de glissement

Les UIDragDetectors mappent le mouvement du curseur pour calculer le mouvement 2D proposé et/ou la rotation. Grâce à la propriété DragStyle, vous pouvez choisir parmi différents mappages pour convenir à vos besoins. Par exemple, Enum.UIDragDetectorDragStyle.TranslatePlane produit une translation dans le plan 2D du LayerCollector, tandis que Enum.UIDragDetectorDragStyle.Rotate produit normalement une rotation au lieu d'une translation.

Direction de glissement

Par défaut, le mouvement 2D et le DragStyle associé se mappent à l'espace de l'ancêtre LayerCollector. Toutefois, vous pouvez vouloir changer le ReferenceUIInstance ou l'DragAxis lors de la construction de différents composants de l'UI.

Réponse au mouvement

La propriété UIDragDetector.ResponseStyle spécifie comment la valeur de position d'un objet est modifiée par le mouvement proposé. Les styles de réponse personnalisés vous permettent d'utiliser les valeurs résultantes UIDragDetector.DragUDim2 et UIDragDetector.DragRotation comme désiré, sans que le parent du détecteur n'exécute le mouvement proposé.

Limites de translation & rotation

Par défaut, il n'y a pas de limites lors du mouvement 2D en raison des restrictions inhérentes du DragStyle. Les limites pour les translations et rotations minimales et maximales peuvent être déclarées avec les propriétés suivantes si désiré. De plus, vous pouvez définir comment l'objet déplacé est contraint dans les limites d'un GuiObject spécifié tel qu'un Frame.

Ajustements de vitesse

À travers SelectionModeDragSpeed et SelectionModeRotateSpeed, vous pouvez peaufiner les vitesses maximales de glissement/rotation pour un détecteur. De plus, à travers UIDragSpeedAxisMapping, vous pouvez peaufiner les vitesses de glissement dans la dimension X/Y, basées sur le SelectionModeDragSpeed du détecteur.

Réponses des scripts au clic et au glissement

À travers les signaux d'événements, les changements de propriétés, le style de glissement Scriptable, et des fonctions personnalisées, les scripts peuvent réagir à la manipulation des éléments UI déplacés pour conduire divers paramètres ou prendre des décisions logiques, tels que des curseurs qui ajustent le volume de musique et d'effets sonores séparément.

Signaux d'événements

À travers les signaux d'événements suivants, vous pouvez détecter quand un utilisateur commence, continue et termine de glisser un objet.

Le curseur suivant désigne son conteneur comme étant le BoundingUI pour limiter son mouvement à l'intérieur de la zone du conteneur, permettant au glissement basé sur l'échelle TranslateLine d’être limité à la pleine largeur du conteneur sans scripts supplémentaires.

UIDragDetector - Changement de transparence du signal d'événement
-- La hiérarchie est SliderContainer ⟩ Handle ⟩ UIDragDetector ⟩ (ce script)
local sliderContainer = script.Parent.Parent.Parent
local handle = sliderContainer:FindFirstChild("Handle")
local uiDragDetector = handle:FindFirstChildWhichIsA("UIDragDetector")

uiDragDetector.ResponseStyle = Enum.UIDragDetectorResponseStyle.Scale  -- Définir le glissement par échelle
uiDragDetector.DragStyle = Enum.UIDragDetectorDragStyle.TranslateLine  -- Restreint le glissement à une ligne
uiDragDetector.BoundingUI = sliderContainer

-- Définir initialement la transparence du conteneur à la valeur d'échelle X de la poignée
sliderContainer.BackgroundTransparency = 1 - handle.Position.X.Scale

-- Agrandir la bordure de la poignée pour indiquer le début de la prise
uiDragDetector.DragStart:Connect(function(inputPosition)
	handle:FindFirstChildWhichIsA("UIStroke").Thickness = 6
end)

-- Changer la transparence selon le glissement dans l'échelle
uiDragDetector.DragContinue:Connect(function(inputPosition)
	sliderContainer.BackgroundTransparency = 1 - handle.Position.X.Scale
end)

-- Rétrograder la bordure de la poignée pour indiquer la fin de la prise
uiDragDetector.DragEnd:Connect(function(inputPosition)
	handle:FindFirstChildWhichIsA("UIStroke").Thickness = 4
end)

Changements de position & rotation

En plus des signaux d'événements, vous pouvez surveiller les changements des propriétés DragUDim2 et/ou DragRotation du détecteur directement.

Le détecteur suivant a son DragStyle défini sur Rotate, permettant aux utilisateurs de faire glisser la poignée autour de l'anneau de rotation de teinte, tout en détectant les changements de rotation du glissement via Instance:GetPropertyChangedSignal().

UIDragDetector - Changement de DragRotation
local handle = script.Parent.Parent  -- Élément UI à glisser
local uiDragDetector = handle:FindFirstChildWhichIsA("UIDragDetector")

uiDragDetector.DragStyle = Enum.UIDragDetectorDragStyle.Rotate  -- Définir le style de glissement sur rotation

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

-- Définir initialement la teinte selon la rotation de la poignée
changeHue()

-- Connecter la fonction à GetPropertyChangedSignal() de la rotation de glissement du détecteur
uiDragDetector:GetPropertyChangedSignal("DragRotation"):Connect(changeHue)

Style de glissement scripté

Si vous définissez le UIDragDetector.DragStyle d'un détecteur sur Enum.UIDragDetectorDragStyle.Scriptable, vous pouvez fournir votre propre fonction qui prend en entrée un Vector2 de la position d'entrée et renvoie un UDim2 (position) et un float (rotation). Le détecteur mettra à jour l'objet à la position/rotation calculée en fonction des retours, de la propriété DragSpace, et de la propriété DragRelativity.

Par défaut, les valeurs retournées UDim2 et float seront la position/rotation finale souhaitée dans l'espace local du parent du détecteur. Les limites de translation/rotation existantes s'appliqueront toujours, tout comme les limites imposées par une instance BoundingUI spécifiée.

L'exemple suivant fait glisser un élément UI en suivant une onde sinusoïdale calculée par le changement de coordonnée X de l'entrée. Notez que l'espace de glissement du détecteur DragSpace est défini sur Enum.UIDragDetectorDragSpace.Relative.

UIDragDetector - Drag suivant une onde sinusoïdale
local frame = script.Parent  -- Élément UI à glisser
local uiDragDetector = frame:FindFirstChildWhichIsA("UIDragDetector")

local initialXValue = 0
local maxHeightChange = 200
local pixelsPerRadian = 75  -- Diminuez cette valeur pour augmenter la fréquence

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

local function computeSinWaveCoordinate(inputPosition)
	local deltaX = inputPosition.X - initialXValue
	-- Delta Y négatif afin qu'il monte à l'écran avec un changement positif en Y
	local deltaY = -math.sin(deltaX / pixelsPerRadian) * maxHeightChange
	return UDim2.fromOffset(deltaX, deltaY)
end

uiDragDetector:SetDragStyleFunction(computeSinWaveCoordinate)

Fonction contraignante personnalisée

Les UIDragDetectors n'ont pas de règles de mouvement intégrées concernant les grilles et les alignements, mais vous pouvez enregistrer des fonctions contraignantes personnalisées pour modifier les UIDragDetector.DragUDim2 et UIDragDetector.DragRotation du détecteur avant qu'elles ne soient appliquées. Par exemple, vous pouvez maintenir le mouvement sur une grille en arrondissant les positions à des incréments spécifiques, ou définir des zones de mouvement autorisées. Notez que cela est appliqué avant toute limite de translation/rotation existante.

L'exemple suivant utilise une fonction de contrainte qui limite le glissement plan à une grille X/Y basée sur le nombre de lignes et de colonnes. Notez que le style de réponse du détecteur ResponseStyle est défini sur Enum.UIDragDetectorResponseStyle.Scale et son BoundingUI est défini sur le conteneur de grille.

UIDragDetector - Glisser dans la grille, accrochant à des tuiles
-- La hiérarchie est GridContainer ⟩ Handle ⟩ UIDragDetector ⟩ (ce script)
local gridContainer = script.Parent.Parent.Parent
local handle = gridContainer:FindFirstChild("Handle")  -- Élément UI à glisser
local uiDragDetector = handle:FindFirstChildWhichIsA("UIDragDetector")

uiDragDetector.ResponseStyle = Enum.UIDragDetectorResponseStyle.Scale  -- Définir le glissement par échelle
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)