Tutorial: Aprendiendo a animar en 2d ( en 10 pasos)

Para el que tenga alguna inquietud o mera curiosidad por la animación de la vieja escuela, aquí traigo unos sencillos 10 pasos para empezar a crear sprites animados.

En este tutorial voy a explicar las bases para crear una sencilla animación frame a frame.

Desde descargar el software hasta el resultado final.

Resultado final

Existen diversos programas para ello pero el que más me ha convencido es el Cosmigo Promotion que además puede descargarse mínimamente capado y se puede usar hasta 30 dias antes de que prohíba guardar nuestros proyectos. Más que suficiente.

Este es su aspecto:

Si aún sigues teniendo curiosidad y te animas, después del salto está toda la información necesaria.





Paso 1:


Cosmigo Promotion es un programa muy potente y versátil que lamentablemente no dispone de mucho tutorial en la red ni ayuda que no sea la de los videos (de bajísima calidad) que nos dejan descargar de su web. Por eso encuentro que alguien debía empezar, y si está en Spanish, mejor, verdad?

Ya va por su versión 6 y está muy enfocado para el diseño y animación en videojuegos 2d.

• Dercarga gratuítamente la versión Trial de Cosmigo Promotion v6 . (permite guardar hasta el primer mes)

Paso 2:

Como en cualquier programa de dibujo que se precie, las funciones son fáciles de asimilar. He marcado las 3 principales.

1. Esta es la herramienta para dibujar en linea continua, básica.

2. Cortar. Nos permitirá recortar zonas de dibujo y usarlas directamente como una brocha.

3. Rellenar color.

Recomiendo que en preferencias estos tres comandos se asignen a tres teclas personalizadas, en mi caso, Z para cortar, X para pintar y C para dibujar continuo.

Hecho esto no hay más que hacer un pequeño esbozo para posicionar a nuestro personaje.

Paso 3:

Nos tomamos nuestro tiempo para dibujar encima del esbozo hasta conseguir el resultado deseado. En este caso, no lo he hecho (juas!)

Paso 4:

Colocamos al personaje en posición para poder animarlo y lo siguiente será configurar las capas. Esto sirve para poder dibujar los diferentes frames y a la vez poder ver la anterior página para guiarnos. Igual que si pintáramos encima de un papel vegetal.

1. Pinchamos encima del botón de Capas. Surgirá una nueva ventana llamada 'Layer Settings'.

2. Pulsamos en añadir nueva capa

Paso 5:

Primero le ponemos un nombre, en este caso 'Frame anterior' , seguimos:

1. Marcamos en la casilla 'frame position x,x" -1 para indicar que queremos ver el frame anterior para guiarnos.

2. Ponemos una opacidad del 50%  para que el dibujo anterior no se mezcle con el de la página actual.

3. Pulsamos sobre Guess para que deduzca el color de fondo que tenemos en ese momento.

Tranquilo si parece lioso, en un momento lo podrás ver gráficamente.

Paso 6:

En la misma ventana de 'Layer Settings' pasamos a seleccionar la pestaña Background. 

El color de fondo ahora mismo es turquesa y ahí sale negro, por lo que al pinchar encima del color nos saldrá la ventana de tonos para que elijamos el color que queramos. 

En este caso es turquesa pero puede ser cualquier color.

Paso 7:

En la parte inferior de la pantalla tenemos la información que necesitamos para añadir o quitar frames ( hojas para los distintos movimientos paso a paso de nuestro personaje)

Pulsamos sobre el botón ' + ' para añadir una nueva página.

A la izquierda de la imagen vemos el numero de paginas que tenemos actualmente, en este caso '2'.

Paso 8:

Nos aseguramos que la capa que habíamos creado se encuentre en la parte superior como en la imagen pues sino se sobrepondría y no serviría para nada.

Ahora, si pintamos con el color de fondo (que hemos definido turquesa en mi caso) vemos como el personaje de la página 1 se ve de fondo transparentado al 50 %.

Aquí vemos otro ejemplo en el que se vé más claro.

En este punto añadimos las páginas necesarias y nos entretenemos en crear nuestra animación. Para pasar de un frame a otro podemos hacerlo en la barra inferior como indicaba antes, o más sencillo pulsando la tecla 1 para ir hacia atrás y 2 para pasar a la página siguiente.

Paso 9:

Para ver como ha quedado la animación no tenemos más que pulsar la tecla ' 4 ' y se abrirá una ventana con nuestra animación en un bucle infinito.

Es recomendable en este momento:

1. Desactivar el icono de capas para ver la animación limpia.

2. Como verás la animación va demasiado rápido. Pulsaremos sobre la opción 'Slower' las veces necesarias hasta encontrar la velocidad óptima.

Paso 10:

Lo último es seleccionar la herramienta de recorte para grabar nuestra animación en un encuadre más ajustado.

Cuadriculamos y volvemos a clicar encima y ya está.

Aspecto final:

Una vez grabada la animación, este es el resultado:

A partir de este punto ya podemos empezar a complicarnos lo que queramos. 

Con este tutorial ya tienes las bases necesarias para crear tus animaciones si bien es cierto que el programa encierra muchas más utilidades.

Espero haber servido de ayuda para alguien, cualquier duda estaré encantado de responder en lo que pueda ;)