Caminos 2D

La instancia Path2D, junto con sus métodos y propiedades de API, le permite implementar splines 2D y líneas curvas 2D, útiles para efectos de interfaz de usuario como animaciones basadas en caminos y editores de gráficos.

Creando un ruta2D

Para añadir un Path2D a la pantalla o a un objeto en la experiencia:

1. En la ventana del Explorador, inserte una Path2D instancia debajo de una visible ScreenGui o SurfaceGui (no tiene que ser un hijo directo).

   

2. Selecciona el nuevo Path2D para revelar el widget de herramientas en la vista. Por defecto, la herramienta Add Point está seleccionada.

   

3. Comience haciendo clic en la pantalla para agregar una serie de puntos de control para formar una ruta. La ruta inicial probablemente sea imprecisa, pero puede ajustar la posición de cualquier punto de control más tarde.

   

   Si arrastra el ratón después de hacer clic, se crearán tangentes en ese punto. Las tangentes también se pueden agregar a cualquier punto de control.

4. Cuando haya terminado, haga clic en el botón Done del widget o presione Enter.

Modificando Puntos de Control

Con un Path2D seleccionado en la jerarquía Explorer, puede modificar sus puntos de control individuales, así como sus tangentes.

Puntos móviles

Para mover un punto de control individual en un camino, active la herramienta Seleccionar (V ) y luego haga clic y arrástrelo a una nueva posición.

Para un posicionamiento muy específico, seleccione el punto de control y luego, en la ventana Propiedades, establezca una nueva posición para la propiedad SelectedControlPointData del punto (UDim2 ).

Tenga en cuenta que la posición de un punto no es absoluta, sino más bien relativa al contenedor principal de la ruta. Por ejemplo, compare un punto de control 30% desde la izquierda y 20% desde la parte superior de una ruta dentro de un ScreenGui , en comparación con una ruta idéntica colocada dentro de un Frame ubicado en la esquina superior derecha de la ScreenGui .

Añadiendo Puntos

Se pueden agregar nuevos puntos de control a un Path2D entre dos puntos existentes o desde cualquiera de los puntos finales usando la herramienta Add Point (P ).

Eliminando Puntos

Para eliminar un punto de control, pase el cursor sobre él y haga clic con el botón derecho, luego seleccione Eliminar punto en el menú contextual.

Tangentes del punto de control

Los puntos de control tangentes te permiten crear y ajustar curvas en un camino.

Añadiendo Tangentes

Para agregar tangentes a cualquier punto de control que ya no tenga tangentes:

1. Habilita la herramienta Añadir Tangente en el widget de herramientas.

   

2. Pase el cursor sobre el punto de control deseado, luego haga clic para agregar dos tangentes duplicadas (opcionalmente, arrastre después de hacer clic para ajustar las nuevas tangentes).

   

Ajustando Tangentes

Para ajustar las tangentes existentes para un punto de control individual:

1. Habilita la herramienta Seleccionar (V ).

   

2. Pase el cursor sobre un marcador tangente (no el punto de control), luego haga clic y arrástrelo a una nueva posición. Si los tangentes se reflejan, el punto tangente emparejado se moverá al unísono.

   

Para establecer manualmente una posición específica UDim2 para un tangente:

1. Habilite la herramienta Seleccione (V ) y seleccione el punto de control. En la ventana Propiedades, expanda el campo SelectedControlPointData para exponer las LeftTangent y RightTangent.

   

2. Establece la posición para LeftTangent y/o RightTangent . Tenga en cuenta que esto romperá el comportamiento de espejo de las tangentes.

Eliminando Tangentes

Para eliminar ambas tangencias de un punto de control, pase el cursor sobre y haga clic con el botón derecho en ese punto, luego seleccione Clear Tangents en el menú contextual.

Para eliminar solo una de las tangentes (izquierda o derecha), pase el cursor sobre y haga clic con el botón derecho en el marcador de esa tangente y, a continuación, seleccione Eliminar tangente .

Rompiendo y Reflejando

Por defecto, las tangentes se reflejan entre sí. Cuando arrastras para ajustar un marcador de tangente, el punto de tangente emparejado se moverá al unísono.

Para "romper" los tangentes para que cada uno se pueda mover independientemente del otro, pase el cursor sobre y haga clic con el botón derecho en el punto de control asociado, luego seleccione Romper Tangentes en el menú contextual. Una vez roto, puede mover cada marcador de tangente sin afectar al otro.

Propiedades Visuales del Camino

Puede personalizar la apariencia visual de un Path2D con las siguientes propiedades:

Programación de caminos

La programación es útil para varios flujos de trabajo relacionados con la ruta. Los siguientes ejemplos usan métodos como GetControlPoints() que devuelve una tabla de Path2DControlPoints y GetPositionOnCurveArcLength() que devuelve la posición UDim2 en un valor t dado a lo largo del spline.

Arreglar objetos de la interfaz de usuario a través del ruta
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 organiza los objetos de la interfaz de usuario infantil a través del camino
arrangeChildren()

-- Escucha a los niños que se están agregando/eliminando para ajustar el arreglo
parent.ChildAdded:Connect(arrangeChildren)
parent.ChildRemoved:Connect(arrangeChildren)

Animar objeto de interfaz de usuario a lo largo del ruta
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()