miércoles, 8 de agosto de 2012

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




15 comentarios:

  1. Como siempre una entrada interesante y didáctica, la verdad es que hasta envidio como lo hacen, no veas como he sufrido yo para dibujar los mandos de las consolas nintendo jeje.

    ResponderEliminar
    Respuestas
    1. Viendo este tipo de trabajos se entiende la de horas de práctica que hay detrás. El aspecto de Owlboy es increíble y Simon ya había hecho un montón de mockups e incluso trabajado en varios juegos antes de su proyecto. Vamos que nos toca sufrir para llegar a esto xdd

      Eliminar
  2. Buf...Sin palabras. ¡Me encanta! El resultado final es asombroso. ¡Me gusta mucho este post!

    ResponderEliminar
    Respuestas
    1. Gracias :) Me parecía interesante ver de cerca ese gif que colgó como el que no quiere la cosa. Este tipo de material es muy útil en realidad.

      Eliminar
  3. Envidia pura y dura es lo que siento al ver estas maravillas!

    ResponderEliminar
  4. :O , me gusto mucho el truco final para la animacion , nunca habia visto que lo hagan y eso que he visto varias animaciones xD .... que genial queda con el solo trasladar la iluminacion y moviendo unos pixeles , ya quisiera poder hacer esto jeje ... seguire practicando :D

    ResponderEliminar
    Respuestas
    1. Es uno de esos detalles que vale la pena recordar para poder probarlo en un futuro. Diría que lo había avisto antes en juegos como Metal Slug (de lo mejor que se puede encontrar tanto de diseño como de animaciones) solo que no me había parado a 'estudiarlo' de cerca.

      Eliminar
  5. Los gráficos de Owlboy son muy majos, pero hace ya un año que salió la demo y parece que no avanza el trabajo de este señor. Le está costando mucho tiempo y eso le hace perder interés, porque el año pasado estuvimos hablando del juego y ahora seguramente la mayoría ni nos acordábamos de este proyecto. A ver si lo puede acabar.

    ResponderEliminar
    Respuestas
    1. En realidad D-pad nunca lo ha dejado y de vez en cuando comentan algo aunque supongo que no quieren enseñar mucho. De hecho, creo recordar que cuando sacaron la demo no había mucho más creado aunque no te lo puedo asegurar.
      Esto de sacar demos tan tempranas es un arma de doble filo. Un caso cercano es el de Maldita castilla que fué similar. Yo sigo deseando echarle el guante!

      Eliminar
    2. Sería una herejía dejar un juego en ese estadotan avanzado y después de una cantidad impresionante de trabajo!! :O

      Eliminar
  6. Aunque la mitad de lo leído me suena a extranjero xd el resultado final es bestial

    ResponderEliminar
    Respuestas
    1. jaja bueno creo que sigue siendo igual de curioso cuanto menos, el ver un proceso así de cerca, no?

      Eliminar
  7. Da muchas ideas para realizar algún trabajo similar. Esperemos poder enganchar alguno más!

    ResponderEliminar

Gracias por comentar!

Quizás también te interese...