Caminhos 2D

A instância Path2D, juntamente com seus métodos e propriedades de API, permite implementar splines 2D e linhas curvas 2D, úteis para efeitos de interface de usuário, como animações baseadas em caminhos e editores de gráficos.

Criando um Caminho 2D

Para adicionar um Path2D à tela ou a um Objetona experiência:

1. Na janela Explorer, insira uma Path2D instância sob uma visível ScreenGui ou SurfaceGui (não precisa ser uma criança direta).

   

2. Selecione o novo Path2D para revelar o widget de ferramentas no viewport. Por padrão, a ferramenta Adicionar Ponto está selecionada.

   

3. Comece clicando na tela para adicionar uma série de pontos de controle para formar um caminho. O caminho inicial provavelmente será impreciso, mas você pode ajustar a posição de qualquer ponto de controle mais tarde.

   

   Se você arrastar o mouse após clicar, tangentes serão criadas naquele ponto. Tangentes também podem ser adicionadas proceduralmente a qualquer ponto de controle.

4. Quando terminar, clique no botão Done do widget ou pressione Enter.

Modificando Pontos de Controle

Com um Path2D selecionado na hierarquia Explorer, você pode modificar seus pontos de controle individuais, bem como suas tangentes.

Pontos em Movimento

Para mover um ponto de controle individual em um caminho, ative a ferramenta Selecionar (V) e, em seguida, clique e arraste-a para uma nova posição.

Para posicionamento muito específico, selecione o ponto de controle e, em seguida, na janela Propriedades, defina uma nova posição para a propriedade SelectedControlPointData do ponto (UDim2 ).

Note que a posição de um ponto não é absoluta, mas sim relativa ao contêiner pai do caminho. Por exemplo, compare um ponto de controle 30% da esquerda e 20% da parte superior para um caminho dentro de um ScreenGui , versus um caminho idêntico colocado dentro de um Frame localizado no canto superior direito do ScreenGui .

Adicionando Pontos

Novos pontos de controle podem ser adicionados a um Path2D entre dois pontos existentes ou de qualquer ponto final usando a ferramenta Adicionar Ponto (P ).

Excluindo Pontos

Para excluir um ponto de controle, passe o mouse sobre ele e clique com o botão direito do mouse, em seguida, selecione Delete Point no menu popup contextual.

Tangentes do ponto de controle

Pontos de controle tangentes permitem que você crie e ajuste curves em um caminho.

Adicionando Tangentes

Para adicionar tangentes a qualquer ponto de controle que ainda não tenha tangentes:

1. Ative a ferramenta Adicionar Tangente no widget de ferramentas.

   

2. Passe o mouse sobre o ponto de controle desejado e clique para adicionar duas tangências espelhadas (opcionalmente, arraste após clicar para ajustar as novas tangências).

   

Ajustando Tangentes

Para ajustar as tangências existentes para um ponto de controle individual:

1. Ative a ferramenta Selecionar (V ).

   

2. Passe o mouse sobre um marcador tangente (não o ponto de controle), depois clique e arraste-o para uma nova posição. Se os tangentes estiverem espelhados, o ponto tangente emparelhado se moverá em uníssono.

   

Para definir manualmente uma posição específica UDim2 para um tangente:

1. Ative a ferramenta Selecione (V ) e selecione o ponto de controle. Na janela Propriedades, expanda o campo SelectedControlPointData para expor as propriedades LeftTangent e RightTangent.

   

2. Defina a posição para LeftTangent e/ou RightTangent . Note que isso vai quebrar o comportamento espelhado das tangentes.

Excluindo Tangentes

Para excluir ambas as tangências de um ponto de controle, passe o mouse sobre e clique com o botão direito do mouse nesse ponto e selecione Limpar Tangências no menu pop-up contextual.

Para excluir apenas uma das tangências (esquerda ou direita), passe o mouse sobre e clique com o botão direito do mouse no marcador dessa tangência e selecione Apagar Tangente .

Quebrando e Espelhando

Por padrão, as tangentes se espelham umas às outras. Quando você arrasta para ajustar um marcador de tangente, o ponto de tangente emparelhado se moverá em uníssono.

Para "quebrar" as tangências para que cada uma possa ser movida independentemente da outra, passe o mouse sobre e clique com o botão direito do mouse no ponto de controle associado e, em seguida, selecione Quebrar Tangências no menu contextual. Depois de quebrado, você pode mover cada marcador de tangência sem afetar o outro.

Propriedades Visuais do Caminho

Você pode personalizar a aparência visual de um Path2D com as seguintes propriedades:

Script de Caminho

O scripting é útil para vários workflows relacionados a caminhos. Os exemplos a seguir usam métodos como GetControlPoints(), que retorna uma tabela de Path2DControlPoints e GetPositionOnCurveArcLength(), que retorna a posição UDim2 em um dado valor t ao longo do spline.

Arranjar Objetos da Interface através do Caminho
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

-- Inicialmente, organize os objetos da interface de usuário infantil no caminho
arrangeChildren()

-- Ouça as crianças sendo adicionadas/removidas para ajustar o arranjo
parent.ChildAdded:Connect(arrangeChildren)
parent.ChildRemoved:Connect(arrangeChildren)

Animar Objeto da Interface ao Longo do Caminho
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()