Rutas 2D

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

Crear una ruta 2D

Para agregar un Path2D a la pantalla o a un objeto en la experiencia:

1. En la ventana de Explorer, inserta una instancia de Path2D bajo un ScreenGui o SurfaceGui visible (no necesita ser un hijo directo).

   

2. Selecciona el nuevo Path2D para revelar el widget de herramientas en el viewport. Por defecto, la herramienta Agregar Punto está seleccionada.

   

3. Comienza a hacer clic en la pantalla para agregar una serie de puntos de control para formar una ruta. La ruta inicial probablemente será imprecisa, pero puedes ajustar la posición de cualquier punto de control más tarde.

   

   Si arrastras el mouse después de hacer clic, se crearán tangentes en ese punto. Las tangentes también pueden ser agregadas de manera procedimental a cualquier punto de control.

4. Cuando termines, haz clic en el botón Listo del widget o presiona Enter.

Modificar puntos de control

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

Mover puntos

Para mover un punto de control individual en una ruta, activa la herramienta Seleccionar (V) y luego haz clic y arrástralo a una nueva posición.

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

Ten en cuenta que la posición de un punto no es absoluta, sino relativa al contenedor padre de la ruta. Por ejemplo, compara un punto de control al 30% desde la izquierda y al 20% desde la parte superior para una ruta dentro de un ScreenGui, frente a una ruta idéntica colocada dentro de un Frame ubicado en la esquina superior derecha del ScreenGui.

Agregar puntos

Se pueden agregar nuevos puntos de control a un Path2D ya sea entre dos puntos existentes o desde cualquiera de los puntos finales utilizando la herramienta Agregar Punto (P).

Eliminar puntos

Para eliminar un punto de control, pasa el mouse sobre él y haz clic derecho, luego selecciona Eliminar Punto en el menú contextual emergente.

Tangentes de puntos de control

Las tangentes de los puntos de control te permiten crear y ajustar curvas en una ruta.

Agregar tangentes

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

1. Activa la herramienta Agregar Tangente en el widget de herramientas.

   

2. Pasa el mouse sobre el punto de control deseado, luego haz clic para agregar dos tangentes espejadas (opcionalmente arrastra después de hacer clic para ajustar las nuevas tangentes).

   

Ajustar tangentes

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

1. Activa la herramienta Seleccionar (V).

   

2. Pasa el mouse sobre un marcador de tangente (no el punto de control), luego haz clic y arrástralo a una nueva posición. Si las tangentes están espejadas, el punto de tangente asociado se moverá simultáneamente.

   

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

1. Activa la herramienta Seleccionar (V) y selecciona el punto de control. En la ventana de Propiedades, expande el campo SelectedControlPointData para exponer las propiedades LeftTangent y RightTangent.

   

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

Eliminar tangentes

Para eliminar ambas tangentes de un punto de control, pasa el mouse sobre él y haz clic derecho, luego selecciona Limpiar Tangentes en el menú contextual emergente.

Para eliminar solo una de las tangentes (izquierda o derecha), pasa el mouse sobre el marcador de esa tangente, luego selecciona Eliminar Tangente.

Romper y espejar

Por defecto, las tangentes se espejan entre sí. Cuando arrastras para ajustar un marcador de tangente, el punto de tangente asociado se moverá simultáneamente.

Para "romper" las tangentes de manera que cada una pueda moverse independientemente de la otra, pasa el mouse sobre el punto de control asociado y selecciona Romper Tangentes en el menú contextual. Una vez roto, puedes mover cada marcador de tangente sin afectar al otro.

Propiedades visuales de la ruta

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

Scripting de rutas

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

Disponer objetos de UI a lo largo de la 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 dispone los objetos de UI secundarios a lo largo de la ruta
arrangeChildren()

-- Escucha la adición/remoción de hijos para ajustar la disposición
parent.ChildAdded:Connect(arrangeChildren)
parent.ChildRemoved:Connect(arrangeChildren)

Animar objeto de UI a lo largo de la 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()