2D percorsi

L'esempioPath2D lascia che tu implementi spline 2D e linee curve 2D, utili per effetti UI come le animazioni basate sul percorso e gli editor di grafica.

Crea un percorso 2D

Per aggiungere un Path2D alla schermata o un oggetto in-experience:

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

   

2. Seleziona il nuovo Path2D per rivelare il Widgetdi strumentazione in-viewport. Per impostazione predefinita, viene 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 ottimizzare la posizione di qualsiasi punto di controllo in seguito.

   

   Se trascini il mouse dopo aver cliccato, verranno creati tangenti su quel punto.Le tangenti possono anche essere aggiunte in modo procedurale a qualsiasi punto di controllo.

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

Modifica punti di controllo

Con un Path2D selezionato nella gerarchia Explorer, puoi modificare i suoi punti di controllo individuali così come i loro tangenti.

Sposta i punti

Per spostare un singolo punto di controllo su un percorso, attiva lo strumento Seleziona ( V ) e quindi clicca e trascina in una nuova posizione.

Per una posizione molto specifica, seleziona il punto di controllo e quindi, nella finestra Proprietà, imposta una nuova posizione per la proprietà del punto SelectedControlPointData (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 30% da sinistra e 20% da cima per un percorso all'interno di un ScreenGui , rispetto a un percorso identico posizionato all'interno di un Frame situato nell'angolo superiore destro del ScreenGui .

Aggiungi punti

I nuovi punti di controllo possono essere aggiunti a un Path2D tra due punti esistenti o dall'estremità opposta utilizzando lo strumento Aggiungi punto ( P ).

>

>

Elimina punti

Per eliminare un punto di controllo, passa il mouse su di esso e fai clic con il pulsante destro, quindi seleziona Elimina punto dal menu contestuale popup.

Tangenti del punto di controllo

Il punto di controllo tangenti ti consente di creare e regolare le 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 nella finestra degli strumenti.

   

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

   

Aggiusta i tangenti

Per regolare i tangenti esistenti per un punto di controllo individuale:

1. Abilita lo strumento Seleziona ( V ).

   

2. Passa il mouse su un marcatore tangente (non sul punto di controllo), quindi clicca e trascinalo in una nuova posizione.Se i tangenti sono specchiati, il punto tangente binario si muoverà in unison.

   

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 e/o . Nota che questo romperà il comportamento specchiato dei tangenti.

Elimina i tangenti

Per eliminare entrambi i tangenti da un punto di controllo, passa il mouse su e fai clic con il pulsante destro su quel punto, quindi seleziona Elimina tangenti dal menu contestuale popup.

Per eliminare solo uno dei tangenti (sinistra o destra), passa il mouse su e fai clic con il pulsante destro del mouse sul segnaposto del tangente, quindi seleziona Elimina tangente .

Rompi e specchia

Per impostazione predefinita, i tangenti si specchiano l'un l'altro. Quando trascini per regolare un segnaposto tangente, il punto tangente abbinato si muoverà in unison.

Per "rompere" i tangenti in modo che ognuno possa essere spostato indipendentemente dall'altro, passa il mouse e fai clic con il pulsante destro sui punti di controllo associati, quindi seleziona Rompi i tangenti dal menu contestuale.Una volta rotto, puoi spostare ciascun segnaposto tangente senza influenzare l'altro.

Proprietà visive del percorso

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

>

>

>

scriptingdel percorso

Lo scripting è utile per diversi flussi di lavoro correlati al percorso.Gli esempi seguenti utilizzano metodi come che restituisce una tabella di e che restituisce la posizione in un dato valore lungo lo spline.

Organizza gli oggetti dell'interfaccia utente attraverso il Path
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 organizza gli oggetti UI figli attraverso il percorso
arrangeChildren()

-- Ascolta i bambini aggiunti/rimossi per regolare l'arrangiamento
parent.ChildAdded:Connect(arrangeChildren)
parent.ChildRemoved:Connect(arrangeChildren)

Animare l'oggetto UI lungo il Path
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()