Chemins 2D

L'instance Path2D, ainsi que ses méthodes et propriétés API, vous permet d'implémenter des splines 2D et des lignes courbes 2D, utiles pour des effets UI comme des animations basées sur des chemins et des éditeurs de graphiques.

Créer un chemin 2D

Pour ajouter un Path2D à l'écran ou à un objet dans l'expérience :

1. Dans la fenêtre Explorer, insérez une instance Path2D sous un ScreenGui ou SurfaceGui visible (il n'est pas nécessaire qu'il s'agisse d'un enfant direct).

   

2. Sélectionnez le nouveau Path2D pour révéler le widget d'outils dans le viewport. Par défaut, l'outil Ajouter un Point est sélectionné.

   

3. Commencez à cliquer sur l'écran pour ajouter une série de points de contrôle afin de former un chemin. Le chemin initial sera probablement imprécis, mais vous pourrez affiner la position de n'importe quel point de contrôle plus tard.

   

   Si vous faites glisser la souris après avoir cliqué, des tangentes seront créées sur ce point. Les tangentes peuvent également être ajoutées de manière procédurale à n'importe quel point de contrôle.

4. Lorsque vous avez terminé, cliquez sur le bouton Terminé du widget ou appuyez sur Entrée.

Modifier les points de contrôle

Avec un Path2D sélectionné dans la hiérarchie Explorer, vous pouvez modifier ses points de contrôle individuels ainsi que leurs tangentes.

Déplacer des points

Pour déplacer un point de contrôle individuel sur un chemin, activez l'outil Sélectionner (V) puis cliquez et faites-le glisser vers une nouvelle position.

Pour un positionnement très précis, sélectionnez le point de contrôle puis, dans la fenêtre Propriétés, définissez une nouvelle position pour la propriété SelectedControlPointData du point (UDim2).

Notez que la position d'un point n'est pas absolue, mais plutôt relative au conteneur parent du chemin. Par exemple, comparez un point de contrôle à 30 % de la gauche et 20 % du haut pour un chemin à l'intérieur d'un ScreenGui, par rapport à un chemin identique placé à l'intérieur d'un Frame situé dans le coin supérieur droit du ScreenGui.

Ajouter des points

De nouveaux points de contrôle peuvent être ajoutés à un Path2D soit entre deux points existants, soit à partir de n'importe quel point d'extrémité à l'aide de l'outil Ajouter Point (P).

Supprimer des points

Pour supprimer un point de contrôle, survolez-le et faites un clic droit, puis sélectionnez Supprimer Point dans le menu contextuel.

Tangentes des points de contrôle

Les tangentes des points de contrôle vous permettent de créer et d'ajuster des courbes sur un chemin.

Ajouter des tangentes

Pour ajouter des tangentes à n'importe quel point de contrôle qui n'a pas encore de tangentes :

1. Activez l'outil Ajouter Tangente dans le widget d'outils.

   

2. Survolez le point de contrôle désiré, puis cliquez pour ajouter deux tangentes miroirées (vous pouvez également faire glisser après avoir cliqué pour ajuster les nouvelles tangentes).

   

Ajuster les tangentes

Pour ajuster les tangentes existantes d'un point de contrôle individuel :

1. Activez l'outil Sélectionner (V).

   

2. Survolez un marqueur de tangente (pas le point de contrôle), puis cliquez et faites-le glisser vers une nouvelle position. Si les tangentes sont miroirées, le point de tangente associé se déplacera en synchronisation.

   

Pour définir manuellement une position UDim2 spécifique pour une tangente :

1. Activez l'outil Sélectionner (V) et sélectionnez le point de contrôle. Dans la fenêtre Propriétés, développez le champ SelectedControlPointData pour exposer les propriétés LeftTangent et RightTangent.

   

2. Définissez la position pour LeftTangent et/ou RightTangent. Notez que cela cassera le comportement miroir des tangentes.

Supprimer des tangentes

Pour supprimer les deux tangentes d'un point de contrôle, survolez et faites un clic droit sur ce point, puis sélectionnez Effacer Tangentes dans le menu contextuel.

Pour supprimer juste l'une des tangentes (gauche ou droite), survolez et faites un clic droit sur le marqueur de cette tangente, puis sélectionnez Supprimer Tangente.

Cassé et miroir

Par défaut, les tangentes se reflètent l'une l'autre. Lorsque vous faites glisser pour ajuster un marqueur de tangente, le point de tangente associé se déplacera en synchronisation.

Pour "casser" les tangentes afin que chacune puisse être déplacée indépendamment de l'autre, survolez et faites un clic droit sur le point de contrôle associé, puis sélectionnez Casser Tangentes dans le menu contextuel. Une fois cassées, vous pouvez déplacer chaque marqueur de tangente sans affecter l'autre.

Propriétés visuelles du chemin

Vous pouvez personnaliser l'apparence visuelle d'un Path2D avec les propriétés suivantes :

Scripting de chemin

Le scripting est utile pour plusieurs flux de travail liés aux chemins. Les exemples suivants utilisent des méthodes telles que GetControlPoints() qui retourne un tableau de Path2DControlPoints et GetPositionOnCurveArcLength() qui retourne la position UDim2 à une valeur t donnée le long de la spline.

Organiser des objets UI le long du chemin
local parent = script.Parent
local path = parent:FindFirstChildWhichIsA("Path2D")

local function arrangeChildren()
	local segmentCount = #path:GetControlPoints()
	local objectsToArrange = {}

	for _, child in parent:GetChildren() do
		if child:IsA("GuiObject") then
			table.insert(objectsToArrange, child)
		end
	end

	for idx, child in objectsToArrange do
		local t = idx / (#objectsToArrange + 1)
		child.Position = path:GetPositionOnCurveArcLength(t)
	end
end

-- Organiser initialement les objets UI enfants le long du chemin
arrangeChildren()

-- Écouter les enfants ajoutés/retirés pour ajuster l'arrangement
parent.ChildAdded:Connect(arrangeChildren)
parent.ChildRemoved:Connect(arrangeChildren)

Animer un objet UI le long du chemin
local Tweenservice = game:GetService("TweenService")

local parent = script.Parent
local path = parent:FindFirstChildWhichIsA("Path2D")
local objectToAnimate = parent:FindFirstChildWhichIsA("GuiObject")

local TWEEN_DURATION = 4
local TWEEN_EASING_STYLE = Enum.EasingStyle.Cubic
local TWEEN_EASING_DIRECTION = Enum.EasingDirection.InOut

local pathSampleValue = Instance.new("NumberValue")
local tweenInfo = TweenInfo.new(TWEEN_DURATION, TWEEN_EASING_STYLE, TWEEN_EASING_DIRECTION, 0, true, 2)
local tween = Tweenservice:Create(pathSampleValue, tweenInfo, {Value = 1})

local function onSampleValueChanged()
	objectToAnimate.Position = path:GetPositionOnCurveArcLength(pathSampleValue.Value)
end
pathSampleValue.Changed:Connect(onSampleValueChanged)

tween:Play()