Caminos 2D

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

Creando un ruta2D

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

1. En la ventana Explorer, insértate una instancia de Path2D debajo de un Class.ScreenGui o Class.SurfaceGui visible (no es necesario que sea un hijo directo).

   

2. Seleccione el nuevo Path2D para revelar el widget de herramientas en la vista. Por defecto, la herramienta Añadir punto es seleccionada.

   

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 puede refinar la posición de cualquier punto de control más tarde.

   

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

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

Modificando Puntos de Control

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

Mover Puntos

Para mover un punto de control individual en un camino, habilite la herramienta Seleccionar ( V ) y luego haga clic y arrastre 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 ).

Nota que la posición de un punto no es absoluta, sino que más bien es relativa a la contenedor padre del camino. Por ejemplo, compare un punto de control 30% de izquierda y 20% de arriba para un camino dentro de un ScreenGui , en lugar de un camino idéntico colocado dentro de un Frame localizado en la esqu

Añadir Puntos

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

Eliminando Puntos

Para eliminar un punto de control, pasar el cursor por encima y hacer clic derecho, luego seleccione Eliminar punto del menú contextual.

Controlar el punto tangente

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

Agregar 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).

   

Ajustando tangentes

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

1. Habilita la herramienta Seleccionar ( V ).

   

2. Pase el marcador tangente (no el punto de control), luego haga clic y arrastre a una nueva posición. Si los tangentes están reflejados, el punto de tangente asociado se moverá en unión.

   

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

1. Habilita la herramienta Seleccionar ( V ) y selecciona el punto de control. En la ventana Propiedades, expande el campo 1> Class.Path2D.SelectedControlPointData|SelectedControlPointData1> para mostrar el 4> Datatype.Path2DControl

   

2. Establezca la posición para LeftTangent y/o RightTangent . Tenga en cuenta que esto romperá el comportamiento mirado de los tangentes.

Eliminando tangentes

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

Para eliminar solo una de las tangentes (izquierda o derecha), pasar el cursor por encima y hacer clic derecho en el marcador de esa tangente, luego seleccionar Eliminar tangente .

Rompiendo y espejando

Por defecto, los tangentes se miran el uno al otro. Cuando arrastrares para ajustar uno de los marcadores de tangente, el punto de tangente asociado se moverá en unión.

Para "romper" las tangentes para que cada uno se pueda mover de forma independiente del otro, pasar el cursor sobre y hacer clic derecho en el punto de control asociado, luego seleccione Romper tangentes del menú contextual. Una vez roto, puede mover cada marcador de tangente sin afectar al otro.

Propiedades de camino de visualización

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

Guión de camino

El scripting es útil para varios flujos de trabajo relacionados con el camino. Los siguientes ejemplos usan métodos como GetControlPoints() que devuelve una tabla de Datatype.Path2DControlPoint|Path2DControlPoints

Organizar Objetos de Interfaz de Usuario en el 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 lo largo del camino
arrangeChildren()

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

Objeto de interfaz de usuario de animación alrededor 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()