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 les effets d'interface utilisateur comme les animations de chemin et les éditeurs de graphiques.

Créer un Route2D

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

1. Dans la fenêtre Explorateur, insérez une instance de Path2D sous un ScreenGui ou 2>Class.SurfaceGui2> (il n'est pas nécessaire qu'il s'agisse d'un enfant direct).

   

2. Sélectionnez le nouvel Path2D pour révéler l'widgetde menu contextuel. 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 pour former un chemin. Le chemin initial sera probablement imprécis, mais vous pouvez ajuster la position de n'importe quel point de contrôle plus tard.

   

   Si vous faites glisser la souris après avoir cliqué, 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 Entrer.

Modification des 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.

Points de déplacement

Pour déplacer un point de contrôle individuel sur un chemin, activez l'outil sélectionnez ( V ) puis cliquez-et-glissez-le à une nouvelle position.

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

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

Ajouter des points

De nouveaux points de contrôle peuvent être ajoutés à un Path2D entre deux points existants ou à partir d'un point d'extrémité en utilisant l'outil Ajouter un point ( P).

Suppression des points

Pour supprimer un point de contrôle, passez la souris dessus et cliquez dessus avec le bouton droit, puis sélectionnez Supprimer le point dans le menu contextuel.

Tangentes de point de contrôle

Le point de contrôle tangentes vous permet 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 déjà de tangentes :

1. Activer l'outil Ajouter un tangente dans le widget d'outils.

   

2. Survolez le point de contrôle souhaité, puis cliquez pour ajouter deux tangentes miroir (optionnellement faites glisser après avoir cliqué pour ajuster les nouvelles tangentes).

   

Ajustement des tangentes

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

1. Activer l'outil Sélectionnez ( V).

   

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

   

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

1. Activer l'outil sélectionnez ( V ) et sélectionner le point de contrôle. Dans la fenêtre propriétés, élargissez le champ 1> Class.Path2D.SelectedControlPointData|SelectedControlPointData «Datatype.Path2DControlPoint.LeftTangent|LeftTangent

   

2. Définir la position pour LeftTangent et/ou RightTangent . Notez que cela brisera le comportement mirrored des tangentes .

Suppression des tangentes

Pour supprimer les deux tangentes d'un point de contrôle, passez la souris sur et cliquez avec le bouton droit, puis sélectionnez Supprimer les tangentes dans le menu contextuel.

Pour supprimer juste un des tangentes (gauche ou droite), passez la souris sur et faites un clic droit sur le marqueur de ce tangente, puis sélectionnez Supprimer le tangente .

Cassage et miroir

Par défaut, les tangentes miroient l'une l'autre. Lorsque vous faites glisser pour ajuster l'un des marqueurs de tangente, le point de tangente associé se déplacera en unité.

Pour "casse" les tangentes afin que chacun puisse être déplacé indépendamment de l'autre, passez la souris sur et cliquez avec le bouton droit sur le point de contrôle associé, puis sélectionnez Casser les tangentes dans le menu contextuel. Une fois cassé, vous pouvez déplacer chaque marqueur de tangente sans affecter l'autre.

Propriétés visuelles de chemin

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

Script de chemin

Le scripting est utile pour plusieurs workflows liés aux chemins. Les exemples suivants utilisent des méthodes telles que GetControlPoints() qui renvoie une table de Path2DControlPoints et

Organiser les objets d'interface utilisateur le long du Route
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

-- Initialement, organisez les objets de l'interface utilisateur enfant sur le chemin
arrangeChildren()

-- Écoutez les enfants être ajoutés/supprimés pour ajuster l'arrangement
parent.ChildAdded:Connect(arrangeChildren)
parent.ChildRemoved:Connect(arrangeChildren)

Objet d'interface animée le long du Route
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()