domingo, 19 de diciembre de 2010

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 ;)

19 comentarios:

  1. EL tutorial te ha quedado GENIAL, creo que voy a poner una referencia en mi blog!

    ResponderEliminar
  2. ¡Hecho! http://josezanni.com/452/tutorial-aprendiendo-a-animar-con-pixels-en-10-pasos

    ResponderEliminar
  3. Me alegro que te haya gustado! ;)

    un saludo!

    ResponderEliminar
  4. Muy interesante y muy oportuno, que estaba pensando en hacer una cosica de estas como regalo de cumpleaños personalizado

    ResponderEliminar
  5. Ya me contarás como te ha quedado! cualquier duda pregunta ;)

    ResponderEliminar
  6. Te ha quedado de puro lujo el tutorial.
    Impresionante si señor.
    Aprovecho la ocasión para felicitarte este nuevo año que se avecina!

    ResponderEliminar
  7. Muchas gracias!
    Que tengas un buen año ;)

    ResponderEliminar
  8. gracias! llevaba buscando algo asi un tiempo.
    Un saludo.

    ResponderEliminar
  9. Me alegro que te haya sido de utilidad ;)

    ResponderEliminar
  10. hola, veo que el post es antiguo y espero que respondas mi consulta, me parecio genial el tutorial, pero quisiera saber como reducir la velocidad al momento de guardar la animacion

    ResponderEliminar
  11. Hola! Pues en cosmigo promotion al apretar la tecla " 4 " se reproducirá la animación en bucle para que veas como queda. Ahora solo tienes que aumentar o disminuir la animación pulsando en la pestaña indicada en la misma ventana.

    Si aún así quieres alargar más algún frame, lo suyo es que dupliques el frame en cuestión.

    En photoshop es algo más complicado que eso pero puedes poner cuantos milisegundos quiere que dure cada frame independientemente.

    ResponderEliminar
  12. Hola toni, realmente estoy queriendo meterme de lleno en el cuento, estoy aprendiendo algunas cosillas de programación, y pues, quería preguntarte, si hay alguna forma de obtener el Cosmigo promotion pero crackeado y full. Gracias.

    ResponderEliminar
    Respuestas
    1. No hay mucha información acerca de Cosmigo en la red y mucho menos una versión crackeada. Además creo que su creador merece una ayuda por semejante trabajo!

      De todas formas una alternativa muy buena es Graphics Gale, programa gratuíto que utiliza muchísima gente del mundillo. Échale un tiento y me dices ;)

      Eliminar
  13. no ...... ese programa me mamo gayo y ni me mostro la animacion..... demaciado incomodo para mi...

    espero encontrar uno que me sirvaa :SS:

    porq ue hasta ahora el unico programa severo... presiso todavia no sirve para ahcer animaciones :S:S

    ResponderEliminar
    Respuestas
    1. Se puede animar con photoshop si lo prefieres. Uno muy usado es Graphics Gale, puedes probar con ese a ver que tal.

      Eliminar
    2. Muy bueno el tutorial, a ver si puedes hacer otra, explicando más herramientas. Saludos.

      Eliminar
  14. Hola! enhorabuena por vuestro tutorial, sin embargo tengo una tremenda duda, como guardo el archivo creado en formato gif para que se reproduzca en la pantalla una vez guardado? Muchísimas gracuas y enhorabuena!

    ResponderEliminar
    Respuestas
    1. Debes ir la barra superior y elegir "Save animation as..." Tienes distintas opciones como guardar un spritesheet o guardar las imagenes en archivos separados. Simplemente elige guardarlo con gif animado y listo. Un saludo!

      Eliminar

Gracias por comentar!

Quizás también te interese...