Détecteurs de glissement UI

L'instance UIDragDetector facilite et encourage l'interaction avec les éléments d'interface utilisateur 2D dans un jeu, tels que les curseurs, les sélecteurs, et plus encore. Les principales caractéristiques incluent :

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

• Choisissez parmi plusieurs options 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épondre à la manipulation des objets glissés pour déclencher des réponses logiques, telles que l'ajustement des paramètres.

• Les UIDragDetectors fonctionnent en mode édition et jeu de Studio tant que vous n'utilisez pas les outils Sélectionner, Déplacer, Échelle, ou Faire pivoter, ni certains plugins ou outils de l'éditeur UI de Studio.

Rendre les éléments UI glissables

Pour rendre n'importe quelle instance GuiObject glissable, ajoutez simplement un UIDragDetector en tant que 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 glissable dans l'interface LayerCollector.

Personnaliser les détecteurs de glissement 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 répondre à 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. Cependant, vous pouvez vouloir changer le ReferenceUIInstance ou le DragAxis lors de la construction de différents composants 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 de UIDragDetector.DragUDim2 et UIDragDetector.DragRotation comme vous le souhaitez, sans que le parent du détecteur n'exécute le mouvement proposé.

Limites de translation et de rotation

Par défaut, il n'y a pas de limites au mouvement 2D en dehors des restrictions inhérentes du DragStyle. Des 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 glissé est contraint dans les limites d'un GuiObject spécifié tel qu'un Frame.

Ajustements de vitesse

Grâce à SelectionModeDragSpeed et SelectionModeRotateSpeed, vous pouvez affiner les vitesses maximales de glissement/rotation pour un détecteur. De plus, grâce à UIDragSpeedAxisMapping, vous pouvez affiner les vitesses de glissement en dimension X/Y, basées sur la SelectionModeDragSpeed du détecteur.

Réponses des scripts aux clics et glissements

Grâce aux signaux d'événements, aux changements de propriétés, au style de glissement Scriptable, et aux fonctions personnalisées, les scripts peuvent répondre à la manipulation des éléments UI glissés pour déclencher divers paramètres ou prendre des décisions logiques, telles que des curseurs qui ajustent séparément le volume de la musique et des effets sonores.

Signaux d'événements

Grâce aux signaux d'événements suivants, vous pouvez détecter quand un utilisateur commence, continue et termine le glissement d'un objet.

Le curseur suivant désigne son conteneur comme 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 script supplémentaire.

-- 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

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

-- Élargir 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 en fonction de combien il a glissé en échelle
uiDragDetector.DragContinue:Connect(function(inputPosition)
	sliderContainer.BackgroundTransparency = 1 - handle.Position.X.Scale
end)

-- Revenir à 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 et de 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 glisser la poignée autour de l'anneau de rotation de teinte, tout en détectant les changements de rotation de glissement via Instance:GetPropertyChangedSignal().

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

-- Initialement, définir la teinte à la rotation de la poignée
changeHue()

-- Connecter la fonction au 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 retourne 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, le UDim2 et le float retournés seront la position/rotation finale désirée dans l'espace local du parent du détecteur. Les limites de translation/rotation existantes s'appliqueront toujours, tout comme les limites de frontière imposées par une instance BoundingUI spécifiée.

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

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 pour qu'il aille "vers le haut" à l'écran avec un changement Y positif
	local deltaY = -math.sin(deltaX / pixelsPerRadian) * maxHeightChange
	return UDim2.fromOffset(deltaX, deltaY)
end

uiDragDetector:SetDragStyleFunction(computeSinWaveCoordinate)

Fonction de contrainte personnalisée

Les UIDragDetectors n'ont pas de règles de mouvement intégrées concernant les grilles et l'accrochage, mais vous pouvez enregistrer des fonctions de contrainte personnalisées pour modifier le UIDragDetector.DragUDim2 et le UIDragDetector.DragRotation du détecteur avant qu'ils ne soient appliqués. 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 en fonction du nombre de lignes et de colonnes. Notez que le ResponseStyle du détecteur est défini sur Enum.UIDragDetectorResponseStyle.Scale et son BoundingUI est défini sur le conteneur de la grille.

-- 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)