En el artículo anterior diseñamos un personaje simple en Inkscape usando formas básicas. Ahora llegó la parte divertida: hacerlo caminar.

En este tutorial vamos a ver cómo crear una animación sencilla de caminata cuadro a cuadro y cómo exportarla como hoja de sprite (o sprite sheet) para usarla dentro de Godot.

Aunque caminar parece algo muy natural, cuando intentamos animarlo descubrimos que el cuerpo hace muchísimos movimientos pequeños: las piernas se flexionan, los brazos acompañan, la cabeza sube y baja y el peso cambia constantemente de un lado al otro.

La buena noticia es que no hace falta hacer algo hiper complejo para lograr un resultado convincente. Con apenas 8 cuadros por segundo ya podemos conseguir una animación muy simpática y funcional para un juego 2D.

Adaptar la rejilla para la animación

En el tutorial anterior la rejilla era de:

• 80 x 120 px

Pero para esta animación se modificó a:

• 35 x 120 px

¿Por qué?

Porque hacía falta una guía central más precisa para controlar mejor el movimiento del personaje.

Para modificar la rejilla en Inkscape:

Archivo → Propiedades del documento → Rejillas

Allí podemos ajustar:

• tamaño horizontal

• tamaño vertical

• separación de cuadrícula

Cómo funciona una caminata

Caminar parece simple… hasta que intentamos dibujarlo 😄

Para entender mejor el movimiento se usó un “fosforito” o muñeco guía.

La idea básica es:

• cuando avanza una pierna, el brazo opuesto acompaña

• el peso del cuerpo cambia constantemente

• la cabeza sube y baja ligeramente

• los pies nunca hacen exactamente el mismo movimiento

Por ejemplo:

• el pie izquierdo avanza

• el brazo derecho acompaña

• el pie derecho impulsa el cuerpo desde atrás

Y luego todo se invierte.

Los 8 cuadros de la animación

La animación se hizo usando:

• 8 cuadros por segundo

Cada cuadro representa una fase distinta del paso.

Cuadro 1

• pie izquierdo adelante

• talón apoyándose

• pie derecho impulsando atrás

Cuadro 2

• el pie izquierdo queda firme

• el derecho comienza a despegarse

Cuadro 3

• el pie derecho se eleva

• cambia el peso del cuerpo

Cuadro 4

• el pie derecho avanza

• el izquierdo impulsa

Y luego el ciclo continúa hasta volver a la posición inicial.

El movimiento de la cabeza

Uno de los detalles más importantes es observar que al caminar:

• la cabeza sube y baja

Cuando hacemos fuerza con una pierna:

• el cuerpo se eleva un poco

Cuando cambiamos el peso:

• vuelve a bajar

Ese pequeño movimiento hace que la animación se vea muchísimo más natural.

Un buen consejo es mirar videos de personas caminando en cámara lenta para estudiar cómo se mueve realmente el cuerpo.

Ajustar los centros de rotación

Como este personaje no tiene rodillas reales, hubo que “engañar” un poco el movimiento.

Las piernas tienen el centro de rotación colocado bastante arriba para que parezca que caminan como pequeños zancos.

Para mover el centro de rotación:

1. Seleccionar el objeto

2. Hacer clic nuevamente

3. Arrastrar la cruz del centro de giro

Eso permite:

• girar piernas

• mover brazos

• generar caminatas suaves

Mantener el personaje centrado

Un detalle muy importante:

El cuerpo del personaje debe permanecer centrado en la cuadrícula.

Esto ayuda a que:

• los cuadros no “salten”

• la animación quede estable

• el personaje no tiemble al reproducirse

Las piernas y brazos sí pueden moverse libremente, pero el centro del cuerpo conviene mantenerlo fijo.

Exportar la spritesheet desde Inkscape

Cuando todos los cuadros están listos:

Configurar el tamaño del documento

Ir a:

Archivo → Propiedades del documento

En este caso:

• 750 px de ancho

• 240 px de alto

Eso depende de:

• cantidad de cuadros

• tamaño de cada celda

• cantidad de filas

Exportar como PNG

Ir a:

Archivo → Exportar

Luego:

• elegir “Exportar página”

• guardar el PNG en una carpeta fácil de encontrar

Ese PNG contendrá todos los cuadros de animación.

Importar la animación en Godot

En este tutorial se utilizó la versión:

• Godot 3.5

Aunque también puede hacerse en versiones más nuevas.

Crear el proyecto

Abrimos Godot y hacemos:

Nuevo proyecto

• elegir carpeta

• asignar nombre

• Crear y editar

Luego:

• seleccionar modo 2D

Crear el personaje

Agregar nodo principal

Ir a:

Otro Nodo → KinematicBody2D

Ese nodo será el personaje principal.

Agregar Animated Sprite

Luego:

Agregar Nodo → AnimatedSprite

Importante:

• elegir el de 2D

• no el de 3D

Importar el PNG

Arrastrar el archivo PNG al panel de recursos de Godot.

Después:

1. Seleccionar AnimatedSprite

2. Buscar “Frames”

3. Elegir “Nuevo SpriteFrames”

Crear la animación

Dentro del panel de animaciones:

• crear una nueva llamada “Caminar”

Luego:

1. Clic en el ícono de cuadrícula

2. Seleccionar el PNG

3. Configurar:

• Horizontal: 8

• Vertical: 2

Godot automáticamente separará los cuadros.

Agregar los fotogramas

Seleccionamos:

• los 8 cuadros superiores

Luego:

Añadir 8 fotogramas

Y finalmente:

• velocidad: 8 FPS

Reproducir la caminata

Seleccionar:

AnimatedSprite → Playing

Y el personaje comenzará a caminar automáticamente.

Crear otra animación

También se creó otra animación llamada:

• “Pestañeo”

Usando los 8 cuadros de la fila inferior.

Eso permite agregar pequeños detalles de vida al personaje sin demasiado trabajo extra.

Guardar la escena

Finalmente:

Archivo → Guardar escena

O simplemente:

• CTRL + S

Conclusión

Animar personajes puede parecer complicado al principio, pero estudiando movimientos simples y trabajando cuadro a cuadro se pueden lograr resultados muy interesantes incluso con personajes minimalistas.

Lo más importante es observar:

• cómo cambia el peso del cuerpo

• cómo se mueven brazos y piernas

• cómo la cabeza acompaña el movimiento

Y después… practicar muchísimo 😄

Mirá el tutorial completo

En el siguiente video podés ver todo el proceso paso a paso: desde la animación en Inkscape hasta la importación y reproducción en Godot.