Creación de un Sprite para Owlboy (por Simon Anderson)

Una de las mejores formas de aprender en cualquier ámbito, es fijarse en lo que hacen los expertos. Siguiendo la estela de un añejo post en el que Locomalito compartía un 'paso a paso' con un sprite de Maldita Castilla, hoy veremos el proceso de un sprite de manos del dibujante de D-Pad, Simon Anderson.

El juego del que proviene este artwork es el deseado Owlboy del que podéis encontrar una magnífica demo jugable aquí.

Este es el resultado final del proceso que además estará animado.

Es interesante comprobar como de una idea abstracta se consigue un diseño totalmente distinto y en este caso, enfocado al videojuego ya que debe ajustarse a una medidas y ciertas premisas acordadas.

Éste es el gif original que Simon colgó hace unos días.

A continuación vamos a diseccionarlo con mucho cuidado para poder verlo más de cerca. 

Después del salto.





La primera imagen que nos encontramos es un boceto hecho por el programador. Con ello el artista ya tiene unas medidas para poder orientarse y respetarlas será básico para no tener que volver a definir las zonas de colisión.

La característica principal de la nave es una torreta giratoria que disparará en varias direcciones. Por ello el siguiente paso es esbozarla sin parase en definirla demasiado.

Llega el momento de rediseñar el boceto para darle un nuevo aspecto. Como vemos, está todo delimitado pero sin parar en dejar las lineas limpias. Una simple guía con la que poder empezar a dibujar.

Ahora le toca el turno a dar los colores base sobre los que se trabajarán las luces y las sombras. también a modo bastante orientativo y para acabar de separar las distintas partes de la aeronave.

Se aplican las primeas luces y sombras y todo queda listo para empezar a limpiar y definir.

Aquí se ha eliminado el outline de color negro y se ha sustituido por otro tono oscuro pero menos agresivo. De todas formas el negro se usará para resaltar las zonas más oscuras pero con mucho cuidado y sin abusar. 

Podemos ver también que la cabina se ha definido y la parte superior del cristal tiene algo de aliasing manual para fundir levemente el brillo. 

A partir de este punto queda rematar por partes.  En primera instancia la parte frontal y algunas partes de la zona superior. (En este punto empiezo a juntar pasos para no alargar en exceso este proceso)

Ahora le toca el turno a las hélices, parte trasera superior y la barriga de la nave. Es interesante ver que un método usado para mezclar colores es el del 'dithering'. Esa técnica que ya conocéis que se basa en un tramado a base de puntos.

Ya solo queda un último paso que consiste en acabar la parte trasera del vehículo a la que se le ha añadido una nueva pieza que hace darle un mejor equilibrio al diseño y de paso retocar algunos píxeles en distintas zonas. 

Por último fijarnos en la paleta de colores muy apagada y utilizando colores alilados para las sombras. Todo tiene un aspecto metálico muy convincente. Por si alguien quiere usar la paleta, la adjunto a continuación.

Como podemos ver, solo se han utilizado 16 colores. Limitar el número de colores es una buena forma de forzarnos a utilizar técnicas como en mencionado 'dithering', lo que le dará al diseño final un aspecto más auténtico de puro videojuego de la época.

Para acabar y echando un ojo a la animación, descubrimos algo más.

Desgranamos la animación para ver que está compuesta por 8 frames.

Hubiera bastado con añadir frames para hacer girar las aspas y quizás mover alguna parte de la nave de forma eventual pero Simon nos regala un pequeño 'truco'.  Moviendo la iluminación del cristal de la cabina y cambiando de posición los píxeles fruto del 'dithering' conseguimos  destellos y una sensación de que todo vibra lo que aporta dinamismo al conjunto.

Para rematar algunas partes contienen píxeles que simplemente parpadean apareciendo y desapareciendo para acabar de uniformar la animación. Es una buena manera de animar un objeto tan rígido y estático.

-----------------------------------------

Y esto es todo, espero que hayáis disfrutando tanto como yo viendo todos los pasos y mirando con una lupa virtual todos esos detallitos que hacen grande una composición pixel.

Esperemos que más artistas sigan compartiendo este tipo de material ya que es muy interesante y de paso instructivo para todo el que quiera seguir mejorando en este mágico arte.


Web Owlboy | D-pad Studios
Otros turoriales | Sprite de Locomalito