Antes de poder entrar en materia sobre la animación, debemos saber ¿Qué es la animación?

Entendemos como animación el proceso en el que se logra dar movimiento a dibujos u objetos inanimados. Ya sean dibujos, renders o fotografías (Modelado 3D, stop motion…) Técnicamente la animación viene a ser una secuencia de imágenes, que al mostrarlas de forma consecutiva, logra un efecto de movimiento creible para nuestro ojo y cerebro.Sin embargo, la animación es mucho mas que eso. Animar tiene su origen en el latín “Anima” y cuyo significado es “Alma”. Por lo tanto animar consiste en dar alma a un personaje o un objeto de forma que parezca que este cobre vida, piense y actúe por si mismo. En definitiva, un animador 3d, 2d, stop motion, etc (da igual la técnica) debe tener la capacidad de dar vida.https://www.notodoanimacion.es

Me parece una descripción muy acertada de lo que es la animación.  A partir de aquí y ya sabiendo en qué consiste la animación, te voy a hablar de los 12 principios de la animación según Disney. Desde que el tema de la animación se industrializó, los animadores han ido recopilando sus sapiencias y las han divulgado de forma pasiva entre generaciones, estudios, y otros trabajos. Pero nunca ha existido una serie de normas, o principios (como es el caso) para animar. Cierto es que la mayoría de animadores utilizaban técnicas comunes. Pero no fue hasta 1981 donde Frank Thomas y Ollie Johnston (dos de los Nine Old men*) escribieron el libro Illusion of Life, donde destripaban todos los secretos de la animación que hacía Disney y, ahí, es donde se habló por primera vez y de forma estandarizada de “Los 12 principios de la animación” según Disney.

                                                                                                                                                                                                                              Frank & Thomas – Illusion of Life 1981

*Los Nueve Ancianos de Disney (Disney’s Nine Old Men) fueron los pioneros en la producción de animaciones en la compañía de Walt Disney y en quienes delegó cada vez más tareas en el departamento de animación a principios de la década de 1950.

#| – Squash y Stretching

En español comúnmente llamado “aplastar y estirar” Esta técnica consiste en básicamente como su nombre indica, aplastar y estirar los objetos.

#2 – Anticipación

Esta acción sirve para que el espectador centre su atención en lo que va a suceder. Por ejemplo, para que un personaje lance un puñetazo, primeramente antes de lanzar dicho puñetazo, tendrá que echar el brazo para atrás como para coger “carrerilla”. Además, la anticipación ayuda a que la acción posterior tenga más fuerza.

#3 – Staging (puesta en escena)

El lugar que ocupa el objeto en la escena es importante. La puesta en escena del objeto que vaya a ser animado, debe ser clara y concisa. No podemos tener una escena y un personaje en el cual va a girar la acción arrinconado en una esquina, debe estar en un plano muy visible.

#4 – Animación hacia adelante y “pose to pose”

La animación POSE TO POSE funciona cuando los fotogramas clave indican exactamente qué va a suceder con un personaje. Por ejemplo si tuviéramos el personaje anterior donde va a lanzar un puñetazo, deberíamos de tener en cuenta al menos tres posiciones clave.

1. El personaje tiene el brazo echado hacia atrás para coger impulso en el golpe
2. El personaje tiene el brazo estirado y el cuerpo hacia adelante dando el golpe.
3. El personaje vuelve a una postura más relajada ya que el golpe ha finalizado.

Si las poses clave son correctas, sin necesidad de hacer imágenes intermedias debería ser claramente visible lo que sucede en la acción.

La animación hacia adelante teniendo en cuenta el ejemplo anterior sería la suma de los tres fotogramas clave y todos los dibujos que hay entre medio para realizar la acción.

#5 – Acción continuada y acción superpuesta

Cuando un objeto se mueve, las otras partes del objeto le siguen a diferentes ritmos. Por ejemplo. Imaginémonos que tenemos un superhéroe que lleva un casco con dos antenas. Cuando este gira la cabeza, la acción de la cabeza girándose ha terminado, pero las dos antenas están moviéndose como si fueran dos muelles. Siguiendo ese movimiento previo de la cabeza pero indicando que son menos resistentes al aire y por eso se mueven como un muelle.

#6 – Aceleración y desaceleración

Cuando un objeto se mueve (a excepción de que sea algo robótico o mecánico) normalmente no se mueve a un ritmo 100% igual. Para que nos entendamos pongamos un ejemplo: Pensad en un coche. Cuando tu lo arrancas no pasa de 0 a 100km/h nada más acelerar. Sino que empieza a moverse lentito y luego cada vez mas rápido hasta que alcanza su velocidad máxima de 100kmh. Eso sería una aceleración. Y la desaceleración es lo mismo pero a la inversa. Para frenar el coche por mucho que tu pises a fondo, no se va a detener de golpe sino que irá perdiendo velocidad con el tiempo. En animación sucede lo mismo pero en vez de con un coche, con fotogramas. 

#7 – Arcos

La mayoría de los movimientos en la naturaleza o en la vida real se pueden ejemplificar con arcos. Imaginemos una flor meciéndose al son del viento. ¿Cómo lo ves? Verdad que hace un arco de lado a lado? ¿Y si levantas un brazo? No lo mueves recto, sino que  tu hombro que es el punto de anclaje, hace que al levantar el brazo se mueva de forma arqueada. Hacer animaciones curvas en ese sentido ayudará a una mejor comprensión de la animación.

#8 – Acción secundaria

A diferencia de la #5 esta acción no es superpuesta. Si no que es una acción totalmente independiente de la acción principal. En la acción superpuesta digamos que las acciones más pequeñas (como el movimiento tipo muelle de las antenas de nuestro personaje) son una consecuencia de que el personaje haya movido la cabeza. En cambio imaginemos que tenemos un personaje con una gorra y que al saltar, la gorra se eleva hasta el cielo y hace una cabriola como si tuviera vida propia y luego cae nuevamente en la cabeza del personaje. Ese movimiento secundario de la gorra, ayuda a reforzar el movimiento principal que es el salto del personaje. 

#9 – Timing

Menos dibujos entre fotogramas clave hacen que la animación sea más rápida y más energica. Mas fotogramas hace que la animación sea mas suave y lenta. Mezclar el timing con fotogramas rapidos y lentos ayuda a que la animación sea más orgánica. Nosotros no parpadeamos al mismo ritmo que levantamos un brazo, ¿cierto? Además esto ayuda a que los objetos tengan más o menos peso.

#10 – exageración

Intentaremos mantenernos siempre dentro de la “legalidad” posible en cuanto a lógica en nuestra animación, pero si es necesario exagera las cosas (hazlas más grandes incluso) para que la acción que suceda en pantalla quede clara al espectador.

#11 – DIBUJOS SOLIDOS

Ten en cuenta que todos tus personajes u objetos que vayas a dibujar ocupan un hueco en el espacio. Ten en cuenta sus perspectivas, sus volúmenes, pesos etc… Que mantenga unas lógicas de entorno ayudará a que sea más creible.

#12 – Appeal

Dotar a tus personajes de carisma en el movimiento, y hacer que se muevan fluidos ayudará a que tu personaje tenga personalidad. Pongamos un ejemplo. No va a andar igual un personaje gordo y grueso que un personaje bajito. Posiblemente el gordo ande más lento y se contonee más cuando anda. Y en cambio el bajito dará pasitos más chiquititos y rápidos.

Animación por subpixel

Bien, ahora que ya sabes los principios de animación, es hora de que entremos un poco más en detalle en cuanto a técnicas de animación en pixelart. Si bien es cierto que para cualquier animación ya sea 2D o 3D todos los animadores se basan en los doce principios anteriores, en pixelart podríamos añadir un principio más llamado “Subpixeling”

La teoría dice que no se puede hacer un movimiento menor a “un pixel”. Pero claro, eso es en la teoría, en la práctica sí que podemos al menos, falsear esa opción.

Imaginemos que yo tengo este grid con un pixel blanco. Y quiero moverlo hacia la derecha. Realmente puedo moverlo un pixel, pero si quiero que haya una transición entre ese pixel y el siguiente de la derecha. No podría a menos que utilice el subpixeling.

El subpixeling consiste en “migrar” paulatinamente un pixel hacia otro sitio dejando una “estela” donde antes estaba el pixel y una estela previa a donde va a ir el siguiente pixel. Veamos un ejemplo para entendernos:

(El pixel se mueve de un lado a otro dejando una estela tras de si)

Si nos fijamos podemos ver como el cuadro blanco se va desvaneciendo para aparecer en el siguiente pixel, pero hemos mantenido una animación para que no sea de golpe sino por transición. Con esto conseguimos engañar al ojo y que parezca que el pixel se mueve mas lento de un sitio a otro.

Puedes ver ejemplos de subpixeling en las animaciones de varios juegos como por ejemplo toda la saga de Metal Slug. Se utiliza normalmente para hacer movimientos de bamboleo, respiraciones leves, sacudidas rápidas o efectos de viento.

No te preocupes si no terminas de entender bien como funciona esta técnica, ya que con el video de apoyo se entenderá todo mejor. Además, la animación por subpixel no es muy común a día de hoy en pixelart para videojuegos dada la complejidad y el tiempo que se tarda en dominar esta técnica. Así que no te preocupes. Practicando lo conseguirás y tu mismo/a sabrás si vale la pena o no.