Détecteurs de glissement de l'interface utilisateur

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

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

• Choisissez parmi plusieurs options DragStyle , définissez la façon dont l'objet répond à la mobilité via ResponseStyle , et appliquez facultativement des axes, des limites de mouvement ou des limites de glissement.

• Les scripts peuvent répondre à la manipulation d'objets glissés pour déclencher des réponses logiques, telles que l'ajustement des paramètres.

• travaillez dans le mode d'édition et de lecture du studio aussi longtemps que vous n'utilisez pas pas l'outil sélectionner , déplacer , échelle ou tourner les outils, ni certains plugins ou outils de l'éditeur de Studio.

Rendre les éléments d'interface utilisateur glissables

Pour rendre toutes les instances GuiObject glissables, ajoutez simplement un UIDragDetector en tant que descendant direct.

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

2. Dans le menu, insérez un détecteur d'UIDrag .

   

3. Par défaut, l'objet sera maintenant glissable dans l'interface LayerCollector.

Personnaliser les détecteurs de glissement de l'interface utilisateur

Glisser le style

UIDragDetectors déplacer le curseur de la carte pour calculer la motion et/ou la rotation 2D proposée.Grâce à la propriété DragStyle, vous pouvez choisir parmi différentes mises en correspondance pour répondre à vos besoins.Par exemple, Enum.UIDragDetectorDragStyle.TranslatePlane produit une traduction dans le plan 2D du LayerCollector, alors que Enum.UIDragDetectorDragStyle.Rotate produit normalement une rotation au lieu d'une traduction.

Diréction de glissement

Par défaut, le mouvement 2D et la carte associée DragStyle dans l'espace de l'ancêtre LayerCollector .Cependant, vous pouvez vouloir modifier le ReferenceUIInstance ou le DragAxis lors de la construction de différents composants d'interface utilisateur.

Réponse à la motion

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

Limites de traduction et de rotation

Par défaut, il n'y a pas de limites à la mobilité 2D derrière les restrictions inhérentes du DragStyle .Les limites pour les traductions et les rotations minimales et maximales peuvent être déclarées avec les propriétés suivantes si nécessaire.De plus, vous pouvez définir comment l'objet glissé est contraint dans les limites d'un objet spécifié GuiObject comme un Frame .

Ajustements de vitesse

Grâce à SelectionModeDragSpeed et SelectionModeRotateSpeed, vous pouvez peaufiner la vitesse maximale de traction/ rotation pour un détecteur.De plus, via , vous pouvez ajuster la vitesse de glissement de la dimension X / Y , en fonction de la vitesse du détecteur ».

Réponses de script au clic et au glissement

Par le biais de signaux d'événement, de modifications de propriété, de style de glisser, et de fonctions personnalisées, les scripts peuvent répondre à la manipulation des éléments d'interface utilisateur glissés pour piloter divers paramètres ou prendre des décisions logiques, tels que des curseurs qui ajustent le volume de la musique et des effets sonores séparément.

Signaux d'événement

Grâce aux signaux d'événement 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 pour limiter son mouvement dans la zone du conteneur, ce qui permet que le glisser-déposer basé sur l'échelle soit limité à la largeur complète du conteneur sans scriptingsupplémentaire.

UIDragDetector - Changement de la 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 redimensionner
uiDragDetector.DragStyle = Enum.UIDragDetectorDragStyle.TranslateLine  -- Restreint le glisser-déposer à la ligne
uiDragDetector.BoundingUI = sliderContainer

-- Définir initialement la transparence du conteneur à la valeur de la norme X de la contrôleur
sliderContainer.BackgroundTransparency = 1 - handle.Position.X.Scale

-- Étendez 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 la quantité qu'elle a traînée à l'redimensionner
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 terminer
uiDragDetector.DragEnd:Connect(function(inputPosition)
	handle:FindFirstChildWhichIsA("UIStroke").Thickness = 4
end)

Modifications de position et de rotation

En plus des signaux d'événement , vous pouvez surveiller les modifications des propriétés et/ou du détecteur directement.

Le détecteur suivant a son DragStyle réglé sur Rotate , permettant aux utilisateurs de faire glisser la poignée autour du cercle rotateur de teinte, tout en détectant les modifications pour faire glisser la rotation par le biais de Instance:GetPropertyChangedSignal() .

UIDragDetector - Changement de rotation de glissement
local handle = script.Parent.Parent  -- Élément d'interface utilisateur à glisser
local uiDragDetector = handle:FindFirstChildWhichIsA("UIDragDetector")

uiDragDetector.DragStyle = Enum.UIDragDetectorDragStyle.Rotate  -- Définir le style de glisser pour tourner

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 pour gérer la rotation
changeHue()

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

Style de glisser programmé

Si vous définissez la fonction d'un détecteur à UIDragDetector.DragStyle à Enum.UIDragDetectorDragStyle.Scriptable, vous pouvez fournir votre propre fonction qui prend une position d'entrée Vector2 et renvoie une position UDim2 (position) et une flotte (rotations).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 retourné et le flottement seront la position/rotations finale désirée dans l'espace local du parent du détecteur.Les limites de traduction/de rotation existantes s'appliqueront toujours, tout comme les limites de bord imposées par une instance spécifiée BoundingUI.

L'exemple suivant fait glisser un élément d'interface utilisateur après une onde sinusoïdale calculée par le changement de l'entrée de coordonnées X .Notez que le détecteur de DragSpace est réglé sur Enum.UIDragDetectorDragSpace.Relative .

UIDragDetector - Glisser une vague sinusoïdale suivante
local frame = script.Parent  -- Élément d'interface utilisateur à glisser
local uiDragDetector = frame:FindFirstChildWhichIsA("UIDragDetector")

local initialXValue = 0
local maxHeightChange = 200
local pixelsPerRadian = 75  -- Baissez 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 négatif Y afin qu'il aille "en haut" sur 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

UIDragDetectors ne pas avoir de règles de mouvement intégrées sur les grilles et la fixation, mais vous pouvez enregistrer des fonctions de contrainte 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 augmentations spécifiques, ou définir les zones de mouvement autorisées.Notez que ceci est appliqué avant toute limite de traduction/ rotation existante.

L'exemple suivant utilise une fonction de contrainte qui comprime le glissement planaire dans une grille X / Y en fonction du nombre de lignes et de colonnes.Notez que le détecteur de ResponseStyle est réglé sur Enum.UIDragDetectorResponseStyle.Scale et que son BoundingUI est réglé sur le conteneur de grille.

Détecteur d'UIDrag - Faire glisser dans la grille, en cliquant sur les tuiles
-- La hiérarchie est GridContainer ⟩ Handle ⟩ UIDragDetector ⟩ (ce script)
local gridContainer = script.Parent.Parent.Parent
local handle = gridContainer:FindFirstChild("Handle")  -- Élément d'interface utilisateur à glisser
local uiDragDetector = handle:FindFirstChildWhichIsA("UIDragDetector")

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