Cheminements 2D

L'instance Path2D vous permet de mettre en œuvre des splines 2D et des lignes courbées 2D, utiles pour les effets d'interface utilisateur comme les animations basées sur le chemin et les é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 Explorateur, insérez une instance Path2D sous un élément visible ScreenGui ou SurfaceGui (il n'a pas besoin d'être un enfant direct).

   

2. Sélectionnez le nouveau Path2D pour révéler le widget d'outils en vue. 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 peaufiner la position de tout point de contrôle plus tard.

   

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

4. Une fois terminé, cliquez sur le bouton Terminé du widget ou appuyez sur Enter .

Modifier les points de contrôle

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

Déplacer les 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 spécifique, sélectionnez le point de contrôle puis, dans la fenêtre propriétés , définissez une nouvelle position pour la propriété du point ().

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% à gauche et 20% du haut pour un chemin à l'intérieur d'un ScreenGui , versus 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 entre deux points existants ou à partir de n'importe quel point de fin en utilisant l'outil Ajouter un point ( P ).

>

Supprimer des points

Pour supprimer un point de contrôle, survolez-le 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 une tangente dans le widget d'édition.

   

2. Passez la souris sur 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).

   

Ajuster les tangentes

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

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

   

2. Passez la souris sur un marqueur tangentiel (pas le point de contrôle), puis cliquez et faites-le glisser vers une nouvelle position.Si les tangentes sont mises en miroir, le point tangent pair se déplacera en unisson.

   

Pour définir manuellement une position spécifique UDim2 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, élargissez le champ SelectedControlPointData pour exposer les propriétés LeftTangent et RightTangent.

   

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

Supprimer les tangentes

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

Pour supprimer seulement l'une des tangentes (gauche ou droite), survolez et cliquez avec le bouton droit sur le marqueur de cette tangente, puis sélectionnez Supprimer la tangente .

Casser 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 tangent pair se déplacera en unisson.

Pour "casser" les tangentes afin que chacune puisse être déplacée indépendamment de l'autre, survolez 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 brisé, vous pouvez déplacer chaque marqueur tangentiel 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 :

>

>

>

scriptingdu chemin

Le scripting est utile pour plusieurs workflows liés au chemin.Les exemples suivants utilisent des méthodes telles que qui retourne une table de et qui retourne la position à une valeur donnée le long du spline.

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

-- Organiser initialement les objets d'interface utilisateur enfants sur le chemin
arrangeChildren()

-- Écouter les enfants qui sont ajoutés ou supprimés pour ajuster l'arrangement
parent.ChildAdded:Connect(arrangeChildren)
parent.ChildRemoved:Connect(arrangeChildren)

Animer l'objet d'interface utilisateur 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()