¶ Introducción al Movimiento Curvo
Con ellas, podrán hacer que un objeto, en lugar de ir del punto A al punto B en línea recta, siga un arco elegante, una trayectoria sinuosa en forma de "S" o cualquier camino que imaginen.
En Kara Effector, tenemos dos métodos principales para dominar este tipo de movimiento:
- El Sistema Paramétrico con
math.bezier: Usaremos las casillas de la interfaz para definir matemáticamente una curva. Este método es ideal para crear trayectorias desde cero con un control absoluto sobre su forma. - La Biblioteca
shape: Aprovecharemos funciones comoshape.smove()para que un objeto siga el contorno de una figura (shape) que ya exista. Es la opción perfecta para trayectorias complejas que son más fáciles de dibujar que de calcular.
Empecemos.
¶ ¿Qué es una Curva Bézier?
- Puntos de Anclaje (Anchor Points): Son los extremos fijos de la cuerda. La curva siempre comenzará en el primer punto y terminará en el último.
- Puntos de Control (Control Points): Son los "imanes". La curva es "atraída" hacia ellos, pero generalmente no los toca. La posición y distancia de estos puntos de control son las que definen la forma exacta de la curva.
En Kara Effector, trabajaremos principalmente con la Curva Cúbica de Bézier, que se define con 4 puntos:
P1: Punto de anclaje inicial.P2: Punto de control que "tira" del inicio de la curva.P3: Punto de control que "tira" del final de la curva.P4: Punto de anclaje final.
¶ Las Casillas Clave para Curvas Bézier
| Casilla | Su Rol en las Curvas |
|---|---|
loop |
Aunque su función principal es crear bucles, para las curvas es nuestra herramienta para definir la resolución. Un valor alto (ej: 50) creará una curva suave y detallada, mientras que un valor bajo (ej: 5) creará una versión más "segmentada" y angular. |
variable |
Es el cerebro de la operación. Aquí definiremos los puntos de anclaje y control de nuestra curva y realizaremos los cálculos principales. Usaremos esta casilla para preparar toda la información que necesitarán las demás. |
fun_x y fun_y |
Estas casillas reciben el resultado de los cálculos de la casilla variable para determinar la forma base de la trayectoria. fun_x define el componente horizontal del movimiento y fun_y el vertical. |
scale_x y scale_y |
Una vez que tenemos la forma de la curva, estas casillas nos permiten estirar o encoger su tamaño en el eje X e Y, respectivamente. Un valor de 2 duplicará su tamaño en ese eje. |
center_x y center_y |
Son las coordenadas del punto de origen de nuestra curva. Una vez que la curva tiene su forma y tamaño, este es el punto en la pantalla desde donde se dibujará. A menudo usaremos syl.center y syl.middle para que cada sílaba tenga su propia curva. |
pos_x y pos_y |
Estas casillas toman el resultado de todo lo anterior (fun_x/y, scale_x/y, center_x/y) y lo aplican para obtener la posición final del objeto en pantalla. |
add_tags |
Casilla multifuncional. En el contexto de las curvas, la usaremos principalmente para añadir el tag \frz y lograr que nuestros objetos roten automáticamente para seguir la trayectoria. |
Con estas herramientas en mente, ya están listos para construir su primera curva. Pasemos al primer método.
¶ Método 1: Sistema Paramétrico con math.bezier()
math.bezier()¶ Cómo funciona math.bezier en Kara Effector
math.bezier en Kara Effectormath.bezier(Return, p1x, p1y, p2x, p2y, ...)
-
Argumentos:
Return(string): Debe ser"x"o"y". Le dice a la función qué coordenada quieren calcular....: Una lista plana de números que representan las coordenadas de los puntos de la curva, en orden:P1x, P1y, P2x, P2y, P3x, P3y, P4x, P4y.
-
Variable Implícita
module: A diferencia de otras implementaciones, esta función no necesita que le pasen el progreso. Automáticamente utiliza la variable globalmodule(que va de 0 a 1 a lo largo del bucle) para calcular el punto en la curva.
Esto significa que el cálculo se hace directamente en las casillas fun_x y fun_y, y los puntos se definen en variable.
¶ Ejemplo práctico: Creando una curva en "S"
Vamos a crear nuestra animación de la curva en "S" usando la sintaxis correcta.
-
Configurar el bucle:
- En la casilla
loop:20(Esto generará 20 objetos para formar nuestra curva).
- En la casilla
-
Definir los puntos de la curva: La forma más limpia es agrupar las coordenadas en una tabla.
- En la casilla
variable:
-- Define los 4 puntos de la curva como una tabla plana de números. -- Formato: {P1x, P1y, P2x, P2y, P3x, P3y, P4x, P4y} puntos_s = {0, -50, 100, -50, -100, 50, 0, 50}; - En la casilla
-
Llamar a
math.bezierdesdefun_xyfun_y:- En la casilla
fun_x:
-- Pedimos la coordenada X. 'unpack' convierte la tabla 'puntos_s' -- en una lista de argumentos para la función. math.bezier("x", unpack(puntos_s))- En la casilla
fun_y:
-- Hacemos lo mismo para la coordenada Y. math.bezier("y", unpack(puntos_s)) - En la casilla
-
Configurar el resto de la interfaz:
- En la casilla
s_i:0(Aunquemath.bezierno la usa directamente, es buena práctica mantenerla). - En la casilla
s_f:1 - En la casilla
center_x:syl.center(Cada curva nacerá desde el centro de su sílaba) - En la casilla
center_y:syl.middle - En la casilla
start_tyend_t: Los tiempos que deseen (ej:l.start_time + syl.start_time + 300myfx.start_time + 150en Template Type Syl). - En las casillas
pos_xypos_y:fx.pos_xyfx.pos_y.
- En la casilla
Al aplicar el efecto, el resultado visual será una curva en "S" perfecta, y el código será mucho más limpio y eficiente. Si quieren cambiar la forma, solo deben editar la tabla puntos_s en la casilla variable.
¶ Método 2: Usando la Biblioteca shape
shape¶ Coordenadas o Tags de Animación
math.beziercalcula y devuelve coordenadas numéricas (un valor X y un valor Y). Estos números se introducen en el sistema paramétrico (fun_x,fun_y) para que Kara Effector construya una posición.shape.smoveconstruye y devuelve un string de texto que es una animación completa. No genera un simple tag\move. En su lugar, utiliza una técnica avanzada que combina\p1con una larga cadena de tags\t(...)que animan\fscxy\fscypara funcionar como un sistema de posicionamiento absoluto.
Debido a esta diferencia, se usan en casillas distintas:
math.bezierse usa envariableyfun_x/fun_y.shape.smovese usa enadd_tagsoreturn(fx).
¶ Función clave: shape.smove( shape, t1, t2 )
shape.smove( shape, t1, t2 )-
Descripción: Esta potente función genera una secuencia de animación completa que hace que un objeto se mueva a lo largo del contorno de una
shape. Internamente, convierte lashapeen una serie de puntos y crea una cadena de transformaciones\tque animan las propiedades\fscxy\fscypara posicionar el objeto en cada punto de la trayectoria. -
Argumentos:
shape(string): Lashapeque servirá de trayectoria.t1(número, opcional): El tiempo de inicio de la animación en milisegundos, relativo al inicio del efecto. Por defecto es0.t2(número, opcional): El tiempo de fin de la animación. Por defecto es la duración total del efecto (fx.dur).
-
Uso Correcto: Como devuelve un string de tags de animación listos para usar, su lugar ideal es en la casilla
add_tags. -
Ejemplo Práctico: Mover una sílaba por un corazón
-
Definir la trayectoria: Usaremos una de las figuras predefinidas de Kara Effector.
- En la casilla
variable:
-- Creamos una variable que contiene el código de la shape de corazón, -- y la escalamos a un tamaño de 100 píxeles. ruta_corazon = shape.size(shape.heart, 100); - En la casilla
-
Configurar el movimiento:
- En la casilla
start_t:l.start_time + syl.start_time - En la casilla
end_t:l.start_time + syl.end_time - En la casilla
pos_x:syl.center(Definimos una posición inicial estática.shape.smovegenerará su propia animación de posicionamiento). - En la casilla
pos_y:syl.middle - En la casilla
add_tags:
-- La sílaba se moverá por 'ruta_corazon' desde el tiempo 0 -- hasta el final de la duración del efecto (fx.dur). shape.smove(ruta_corazon, 0, fx.dur) - En la casilla
Al aplicar este efecto, Kara Effector generará una línea de diálogo con una compleja animación usando
\ty\fscx/\fscyque sigue precisamente el contorno del corazón. -
¶ Consejos y Trucos Finales
- Visualicen su trayectoria: Antes de aplicar un efecto con mucho texto o partículas, creen un "trazador". Usen un
loopalto (ej:100), unreturnsimple como{\p1}m 0 0 l 1 0(un pequeño punto), y tiempos fijos (l.start_timeyl.end_time). Esto les dibujará la curva en pantalla para que puedan ajustarla visualmente sin generar cientos de líneas de diálogo. - Limpien sus
shapes: Cuando trabajen conshapespersonalizadas (códigom l b c), es una excelente práctica pasarlas porshape.ASSDraw3()en la casillavariable(mi_shape = shape.ASSDraw3(mi_shape)). Esto estandariza el formato y previene errores. - De Rectas a Curvas: Si tienen una trayectoria hecha de líneas rectas (
l) pero quieren suavizar las esquinas, usenshape.to_bezier(mi_shape). Esta función convierte automáticamente las líneas en curvas suaves.
Las curvas Bézier son la puerta de entrada a efectos verdaderamente impresionantes. Les animo a que experimenten combinando estos métodos, jugando con los puntos de control, usando diferentes shapes como trayectorias y mezclándolos con las funciones de tiempo y bucles. ¡Las posibilidades son infinitas!