Percorsi 2D

L'esempioPath2D , insieme ai suoi metodi e proprietà API, ti consente di implementare 2D spline e 2D linee curva, utili per effetti UI come le animazioni basate sulla strada e i editor di grafica.

Creazione di un Path2D

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

1. Nella finestra Explorer, inserisci una Path2D istanza sotto un ScreenGui o 2> Class.SurfaceGui2> (non è necessario essere un figlio diretto).

   

2. Seleziona il nuovo Path2D per rivelare lo Widgetin-viewport. Per impostazione predefinita, lo strumento Aggiungi punto viene selezionato.

   

3. Inizia a fare clic sullo schermo per aggiungere una serie di punti di controllo per formare una serie di percorsi. Il percorso iniziale probabilmente sarà impreciso, ma puoi ottenere in preciso la posizione di qualsiasi punto di controllo in seguito.

   

   Se trascini il mouse dopo aver cliccato, tangenti vengono create a quel punto. Le tangenti possono anche essere aggiunte in procedura a qualsiasi punto di controllo.

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

Modifica dei punti di controllo

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

Punti di spostamento

Per spostare un singolo punto di controllo su un percorso, abilita 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à SelectedControlPointData ( UDim2 ) .

Nota che la posizione di un punto non è assoluta, ma piuttosto relativa al container padre del percorso. Ad esempio, paragonare un punto di controllo 30% a sinistra e 20% a destra per un percorso all'interno di un ScreenGui , invece di un percorso identico posizionato all'interno di un Frame local

Aggiungere Punti

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

Eliminare i punti

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

Controllo punto tangente

Il punto di controllo tangenti ti consente di creare e regolare le曲ature su un percorso.

Aggiungere tangenti

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

1. Abilita lo strumento Aggiungi tangente nella finestra di dialogo degli strumenti.

   

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

   

Aggiustamento delle tangenti

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

1. Abilita lo strumento Seleziona ( V ).

   

2. Passa il mouse su un marcatore di tangente (non il punto di controllo), quindi fai clic e trascinalo in una nuova posizione. Se le tangenti sono mirate, il punto di tangente pari si muoverà in unione.

   

Per impostare manualmente una posizione specifica UDim2 per un tangente:

1. Abilita lo strumento Seleziona ( V ) e seleziona il punto di controllo. Nella finestra Proprietà , espandi il campo 1> Class.Path2D.SelectedControlPointData|SelectedControlPointData1> per mostrare il 4> Datatype.Path

   

2. Imposta la posizione per LeftTangent e/o RightTangent . Nota che questo romperà il comportamento mirrored dei tangenti.

Eliminare le tangenti

Per eliminare entrambe le tangenti da un punto di controllo, passa il mouse su e fai clic con il pulsante destro del mouse su quel punto, quindi seleziona Cancella tangenti dal menu popup di contesto.

Per eliminare solo una delle tangenti (sinistra o destra), passa il mouse su e fai clic con il pulsante destro del mouse su quella tangente, quindi seleziona Elimina tangente .

Distruzione e Mirroring

Per impostazione predefinita, i mirrors delle tangenti si specchiano l'un l'altro. Quando fai trascinare per regolare un marcatore di tangente, il punto di fusione pari si muoverà in unione.

Per "rompere" le tangenti in modo che ognuno possa essere spostato indipendentemente dall'altro, passa il mouse su e fai clic con il pulsante destro del mouse sul punto di controllo associato, quindi seleziona Rompi tangenti dal menu contestuale. Una volta rompente, puoi spostare ogni marcatore di tangente senza influire sull'altro.

Proprietà visive di percorso

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

Scripting del percorso

Lo scripting è utile per diversi flussi di lavoro legati alla strada. I seguenti esempi utilizzano metodi come GetControlPoints() che restituisce una tabella di Datatype.Path2DControlPoint|Path2DControlPoints

Arranger oggetti UI 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 per bambini percorrendo il percorso
arrangeChildren()

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

Oggetto UI animato 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()