Percorsi 2D

L'istanza Path2D, insieme ai suoi metodi e proprietà API, ti consente di implementare spline 2D e linee curve 2D, utili per effetti UI come animazioni basate su percorsi e editor di grafici.

Crea un percorso 2D

Per aggiungere un Path2D allo schermo o a un oggetto in esperienza:

1. Nella finestra Explorer, inserisci un'istanza Path2D sotto un ScreenGui o un SurfaceGui visibile (non deve essere un figlio diretto).

   

2. Seleziona il nuovo Path2D per rivelare il widget di strumenti in visualizzazione. Per impostazione predefinita, è selezionato lo strumento Aggiungi Punto.

   

3. Inizia a fare clic sullo schermo per aggiungere una serie di punti di controllo per formare un percorso. Il percorso iniziale sarà probabilmente impreciso, ma puoi affinare la posizione di qualsiasi punto di controllo in un secondo momento.

   

   Se trascini il mouse dopo aver fatto clic, verranno creati tangenti su quel punto. I tangenti possono anche essere aggiunti in modo procedurale a qualsiasi punto di controllo.

4. Quando hai finito, fai clic sul pulsante Fatto del widget o premi Enter.

Modifica i punti di controllo

Con un Path2D selezionato nella gerarchia Explorer, puoi modificare i suoi singoli punti di controllo e le loro tangenti.

Sposta punti

Per spostare un singolo punto di controllo su un percorso, abilita lo strumento Seleziona (V) e quindi fai clic e trascinalo in una nuova posizione.

Per posizionamenti molto specifici, seleziona il punto di controllo e poi, nella finestra Proprietà, imposta una nuova posizione per la proprietà SelectedControlPointData del punto (UDim2).

Nota che la posizione di un punto non è assoluta, ma piuttosto relativa al contenitore padre del percorso. Ad esempio, confronta un punto di controllo al 30% da sinistra e al 20% dall'alto per un percorso all'interno di un ScreenGui, rispetto a un percorso identico posizionato all'interno di un Frame situato nell'angolo in alto a destra dello ScreenGui.

Aggiungi punti

Nuovi punti di controllo possono essere aggiunti a un Path2D sia tra due punti esistenti, sia da un'estremità utilizzando lo strumento Aggiungi Punto (P).

Elimina punti

Per eliminare un punto di controllo, passa il mouse sopra e fai clic destro su di esso, quindi seleziona Elimina Punto dal menu a comparsa contestuale.

Tangenti ai punti di controllo

Le tangenti ai punti di controllo ti consentono di creare e regolare curve su un percorso.

Aggiungi tangenti

Per aggiungere tangenti a qualsiasi punto di controllo che non ha già tangenti:

1. Abilita lo strumento Aggiungi Tangente nel widget di strumenti.

   

2. Passa il mouse sopra il punto di controllo desiderato, quindi fai clic per aggiungere due tangenti speculari (opzionalmente trascina dopo aver cliccato per regolare le nuove tangenti).

   

Regola tangenti

Per regolare le tangenti esistenti per un singolo punto di controllo:

1. Abilita lo strumento Seleziona (V).

   

2. Passa il mouse sopra un marcatore di tangente (non il punto di controllo), quindi fai clic e trascina in una nuova posizione. Se le tangenti sono speculari, il punto tangente abbinato si muoverà all'unisono.

   

Per impostare manualmente una posizione specifica UDim2 per una tangente:

1. Abilita lo strumento Seleziona (V) e seleziona il punto di controllo. Nella finestra Proprietà, espandi il campo SelectedControlPointData per esporre le proprietà LeftTangent e RightTangent.

   

2. Imposta la posizione per LeftTangent e/o RightTangent. Nota che questo interromperà il comportamento speculare delle tangenti.

Elimina tangenti

Per eliminare entrambe le tangenti da un punto di controllo, passa il mouse sopra e fai clic destro su quel punto, quindi seleziona Cancella Tangenti dal menu a comparsa contestuale.

Per eliminare solo una delle tangenti (sinistra o destra), passa il mouse sopra e fai clic destro sul marcatore di quella tangente, quindi seleziona Elimina Tangente.

Interrompi e specchia

Per impostazione predefinita, le tangenti si specchiano l'una con l'altra. Quando trascini per regolare un marcatore di tangente, il punto tangente abbinato si muoverà all'unisono.

Per "interrompere" le tangenti in modo che ciascuna possa essere spostata in modo indipendente dall'altra, passa il mouse sopra e fai clic destro sul punto di controllo associato, quindi seleziona Interrompi Tangenti dal menu contestuale. Una volta interrotte, puoi spostare ciascun marcatore di tangente senza influenzare l'altro.

Proprietà visive del percorso

Puoi personalizzare l'aspetto visivo di un Path2D con le seguenti proprietà:

Scripting del percorso

La scripting è utile per diversi flussi di lavoro legati ai percorsi. I seguenti esempi utilizzano metodi come GetControlPoints(), che restituisce una tabella di Path2DControlPoints, e GetPositionOnCurveArcLength(), che restituisce la posizione UDim2 a un dato valore t lungo la spline.

Disporre gli oggetti UI lungo il percorso
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

-- Inizialmente disposizione degli oggetti UI figli lungo il percorso
arrangeChildren()

-- Ascolta l'aggiunta/rimozione di figli per regolare la disposizione
parent.ChildAdded:Connect(arrangeChildren)
parent.ChildRemoved:Connect(arrangeChildren)

Anima oggetto UI lungo il percorso
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()