2D caminhos

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

Criar um caminho de 2D

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

1. Na janela Explorer, insira uma instância Path2D sob um visível ScreenGui ou SurfaceGui (não precisa ser um filho direto).

   

2. Selecione o novo Path2D para revelar o widget de ferramentas na janela de visualização. 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 ajustar 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 adicionadas de forma procedural a qualquer ponto de controle.

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

Modificar pontos de controle

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

Mover pontos

Para mover um ponto de controle individual em um caminho, ative a ferramenta Selecionar ( V ) e, em seguida, 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 do ponto ().

Observe 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 .

Adicionar pontos

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

>

>

Excluir pontos

Para excluir um ponto de controle, passe o mouse sobre ele e clique com o botão direito, então selecione Excluir ponto no menu contextual pop-up.

Tangentes de ponto de controle

O ponto de controle tangentes permite que você crie e ajuste curvas em um caminho.

Adicionar tangentes

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

1. Ative a ferramenta Adicionar Tangente na janela de ferramentas.

   

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

   

Ajustar 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 tangente (não o ponto de controle), então clique e arraste para uma nova posição.Se os tangentes forem espelhados, o ponto tangente emparelado se moverá em uníssono.

   

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

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

   

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

Apagar tangentes

Para excluir ambas as tangentes de um ponto de controle, passe o mouse sobre e clique com o botão direito sobre esse 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 sobre o marcador dessa tangente, então selecione Excluir tangente .

Quebrar e espelhar

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

Para "quebrar" os tangentes para que cada um possa ser movido independentemente do outro, passe o mouse sobre e clique com o botão direito no ponto de controle associado, então selecione Quebrar Tangentes no menu contextual.Uma vez quebrada, você pode mover cada marcador tangente sem afetar o outro.

Propriedades visuais de caminho

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

>

>

>

scriptingde caminho

Programação é útil para vários fluxos de trabalho relacionados a caminhos.Os seguintes exemplos usam métodos como GetControlPoints() que retorna uma tabela de Path2DControlPoints e GetPositionOnCurveArcLength() que retorna a posição UDim2 em um determinado t valor ao longo da superfície.

Organizar objetos de UI 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 organizar objetos de UI filhos através do caminho
arrangeChildren()

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

Animar 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()