Work in progress

The content of this page was not yet updated for Godot 4.2 and may be outdated. If you know how to improve this page or you can confirm that it's up to date, feel free to open a pull request.

Animación de cortes

¿Qué es eso?

Tradicionalmente, la animación de recorte es un tipo de animación de stop motion en la que los trozos de papel (u otro material delgado) se cortan en formas especiales y se disponen en representaciones bidimensionales de personajes y objetos. Los cuerpos de los personajes suelen estar hechos de varias piezas. Los pedazos se arreglan y se fotografían una vez por cada cuadro de la película. El animador mueve y rota las piezas en pequeños incrementos entre cada toma para crear la ilusión de movimiento cuando las imágenes se reproducen rápidamente en secuencia.

Las simulaciones de animación de recortes pueden ser creadas ahora usando software como se ve en South Park y Jake and the Never Land Pirates.

En los videojuegos, esta técnica también se ha hecho popular. Ejemplos de esto son "Paper Mario" <https://en.wikipedia.org/wiki/Super_Paper_Mario>`__ o "Rayman Origins" <https://en.wikipedia.org/wiki/Rayman_Origins>`__ .

Animación de recortes en Godot

Godot proporciona herramientas para trabajar con equipos de corte, y es ideal para el flujo de trabajo:

  • El sistema de animación está completamente integrado con el motor: Esto significa que las animaciones pueden controlar mucho más que el movimiento de los objetos. Las texturas, los tamaños de los sprites, los pivotes, la opacidad, la modulación del color y más, pueden ser animados y mezclados.

  • Combine animation styles: AnimatedSprite2D allows traditional cel animation to be used alongside cutout animation. In cel animation different animation frames use entirely different drawings rather than the same pieces positioned differently. In an otherwise cutout-based animation, cel animation can be used selectively for complex parts such as hands, feet, changing facial expressions, etc.

  • Elementos de Forma Personalizada: Las formas personalizadas pueden ser creadas con Polygon2D permitiendo animación UV, deformaciones, etc.

  • Sistemas de partículas: Un equipo de animación de recortes puede combinarse con sistemas de partículas. Esto puede ser útil para efectos de magia, jetpack, etc.

  • Colisionadores Personalizados: Colisionadores y áreas de influencia en diferentes partes de los esqueletos, ideales para jefes y juegos de lucha.

  • Árbol de la Animación: Permite combinaciones complejas y mezclas entre varias animaciones, de la misma manera que funciona en 3D.

¡Y mucho más!

Creando a GBot

Para este tutorial, usaremos como contenido de demostración las piezas del personaje GBot, creado por Andreas Esau.

../../_images/tuto_cutout_walk.gif

Get your assets: cutout_animation_assets.zip.

Preparando el mecanismo de montaje

Crear un Nodo2D vacío como raíz de la escena, trabajaremos bajo él:

../../_images/tuto_cutout1.png

El primer nodo del modelo es la cadera. Generalmente, tanto en 2D como en 3D, la cadera es la raíz del esqueleto. Esto hace que sea más fácil de animar:

../../_images/tuto_cutout2.png

Lo siguiente será el torso. El torso necesita ser un hijo de la cadera, para crear un sprite hijo y cargar la textura del torso, más tarde la acomodaremos correctamente:

../../_images/tuto_cutout3.png

Esto se ve bien. Veamos si nuestra jerarquía funciona como un esqueleto rotando el torso. Podemos hacerlo presionando E para entrar en el modo de rotación, y arrastrando con el botón izquierdo del ratón. Para salir del modo de rotación pulsa ESC.

../../_images/tutovec_torso1.gif

El pivote de rotación está mal y necesita ser ajustado.

This small cross in the middle of the Sprite2D is the rotation pivot:

../../_images/tuto_cutout4.png

Ajustando el pivote

The pivot can be adjusted by changing the offset property in the Sprite2D:

../../_images/tuto_cutout5.png

The pivot can also be adjusted visually. While hovering over the desired pivot point, press V to move the pivot there for the selected Sprite2D. There is also a tool in the tool bar that has a similar function.

../../_images/tutovec_torso2.gif

Continúe añadiendo piezas al cuerpo, empezando por el brazo derecho. Asegúrate de poner cada sprite en su lugar correcto en la jerarquía, para que sus rotaciones y traslaciones sean relativas a su padre:

../../_images/tuto_cutout6.png

Con el brazo izquierdo hay un problema. En 2D, los nodos hijos aparecen delante de sus padres:

../../_images/tuto_cutout7.png

Queremos que el brazo izquierdo aparezca detrás de la cadera y el torso. Podríamos mover los nodos del brazo izquierdo detrás de la cadera (por encima del nodo de la cadera en la jerarquía de la escena), pero entonces el brazo izquierdo ya no está en su lugar correcto en la jerarquía. Esto significa que no se vería afectado por el movimiento del torso. Arreglaremos este problema con los nodos de RemoteTransform2D.

Nota

También puedes arreglar los problemas de ordenamiento de profundidad ajustando la propiedad Z de cualquier nodo heredado de Nodo2D.

Nodo RemoteTransform2D

El nodo RemoteTransform2D transforma los nodos en algún otro lugar de la jerarquía. Este nodo aplica su propia transformación (incluyendo cualquier transformación que herede de sus padres) al nodo remoto al que apunta.

Esto nos permite corregir el orden de visibilidad de nuestros elementos, independientemente de la ubicación de esas partes en la jerarquía de recortes.

Crear un nodo RemoteTransform2D como un hijo del torso. Llámalo remote_arm_l. Crea otro nodo RemoteTransform2D dentro del primero y llámalo remote_hand_l. Usa la propiedad Remote Path de los dos nuevos nodos para apuntar a los sprites arm_l y hand_l respectivamente:

../../_images/tuto_cutout9.png

Al mover los nodos de RemoteTransform2D ahora se mueven los sprites. Así que podemos crear animaciones ajustando las transformaciones de RemoteTransform2D:

../../_images/tutovec_torso4.gif

Completando el esqueleto

Completa el esqueleto siguiendo los mismos pasos para el resto de las partes. La escena resultante debería ser similar a esta:

../../_images/tuto_cutout10.png

El rig resultante será fácil de animar. Seleccionando los nodos y rotándolos puedes animar forward kinematics (FK) eficientemente.

Para objetos simples y aparejos esto está bien, pero hay limitaciones:

  • La selección de los sprites en el mirador principal puede resultar difícil en los aparejos complejos. El árbol de la escena termina siendo usado para seleccionar partes en su lugar, lo que puede ser más lento.

  • La Cinemática Inversa (IK) es útil para animar las extremidades como las manos y los pies, y no puede ser usada con nuestro equipo en su estado actual.

Para resolver estos problemas usaremos los esqueletos de Godot.

Esqueletos

En Godot hay un ayudante para crear "bones" entre los nodos. Los nodos vinculados a los huesos se llaman esqueletos.

Como ejemplo, convirtamos el brazo derecho en un esqueleto. Para crear un esqueleto, se debe seleccionar una cadena de nodos de arriba a abajo:

../../_images/tuto_cutout11.png

Luego, haz clic en el menú Esqueleto y selecciona Make Bones.

../../_images/tuto_cutout12.png

Esto añadirá los huesos que cubren el brazo, pero el resultado puede ser sorprendente.

../../_images/tuto_cutout13.png

¿Por qué la mano carece de un hueso? En Godot, un hueso conecta un nodo con su padre. Y actualmente no hay ningún hijo del nodo de la mano. Con este conocimiento vamos a intentarlo de nuevo.

The first step is creating an endpoint node. Any kind of node will do, but Marker2D is preferred because it's visible in the editor. The endpoint node will ensure that the last bone has orientation.

../../_images/tuto_cutout14.png

Ahora selecciona toda la cadena, desde el punto final hasta el brazo y crea huesos:

../../_images/tuto_cutout15.png

El resultado se parece mucho más a un esqueleto, y ahora el brazo y el antebrazo pueden ser seleccionados y animados.

Crear puntos finales para todas las extremidades importantes. Generar huesos para todas las partes articulables del recorte, con la cadera como la última conexión entre todas ellas.

Puede que noten que se crea un hueso extra al conectar la cadera y el torso. Godot ha conectado el nodo de la cadera a la raíz de la escena con un hueso, y no queremos eso. Para arreglar esto, selecciona el nodo de la raíz y la cadera, abre el menú de Esqueleto, haz clic en clear bones.

../../_images/tuto_cutout15_2.png

El esqueleto finalizado debería verse similar a esto:

../../_images/tuto_cutout16.png

Puede que hayas notado un segundo conjunto de puntos finales en las manos. Esto tendrá sentido pronto.

Ahora que todo el esqueleto está conectado, el siguiente paso es configurar las cadenas IK. Las cadenas IK permiten un control más natural de las extremidades.

cadenas IK

IK stands for inverse kinematics. It's a convenient technique for animating the position of hands, feet and other extremities of rigs like the one we've made. Imagine you want to pose a character's foot in a specific position on the ground. Without IK chains, each motion of the foot would require rotating and positioning several other bones (the shin and the thigh at least). This would be quite complex and lead to imprecise results. IK allows us to move the foot directly while the shin and thigh self-adjust.

Nota

IK chains in Godot currently work in the editor only, not at runtime. They are intended to ease the process of setting keyframes, and are not currently useful for techniques like procedural animation.

Para crear una cadena IK, selecciona una cadena de huesos desde el punto final hasta la base de la cadena. Por ejemplo, para crear una cadena IK para la pierna derecha, seleccione lo siguiente:

../../_images/tuto_cutout17.png

Entonces habilita esta cadena para IK. Ve a Edición > Hacer cadena IK.

../../_images/tuto_cutout18.png

Como resultado, la base de la cadena se volverá amarilla.

../../_images/tuto_cutout19.png

Once the IK chain is set up, grab any child or grand-child of the base of the chain (e.g. a foot), and move it. You'll see the rest of the chain adjust as you adjust its position.

../../_images/tutovec_torso5.gif

Recomendaciones para animaciones

La siguiente sección será una colección de consejos para crear animaciones para sus rigs cutout. Para más información sobre cómo funciona el sistema de animación en Godot, ver Introducción a las funciones de animación.

Asignando keyframes y excluyendo propiedades

Los elementos contextuales especiales aparecerán en la barra de herramientas superior cuando se abra el panel del editor de animación:

../../_images/tuto_cutout20.png

El botón clave inserta la ubicación, rotación y escala de los fotogramas clave de los objetos o huesos seleccionados en la posición actual de la cabeza de juego.

Los botones de conmutación "loc", "rot" y "scl" a la izquierda del botón de la llave modifican su función, permitiéndote especificar para cuál de las tres propiedades se crearán los fotogramas de clave.

Aquí hay una ilustración de cómo esto puede ser útil: Imagina que tienes un nodo que ya tiene dos fotogramas clave animando sólo su escala. Quieres añadir un movimiento de rotación superpuesto al mismo nodo. El movimiento de rotación debería comenzar y terminar en momentos diferentes del cambio de escala que ya está configurado. Puedes usar los botones de alternancia para que sólo se añada información de rotación cuando añadas un nuevo fotograma clave. De esta manera, puedes evitar añadir fotogramas clave de escala no deseados que podrían interrumpir la animación de escala existente.

Creando una posición de descanso

Piensa en una pose de descanso como una pose predeterminada que tu equipo de recorte debe estar configurado cuando ninguna otra pose esté activa en tu juego. Crea una pose de descanso de la siguiente manera:

1. Make sure the rig parts are positioned in what looks like a "resting" arrangement.

  1. Crea una nueva animación, renómbrala a "rest" (descanso).

  2. Selecciona todos los nodos de tu equipo (la selección de la caja debería funcionar bien).

4. Make sure the "loc", "rot", and "scl" toggle buttons are all active in the toolbar.

5. Press the key button. Keys will be inserted for all selected parts storing their current arrangement. This pose can now be recalled when necessary in your game by playing the "rest" animation you've created.

../../_images/tuto_cutout21.png

Modificando la rotación solamente

Cuando se anima un equipo de recorte, a menudo es sólo la rotación de los nodos lo que necesita cambiar. La ubicación y la escala se utilizan raramente.

Así que al insertar las teclas, puede que te convenga tener sólo la palanca de "rot" activa la mayor parte del tiempo:

../../_images/tuto_cutout22.png

Esto evitará la creación de pistas de animación no deseadas para la posición y la escala.

Fotogramas clave de cadenas IK

Cuando se editan cadenas IK, no es necesario seleccionar toda la cadena para añadir fotogramas clave. Al seleccionar el punto final de la cadena e insertar un fotograma clave, se insertarán automáticamente fotogramas clave hasta la base de la cadena.

Visualmente mueve un sprite detrás de su padre

A veces es necesario que un nodo cambie su profundidad visual en relación con su nodo padre durante una animación. Piensa en un personaje frente a la cámara, que saca algo de detrás de su espalda y lo sostiene frente a él. Durante esta animación todo el brazo y el objeto en su mano necesitarían cambiar su profundidad visual en relación al cuerpo del personaje.

Para ayudar con esto, hay una propiedad "Detrás del padre" en todos los nodos heredados de Node2D. Cuando planifiques tu equipo, piensa en los movimientos que tendrá que realizar y piensa en cómo usarás los nodos "Behind Parent" y/o RemoteTransform2D. Ellos proporcionan funcionalidad de superposición.

../../_images/tuto_cutout23.png

Configurar las curvas de relajación para múltiples teclas

Para aplicar la misma curva de relajación a varios fotogramas clave a la vez:

  1. Seleccione las teclas correspondientes.

  2. Haz clic en el ícono de lápiz en la parte inferior derecha del panel de animación, esto abrirá el editor de transiciones.

  3. En el editor de transiciones, haga clic en la curva deseada para aplicarla.

../../_images/tuto_cutout24.png

Deformación esquelética 2D

La deformación esquelética puede utilizarse para aumentar un aparejo de recorte, permitiendo que las piezas individuales se deformen orgánicamente (por ejemplo, las antenas que se tambalean cuando un personaje de insecto camina).

Este proceso se describe en un separate tutorial.