Caminhos 2D

A instância Path2D, juntamente com seus métodos e propriedades de API, permite que você implemente splines 2D e linhas 2D curvas, úteis para efeitos de UI, como animações baseadas em caminho e editores de gráficos.

Criando um Caminho 2D

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

1. Na <a href="/reference/engine/explorer/">janela Explorer</a>, insira uma instância de <a href>Class.Path2D</a> sob um visível <a href>Class.ScreenGui</a> ou <a href>Class.SurfaceGui</a> (não é necessário ser um filho direto).

   

2. Selecione o novo Path2D para revelar o widget de ferramentas de janela. Por padrão, a ferramenta Adicionar ponto é selecionada.

   

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

   

   Se você arrastar o mouse depois de clicar, tangentes serão criadas nesse ponto. Tangentes também podem ser adicionados proceduralmente em qualquer ponto de controle.

4. Quando terminar, clique no botão Feito 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 seus tangentes.

Movendo Pontos

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

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

Nota que a posição de um ponto não é absoluta, mas sim relativa ao contêiner de pais dele. Por exemplo, compara um ponto de controle 30% da esquerda e 20% da direita para um caminho dentro de um ScreenGui , em vez de um caminho idêntico colocado dentro de um Frame localizado no canto superior direito do <

Adicionando Pontos

Novos pontos de controle podem ser adicionados a um Path2D entre dois pontos existentes ou a partir de um ponto de fim 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 nele, então selecione Excluir Ponto no menu pop-up contextual.

Controlar Pontos Tangentes

Ponto de controle tangentes deixe você criar e ajustar curvas em um caminho.

Adicionando Tangentes

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

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

   

2. Passe o mouse sobre o ponto de controle desejado, então clique para adicionar duas tangentes mirradas (opcionalmente arraste depois de clicar para ajustar as novas tangentes).

   

Ajustando Tangentes

Para ajustar as tangentes existentes para um ponto de controle individual:

1. Habilite a ferramenta Selecionar ( V ).

   

2. Passe o mouse sobre um marcador de tangente (não é o ponto de controle), então clique-e-arraste para uma nova posição. Se as tangentes estiverem espelhadas, o ponto de tangente correspondente se moverá em união.

   

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

1. Habilite a ferramenta Selecionar ( V ) e selecione o ponto de controle. Na janela Propriedades, expanda o campo 2>Class.Path2D.SelectedControlPointData|SelectedControlPointData2> para exibir o 5>Datatype.Path2DControl

   

2. Defina a posição para LeftTangent e/ou RightTangent . Observe que isso vai quebrar o comportamento mirado dos tangentes.

Excluindo Tangentes

Para excluir ambas as tangentes de um ponto de controle, passe o mouse sobre e clique com o botão direito naquele ponto, então selecione Limpar Tangentes no menu pop-up contextual.

Para excluir apenas uma das tangentes (esquerda ou direita), passe o mouse sobre e clique com o botão direito na marca da tangente, então selecione Excluir Tangente .

Quebrando e Mirrando

Por padrão, tangentes espelham umas às outras. Quando você arrasta para ajustar um marcador de tangente, o ponto de tangente correspondente será movido em união.

Para "quebrar" as tangentes para que cada pessoa possa ser movida independentemente do outro, hover over and right-click the control point associado, então selecione Quebrar Tangentes do menu contextual. Uma vez quebrado, você pode mover cada marcador de tangente sem afetar o outro.

Propriedades Visuais de Caminho

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

Script de Caminho

Scripting é útil para vários fluxos de trabalho relacionados a caminhos. Os seguintes exemplos usam métodos como GetControlPoints() que retorna uma tabela de Datatype.Path2DControlPoint|

Arranjar Objetos de UI em 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, agrupe objetos de UI de filho ao longo do caminho
arrangeChildren()

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

Animação de Objeto de UI 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()