domingo, 8 de abril de 2012

Crear y animar un sprite (Tutorial paso a paso)

Hace lustros aprendimos en Pixels Mil a utilizar Comsigo Promotion para realizar una sencilla animación. El programa a escoger es indiferente pero las bases son siempre las mismas. Así que llega el momento de avanzar un poco más con una animación más elaborada.

En este post crearemos un sprite y crearemos una animación de carrera.




En el último número de Retromaniac expliqué lo mismo pero con un ejemplo más sencillo. Es la mejor manera de poder empezar así que os recomiendo el artículo para realizar algo como lo siguiente.


En ese ejemplo, las piernas son muy cortas para facilitar el animado y no empezar demasiado fuerte, así que esta vez lo complicaremos un poco. Os animo a probarlo o simplemente curiosear en el proceso, después del salto.



Antes de empezar quiero decir que hay cientos de maneras de trabajar y esta es solo la que uso. Cualquier paso puede realizarse de varias formas y pido disculpas con antelación por cualquier información que pudiera ser errónea. 


Lo primero es crear a nuestro personaje. Vayamos a poner un ejemplo para que el proceso sea más natural. Supongamos que queremos un protagonista para un plataformas futurista. Debemos pensar que es lo que buscamos y una buena manera de empezar es hacer un boceto con un color y definir así una silueta que nos pueda inspirar.


Podemos empezar a definir esa sombra y tener a un personaje con colores base.


Ya tenemos por donde empezar, así que es buen momento para darle unos tonos de luces y sombras. El sprite es muy pequeño por lo que un color más oscuro para la sombra y uno más claro para las luces, bastarán.

Elegimos un punto de luz y nos ponemos a pintar.


Ya tiene mejor aspecto, pero lo cierto es que es demasiado sencillo y sería bueno darle algo más de personalidad. No hay que dudar a la hora de inspirarse en algo existente. Digo 'inspirarse' no copiar. 

Puede parecer lo mismo, pero pienso que no pasa nada por coger ideas de cualquier fuente ya que probablemente esa fuente de la que cogemos la idea puede estar inspirada en otra cosa. La idea de crear algo nuevo e inexistente puede acabar por frustrarnos o por crear algo demasiado extraño que al final no funcione.

Así que vamos a darle un aspecto más chulesco con unas gafas, una gorra y unas buenas patillas pelirrojas. Además podemos ponerle algún miembro cibernético. Que tal un brazo biónico a lo megaman, por ejemplo?


Ya no es tan sencillo pero aún se puede hacer algo más. Vamos a remozar el brazo y a sustituir las gafas por unas tipo 'aviador'. La chaqueta algo más cerrada y unas rodilleras y tendremos listo a nuestro personaje.


Listo, tenemos a nuestro personaje. Por supuesto esto es solo un ejemplo, por lo que está en manos de cada uno el lograr crear a un personaje carismático o molón.

Llegados a este punto os habréis dado cuenta que el personaje está creado con muy pocos pixels. Este tutorial sirve para cualquier tipo de sprites sean del tamaño que sean, pero puesto que me gustan este tipo de gráficos y no he encontrado un tutorial del estilo, me he decidido por hacerlo así (además que es más sencillo y requiere de menos tiempo)

De todas formas, sé libre de complicar el dibujo tanto como quieras como en el siguiente ejemplo. Lo puedes hacer tan grande y detallado como quieras pero ten en cuenta que a la hora de animar todo lo que hagamos de más se nos puede volver en contra.



Crear animación

Ya tenemos a nuestro personaje así que ahora podemos ponernos a animarlo. Una buena manera es dibujar los movimientos de manera esquemática para trabajar más rápido ya que siempre tendremos tiempo después para poder detallarlo.

La animación escogida es la de carrera. Una buena manera de no empezar a ciegas es fijarse en el movimiento real ya sea por un video o por uno de los cientos de tutoriales de animación que corren por la red. 

Lo primero que debemos tener en cuenta es que cuando avanzamos una pierna, el hombro y el brazo contrario lo echamos para atrás. Con esa premisa que parece tan evidente, tenemos la base de la animación. 

Ahora hay que elegir cuandos frames (o pasos) queremos para nuestra animación. Lógicamente contra más frames, más fluídos serán los movimientos. Con 8 frames conseguiremos una animación muy suave mientras que con 4 será más brusca (pero se parecerá mucho a las animaciones de sistemas antiguos). En este ejemplo crearemos una animación en 6 frames, aunque acabaremos usando un par más de apoyo.

Empezamos por el primer paso. La pierna izquierda está en el suelo y la derecha flexionada empieza a levantarse. Los brazos flexionados. Como decía, empezaremos con unos bocetos.



El siguiente movimiento sigue teniendo contacto con el suelo. La pierna izquierda se queda atrás y la derecha pasa hacia delante. El brazo izquierdo deja de verse.


En este punto los pies ya no tocan el suelo así que hay que levantar el sprite un par de píxeles hacia arriba. La pierna derecha queda extendida casi por completo y el brazo izquierdo, como dije, queda echado para atrás. El exagerar un poco este frame le irá bien para darle dinamismo.


Aquí recordamos el primer frame pero cambiamos el orden. Esta vez la pierna derecha es la que toca el suelo y la izquierda está flexionada. Las rodillas convergen en el mismo punto y los brazos flexionados.


Aquí la pierna derecha se queda atrás y el brazo contrario empieza a asomar. Es buena idea pronunciar un poco el movimiento de hombros y de cabeza para una animación más pulida. De todas formas cuando definamos el sprite podremos corregir y definir el conjunto.


Aquí tenemos el frame final. La pierna izquierda extendida y los brazos también. Aquí tampoco toca el suelo por lo que subiremos el sprite un par de píxeles hacia arriba.


Ya tenemos la animación.



Es momento de verlo en movimiento. Como dije, la animación está compuesta por 6 frames pero si repetimos los que está en el aire, conseguiremos que parezca que pega unas zancadas más largas. Vamos a verlo.



Ahora podemos empezar a definir los frames. En este punto es importante acabar de pulir los detalles para que la animación quede lo más limpia posible. Como se puede ver en la anterior animación, muchos de los píxeles bailan ya que no hemos sido muy cuidadosos.

Es importante dar un color oscuro a los miembros que quedan en la parte de atrás, ya que conseguiremos diferenciar mejor los movimientos.



Mucho mejor. Aquí se ha tenido en cuenta el giro de la cabeza y el movimiento de las tiras de cuero que cuelgan de las gafas. Vamos a ver la animación final.


Y listo! Ya tenemos a nuestro héroe correteando y listo para usarlo en un videojuego o simplemente en un gif, por pura diversión. 

Para esto último, podemos añadirle el suelo, un fondo y guardar el trabajo como he dicho, en formato .gif.





Bueno, espero que os sirva esta información o por lo menos os resulte interesante. Si alguien se anima, ya sabe que puede preguntar cualquier cosa en los comentarios o en el correo de contacto, pixelsmil@gmail.com.



Iniciación | Promotion
Tutorial sencillo | Retromaniac 5

57 comentarios:

  1. simplemente genial, haces un trabajo estupendo con estos tutoriales.

    ResponderEliminar
    Respuestas
    1. Gracias Fast! Ojalá le sirva a alguien y se anime más de uno a intentarlo.

      Eliminar
    2. Primera vez que visito la pagina, muy buena! Ahora chequeo los demás tutoriales, gracias!

      Eliminar
    3. Primera vez que visito la pagina, muy buena! Ahora chequeo los demás tutoriales, gracias!

      Eliminar
    4. Me alegro que hayas empezado con buen pie por aquí, te espero en los otros tutoriales ;)

      Eliminar
  2. Respuestas
    1. Empezar con dibujos pequeños es una buena manera de ir poco a poco, de todas formas esas bases se pueden llevar a sprites más complejos. Se puede complicar a partir de ahí lo que uno quiera :)

      Eliminar
  3. Paren máquinas, un nuevo tutorial del maestro Toni!
    Que nadie se lo pierda, porque vale su peso en oro!

    ResponderEliminar
    Respuestas
    1. Jajaja muchas gracias José! aún sigo en fase de aprendiz pero me parece buena idea poder ir aprendiendo y mostrando a la vez.

      Eliminar
  4. A mí me gustaría tener maña y paciencia para hacer estas cosas, Toni. Soy muy burro dibujando; si tuviera la gracia que tú tienes, me parece que me animaría a hacer un videojuego, mira lo que te digo.

    ResponderEliminar
  5. la primera animación me suena :P, lo que he trabajado con ella :(.

    Eres un puñetero artista tío, me encanta como queda y me ha recordado a Canabalt, lo que mejoraría con una pasada tuya :).

    Donde yo solo veo un punto tu ves el principio de un gran dibujo, de veras que no tengo palabras para la facilidad de crear a través de pixeles que tienes.

    ResponderEliminar
    Respuestas
    1. Es verdad, ese sprite pero barbudo jeje como va ese tema? Me imagino lo pesado de empezar desde cero..
      Gracias por ese comentario Linfocito. Supongo que esa fascinación con los píxeles han conseguido que siga dibujando de vez en cuando y no me aburra por el momento. Ojalá dure y pueda mejorar, que es echar un ojo a la red y venirse uno abajo xd

      Eliminar
  6. Genial tio, muy chulo el personaje y muy bien la animacion, por otra parte Promotion es mi programa favorito para animar y pixelar.

    ResponderEliminar
    Respuestas
    1. Me alegra ver a alguien que use también pro motion! La verdad es que me parece muy buen programa aunque al principio se me hizo un poco duro aprender a usarlo sobretodo por la falta de información. Una vez dominado me parece muy bueno y lleno de posibilidades.
      Gracias por tu comentario Toni ;)

      Eliminar
  7. Espectacular Toni al final voy a aprender algo de diseño gracias a ti :D tengo que practicar pues me he leído todos tus tutoriales pero aún no los he puesto en práctica y mira que me interesa pq siempre he tenido ganas de hacer un juego pero estoy cojo en diseño.

    ResponderEliminar
    Respuestas
    1. Si te gusta el aspecto retro ya ves que todo es paciencia a la hora de colocar los píxeles e ir viendo como quedan una vez animados. Si alguna vez te animas, ya sabes, puedes empezar por el tuto de Retromaniac y luego ir probando cosas cada vez más complicadas. En internet hay cientos de tutoriales muy buenos.
      Además, no dudes en decírmelo para poder ayudarte con cualquier duda :)

      Eliminar
  8. ¡Genial tu entrada y tus dibujos Toni! Yo creo que por desgracia nunca me animaré a probarlo, dibujar bien siempre será una tarea pendiente para mí. Es algo que me cuesta tanto que al final me desanimo y más viendo gente con mucho "arte" para estas cosas, nunca mejor dicho.

    ResponderEliminar
    Respuestas
    1. Como siempre digo, si hay ganas siempre se puede hacer algo, sobretodo trabajando a bajas resoluciones. Gracias por tu comentario Kahos!

      Eliminar
  9. Toni!! Tu sprite esta muy guapo (me recuerdan a los juegos de la vieja escuela que tanto echo de menos), pero la animación tiene un pequeño error.

    A mí también me pasaba esto por descuido hace años (e incluso alguna vez ahora, pero lo corrijo a tiempo xD).

    Normalmente, cuando una persona camina o está corriendo; si por ej. da un paso con el pie derecho y el izquierdo queda hacia atrás, la mano izquierda tendría que estar hacia adelante y la derecha hacia atrás.

    Sigue así, que me encanta lo que haces en este blog.

    ResponderEliminar
    Respuestas
    1. Totalmente de acuerdo Marina! Mira que lo pensaba al hacer la animación y al final lo hice al revés engañado por la animación final. Gracias por el aporte y en cuanto saque un rato lo modifico al igual que las descripciones. Aún me queda un largo camino para llegar a tu nivel, ya tengo ganas de saber más sobre esos proyectos en los que andas metida, un saludo!

      Eliminar
    2. Bueno no creo que mi nivel sea más elevado que el tuyo, porque seguro que si un día te lo planteas y haces algo detallado, te sale muy bien.

      Simplemente son estilos distintos.

      Gracias por tus aportes compañero :)

      Eliminar
  10. genial justo lo que buscaba, tengo otras dudas hay un limite de pixeles (me refiero si existe algun standar de tantos pixeles) o uno es libre de crear lo que sea? la vedad necesito ayuda quiero diseñar un robot mecha pero no tengo idea como hacerlo.

    ResponderEliminar
    Respuestas
    1. Por supuesto que no hay límite ninguno, todo depende de la estética que quieras conseguir. Puedes detallarlo tanto como quieras o utilizar pocos píxeles para darle un aspecto más retro u ochobitero. Todo es cuestión de hacer pruebas y decidir como te gusta más. Me alegro que te sirva de ayuda ;)

      Eliminar
  11. Demasiado genial tus tutos, porfas desde no dejes de subir mas tutos... me basta con consejillos que ayuden a mejorar el dibujo desde hoy estare pendiente a esta pagina ...graciass

    ResponderEliminar
    Respuestas
    1. Me alegra ver que te gustan y te pueden llegar a servir. Sin duda seguiré con ellos a medida que vaya encontrando el momento. Gracias por comentar!

      Eliminar
  12. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  13. Me alegro de que te haya servido el tutorial. En principio para el sprite de caminar es seguir los mismos pasos pero sin exagerar tanto los movimientos. De todas formas me lo apunto para un posible tutorial en el futuro. Gracias por dejar tu comentario :)

    ResponderEliminar
  14. con q programa se puede hacer la animacion? porq yo tengo varios sprites y me imagino hacer una lucha entre ellos. gracias

    ResponderEliminar
    Respuestas
    1. Hola! Pues puedes hacerlo con diversos programas pero yo uso Cosmigo promotion. Tienes el tutorial aqui: http://www.pixelsmil.com/2010/12/tutorial-aprendiendo-animar-en-2d-en-10.html

      O también en photoshop puede encontrar un tutorial muy bueno en el siguiente enlace: http://www.pixelsmil.com/2011/09/game-developer-magazine.html

      Eliminar
    2. podrias hacer uno en 3d
      sk no hay buenos por la red i teniendo en cuenta lo bueno k es este pues lo petaria

      Eliminar
  15. Hola, desde luego eres un artista en la animación y dibujo de sprites, pero para el próximo recuerda que los brazos avanzan con la pierna contraria y no al revés, felicidades por el tutorial, un saludo ;D

    ResponderEliminar
    Respuestas
    1. Totalmente cierto. De hecho Marina más arriba me advirtió del error que cometía. Lo peor de todo es que tenía esa información en la cabeza antes de empezar y aún así acabé errando. Supongo que es la novatada :)

      Gracias por el aviso de todos modos y gracias por dejar tu comentario.

      Eliminar
  16. Este comentario ha sido eliminado por un administrador del blog.

    ResponderEliminar
  17. Muchas gracias por el tutorial- Hacía siglos que no animaba. Ahora unos amigos programadores me han pedido unos sprites para hacer unas pruebas (RPG inside). Buscando he llegado hasta aquí. Muy buen ciclo de carrera, y buena mecánica. Me apunto el orden de trabajo.

    Mi principal problema es esbozar. No sabía como hacerlo a esta escala... Muchas gracias!

    Si me permites algunas preguntas:

    ¿Trabajas con las diferentes partes del cuerpo con capas, o las animas todas juntas? ¿cuándo decides hacerlo de una manera o de otra?. En dibujo tradicional, lo tengo muy claro, pero en píxeles, he visto a gente que se hace un set de brazos y luego los adapta, y otras personas que, como tú, hace la base y la anima toda junta.

    Segunda pregunta: En animación tradicional, solía hacer los fotogramas clave, y luego intercalaba según la plantilla (nunca, NUNCA al centro). Pero con los píxeles se me hace muy difícil. ¿animas de corrido (tipo stop-motion) o planificas, haces poses clave, luego intermedias e intercalado?

    ¿qué programa usas (si no es muy indiscreto)? ahora mismo estoy sacando los frames con photoshop, y los monto con otro programa gratuito que me salva en gif animado, pero no me da control sobre lo que dura cada fotograma.

    De nuevo, muchas gracias por el minitutorial (muy útil no sólo por las poses, si no también por el concepto y la filososfía de trabajo, que creo que es muchas veces lo que falla).

    P.D: no se ven muchos ciclos a seis fotogramas! Especialmente que funcionen tan bien como el tuyo. Un saludo y mucho ánimo!

    ResponderEliminar
    Respuestas
    1. Hola Primeless y gracias por animarte a comentar ;)

      Te contesto:
      Todo depende del sprite que vayas a utilizar y como vayas a animarlo. En mi caso es tan pequeño que no vale la pena separar sus partes. Imagina que vas a hacer un sprite grande con muchísimo detalle. Quizás te interese separar los brazos, por poner un ejemplo, para hacer un movimiento de balanceo y no tener que redibujar todas las posiciones. Como te digo, debes planificar y separarar las partes del dibujo si el juego lo requiere.

      Si vienes de animación tradicional ya tienes la mayor parte hecha! Viene a ser lo mismo en realidad. Hasta ahora, las animaciones que hago son del tirón, usando una función del programa para que parezca que pinto sobre papel de calcar. Así puedo ver la postura anterior y actuar en consecuencia. Una vez tengo todos los sprites ya los rectifico para que hagan bien el loop y listo. Bueno a decir, que es solo un modo y si te va mejor dibujar movimiento clave, quizás sea hasta más rápido.

      Yo uso Cosmigo Promotion que tiene una versión trial gratuíta pero el programa es de pago. Como alternativa gratuíta (igual de potente y con soporte actualmente) es Graphics Gale que siempre recomiendo. Son programas enfocados al pixel art con todo lo que necesitas para ello.

      Pues te animo a ponerte con ello ya que implicarse en un proyecto es la mejor manera de aprender. Cualquier duda puede comentar por aquí o si es algo más extenso, escribir un correo a la dirección que marco al final del post.

      Un saludo!

      Eliminar
  18. gracias! mucho ánimo.

    tomo nota de los programas :)

    un saludo y suerte!

    ResponderEliminar
  19. Que buenos tutoriales, me han servido de apoyo para iniciar con el pixel art, gracias por tu trabajo.

    Es más, estoy iniciando con un proyecto que trata de una comunidad dedicada al pixel art para reunir a toda clase de artistas y aportes útiles a este arte, y me gustaría añadir algunos de tus trabajos a la comunidad (con los debidos créditos al autor, claro).

    Apenas acabo de crear la comunidad así que esta vacía y en plena construcción, pero aquí esta el link de la web para que sirva de referencia (y para todos los que se quieran unir):

    http://www.taringa.net/comunidades/comunidad-eadp/

    Saludos, y perdón por la publicidad.

    ResponderEliminar
    Respuestas
    1. Hola Jonathan,

      Me parece una buena idea todo lo que sea compartir y unir a todos los amantes del píxel. Si quieres añadir algo del blog, te agradecería que no fuera un corta y pega y que quedará lugar a ampliar el artículo en esta misma página.

      Un saludo!

      Eliminar
  20. Hola, soy un diseñador de videojuegos y de momento estoy creando un retro ya que amo estos juegos con los que crecí por eso vive por estos lados a buscar algo del pixelart, el pro motion se ve bueno pero yo lo necesito por una larga temporada con todas sus funciones por lo que para mí es inviable, soy un férreo defensor del software libre así que me dije "Debe haber alguna alternativa que sea open source" y taran!!! si existe se llama GrafX2 para Linux (uso Ubuntu 13.04) te recomiendo que lo mires y si puedes que hicieras un tuto ;)

    PD: Geniales tus post y tutos, llegué acá por el pixel art para Gimp muy completo, esta pagina ya esta en favoritos :)

    Saludos

    ResponderEliminar
    Respuestas
    1. Hola David. Pues mira si encima me dices que es para Linux pues doblemente bueno. Nunca lo he probado pero lo conocía ya que es usado sobretodo por los más puristas del estilo. Tiene una interfaz muy a lo Deluxe Paint (que por cierto, otro que puedes usar) y eso para los viejunos es un punto añadido.

      A veces he querido probar Graphics Gale, diría que de los más usados, pero puedes ir probando otras alternativas como Aseprite (http://www.aseprite.org/). Éste último también es gratuíto!

      Al final es encontrar la que más te guste. Piensa que Locomalito trabaja con un editor de iconos (Iconomaker) así que la herramienta es la que tu quieras que sea.

      Un saludo!

      Eliminar
  21. yo solo veo puros puntitos xD
    jajaja pero en serio, muy buena redacción y "locución"
    gracias

    ResponderEliminar
  22. Hola Toni, me gustaría saber como consigues el efecto de luz, porque en la paleta de colores no me sale como quiero, uso Pyxel Editor, y no consigo el efecto que haces en la imagen del punto de luz. ¿Cómo puedo hacerlo?

    ResponderEliminar
    Respuestas
    1. Para eso debes ver primero el tutorial de paletas de color. Ahí tendrás una guía de como modificar los colores de manera correcta.

      Eliminar
  23. Esta muy buena esta pagina,pero me gustaria que tambien mostraran como hacer una animacion de salto y forma de mierte.
    :)

    ResponderEliminar
  24. Bro eres Super bueno en esto, me podrías pasar un correo o algo para contactarte y ver si me podrias hacer un trabajo

    ResponderEliminar
  25. Tengo una duda, como se hace un motor gráficos para los pixel art? Para establecer mecánicas, la coalición los golpes las físicas del juego y demás?

    ResponderEliminar
  26. Hey, Muchas Gracias por haber hecho este tutorial, me ha servido muchísimo, no encontraba la manera de hacer bien el dibujo del movimiento del personaje y con esto al fin pude hacerlo, muchas gracias amig@, eres increíble.

    ResponderEliminar
  27. A una pregunta , ¿ Se puede crearce también en un teléfono móvil un spriter O solo tengo que hacerlo en una computadora ?

    ResponderEliminar
  28. Tienes una version sin el brazo robotico? Muchas Gracias!

    ResponderEliminar
  29. Buena forma de explicar solo que no pones código o motor gráfico pero esta excelente.

    ResponderEliminar

Gracias por comentar!

Quizás también te interese...