Caminos de 2D

La instancia Path2D deja que implementes splines de 2D y curvas de 2D, útiles para efectos de interfaz de usuario como animaciones basadas en rutas y editores de gráficos.

Crear un camino de 2D

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

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

   

2. Seleccione el nuevo Path2D para revelar el widget de herramientas en la ventana. Por defecto, se selecciona la herramienta Añadir punto .

   

3. Comience a hacer clic en la pantalla para agregar una serie de puntos de control para formar un camino.El camino inicial probablemente será impreciso, pero puedes afinar 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.Los tangentes también se pueden agregar de forma procedural a cualquier punto de control.

4. Cuando termine, haga clic en el botón Hecho del widget o presione Enter .

Modificar puntos de control

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

Mover puntos

Para mover un punto de control individual en un camino, habilita la herramienta Seleccionar ( V ) y luego haz clic y arrastra a una nueva posición

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

Tenga en cuenta que la posición de un punto no es absoluta, sino más bien relativa al contenedor padre del camino.Por ejemplo, compara un punto de control 30% desde la izquierda y 20% desde la parte superior para un camino dentro de un ScreenGui , versus un camino idéntico colocado dentro de un Frame ubicado en la esquina superior derecha del ScreenGui .

Añadir puntos

Se pueden agregar nuevos puntos de control a un Path2D entre dos puntos existentes o desde cualquier punto final utilizando la herramienta Añadir punto (P).

Eliminar puntos

Para eliminar un punto de control, pasar el mouse sobre él y hacer clic derecho, luego seleccione Eliminar punto del menú contextual.

Tangentes de punto de control

El punto de control tangentes te permite crear y ajustar curvas en un camino.

Añadir tangentes

Para agregar tangentes a cualquier punto de control que aún 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 espejadas (opcionalmente arrastre después de hacer clic para ajustar las nuevas tangentes).

   

Ajustar tangentes

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

1. Habilita la herramienta Seleccionar (V).

   

2. Pase el mouse 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á en unidad.

   

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

1. Habilita la herramienta Seleccionar ( V ) y selecciona el punto de control.En la ventana Propiedades, expanda el campo para exponer las propiedades y .

   

2. Establece la posición para y/o . Tenga en cuenta que esto romperá el comportamiento reflejado de los tangentes.

Eliminar tangentes

Para eliminar ambas tangentes desde un punto de control, pasa el mouse sobre ese punto y haz clic derecho, luego selecciona Borrar tangentes desde el menú contextual.

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

Romper y espejar

Por defecto, los tangentes se espejan entre sí. Cuando arrastras para ajustar un marcador tangente, el punto tangente emparejado se moverá en unidad.

Para "romper" los tangentes para que cada uno se pueda mover independientemente del otro, pasa el cursor y haz clic derecho sobre el punto de control asociado, luego selecciona Romper tangentes del menú contextual.Una vez roto, puedes mover cada marcador tangente sin afectar al otro.

Propiedades visuales de ruta

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

>

scriptingde ruta

La programación es útil para varios flujos de trabajo relacionados con rutas.Los siguientes ejemplos utilizan métodos como que devuelve una tabla de y que devuelve la posición en un valor dado a lo largo de la bisagra.

Organizar objetos de interfaz de usuario a lo largo 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 organizar objetos de interfaz de usuario infantil en todo el camino
arrangeChildren()

-- Escuchar a los niños que se agreguen/eliminen para ajustar el arreglo
parent.ChildAdded:Connect(arrangeChildren)
parent.ChildRemoved:Connect(arrangeChildren)

Animar el objeto de la 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()