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:
Na janela Explorer, insira uma Path2D instância sob uma visível ScreenGui ou SurfaceGui (não precisa ser uma criança direta).
Selecione o novo Path2D para revelar o widget de ferramentas no viewport. Por padrão, a ferramenta Adicionar Ponto está selecionada.
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.
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:
Ative a ferramenta Adicionar Tangente no widget de ferramentas.
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:
Ative a ferramenta Selecionar (V ).
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:
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.
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:
Propiedad | Descripción |
---|---|
Color3 | Establece el color de la línea de camino. |
Thickness | Establece el grosor de la línea de camino, en píxeles. |
Visible | Haz que la ruta sea visible o no tanto en edición como en tiempo de ejecución. |
ZIndex | Orden en la que una ruta se renderiza en relación con otras GUI. |
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()