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