lunes, 16 de marzo de 2009

Vectorización de arte infantil

Antes:



Después:

(Haz click para ver a resolución original)


Esta vectorización de un dibujo de mi hija, está realizada de forma más ortodoxa. Cada elemento es autocontenido. Cada cosa que ves es un gráfico que puedo rediseñar, cambiar de sitio, o cambiar de tamaño sin afectar al resto. Luego, dentro de cada gráfico, todos los elementos también están construidos a base de formas al efecto: la cara (redonda), dentro de esta, los ojos, la pupila, el cuerpo a partir de un rectángulo, incluso las botas se realizan a partir de la forma básica del rectángulo. Así, puedo cambiar el diseño de cualquier elemento de forma rápida, por ejemplo, la chaqueta de la pirata, su color, cambiar la pistola por una espada, etc. De hecho. Los personajes están construidos en base a dos modelos: un chico, y una chica (la pirata). El soldado original es el inmediatamente a la izquierda de ésta; luego está copiado y pegado en la posición en el dibujo del resto de soldados, y luego, en cuestión de pocos minutos he ido cambiando sus rasgos, color de piel y forma del pelo, color de los ojos, postura y armas.

La chica pirata no es original mía, para realizar este estilo de dibujo de muñegotes he seguido el siguiente tutorial de Inkscape:

http://inkscapetutorials.wordpress.com/2008/03/20/create-an-impressive-stick-man-cartoon-character-avatar/

Este tutorial sigue el estilo visual de un cómic online llamado The Order of the Stick (traduciendo libremente: "La Orden del Muñegote"). Parece mentira, pero incluso para pintar muñegotes hay que seguir un estilo definido y homogéneo, lo cual se puede demostrar comparando mi versión de la pirata con la original, se puede apreciar mi falta de pericia aún para obtener formas proporcionadas y colores orgánicos en mis composiciones.


El tutorial, además, está orientado al novato, siendo un gran artículo introductorio para quien desee iniciarse en Inkscape y en el mundo del dibujo vectorial. The Order of the Stick es un comic que ha alcanzado cierta fama online. Tiene una temática paródica de los juegos de rol, de forma que sus personajes viven sus aventuras de fantasía medieval internándose en mazmorras estandar, guarida del temible Lich de turno, pero haciendo mofa de las reglas del rol y lo absurdo que se sienten como parte real del universo que viven los personajes. No voy muy avanzado en su lectura (son 640 capítulos, mientras escribo esto, con una periodicidad pasmosa, creo que semanal); pero sí, las primeras viñetas van sobre el descenso de un grupo de rol a una mazmorra, luego hay historias de piratas, magos, logias y todo tema que un buen rolero suele de gustar. Hago hincapié en en la parte de piratas sencillamente porque el arte de mi hija va siempre orientado en esa dirección, Sirenas y Piratas (¡vaya!, que nombre más guapo para una serie de juegos o de cualquier tipo de merchandising). Otras historias de piratas con personajes muñegotes son las que hacen Jarel y Planseldon con la herramienta de creación y publicación de comics rápidos Stripgenerator, tituladas: ¡Ojo al parche!

Estas vectorizaciones es algo que realizo de cuando en cuando, cojo un dibujo que me gusta de mi hija y lo vectorizo para asombro de ella y mayor vanagloria de su papi. El objetivo final es tener una base de dibujos y elementos infantiles para realizar un posible juego básico con estética infantil y orientado a un público infantil (o con dos niveles de dificultad, normal y fácil, casual y hardcore). Tengo ya unos cuantos, pero sobre todo de temática referida: pirata, y oceánica (peces piratas); lo cual con el tiempo puede desembocar en una buena base de datos de gráficos y en un par de juegos (uno sobre la vida en el mar de las sirenas, y otro sobre piratas, o aventuras en general).

En este caso la chica pirata es sólo fruto de seguir el tutorial que he comentado, como se puede observar en el dibujo original, no estba incluida en la historia, pero eso me ha dado un argumento sencillo como sinopsis del juego. La princesa atrapada en su palacio con barrotes de oro manda una paloma mensajera a su amiga de la infancia, ahora temible pirata, para que la rescate. Es por esto que nuestra heroina arriba su barco en la ciudad, pasa por ella evitando a maleantes y guardias, para luego escalar por la planta hasta lo alto del castillo y descolgarse hasta la ventana de la princesa y poder rescatarla. Evidentemente cuando la IA funcione, y las animaciones estén realizadas, todos esos guardias dejarán de sonreir (aunque tampoco está mal dejarlos así como pincelada inconformista de que los pobres asalariados del bando contrario, también son felices y tienen sus propias vidas antes de que llegue la heroina y los mate).

Recuerdo haber leido, pero no donde, que Tom Hall co-fundador de ID Software junto con Jhon Carmack y Jhon Romero, habló una vez sobre el diseño de Commander Keen. En esta aventura, cuando el héroe disparaba sobre un ser de la raza enemiga alienígena, el cuerpo muerto permanecía en pantalla. No había sangre ni nada, tan sólo los cuerpos permanecía ahí, se acumulaban. Esto trastornó a algunos padres pues daba una visión más allá de la violencia cómica de los dibujos animados. En posteriores entregas de Comander Keen, Tom Hall cambió la pistola de rayos por una pistola adormecedora, de forma que los cuerpos seguían allí, pero esta vez estaban plácidamente durmiendo por los efectos del rayo adormecedor.

La violencia cómica en los juegos de Mario es aún más aterradora. Mario no sólo mata a las felices tortugas en su habitat natural (los Koopas) sino que además usa sus esqueletos inertes a modo de arma para poder seguir con el genocidio.

Yo de momento no se que aproximación tomaré. Personalmente creo que añadir detalles significativos que haga reflexionar a los niños sobre la vida y la muerte, el abuso de poder, o cualquier otro tema "de peso", es positivo.

lunes, 9 de marzo de 2009

Vectorización a mano (segunda parte)


igo con nuestra amiga la serpiente de la anterior entrega. Cómo le dije a mi compañero Grendel Khan, la forma de vectorizar la serpiente no fue muy ortodoxa. Es más habitual, a la hora de trabajar con herramientas de diseño vectorial, ir haciendo formas generales para luego ir concretando detalles.

Por ejemplo, en este caso lo ideal sería hacer la forma de la cabeza, la forma del cuello y la forma de su cuerpo enrollado como tres objetos independientes. Se le da unos colores globales y luego se va afinando añadiendo detalle. A la manera que yo he hecho no deja de ser una chapuza, ya que se crean un número de objetos elevado que hacen más difícil su mantenimiento. Por otro lado, según las características del boceto, puede ser necesario. Este método en Adobe Flash funciona a las mil maravillas, pero en otros programas presenta problemas. En siguientes creaciones iré puliendo mi técnica.

Afortunadamente Inkscape tiene la herramienta de relleno de color (el bote de pintura de toda la vida) que permite crear nuevas formas sin contorno pero con un color adaptándose a lo que encuentra en pantalla. El problema es que no hace un trabajo perfecto: por muy pequeña que pongas una linea guía para separar un par de rellenos de color, el programa siempre dejará una linea blanca apenas perceptible en los límites de las formas (esto en Adobe Flash no pasa).

Existe una técnica para comprobar si las proporciones de un dibujo son correctas y por tanto si está ausente de errores. Con un dibujo en papel consiste en verlo a través de un espejo. No se cómo se comporta el cerebro pero funciona, detecta los errores. En dibujo vectorial basta con invertir el gráfico horizontalmente (reflejado). He aquí la serpiente que di como definitiva pero reflejada:


Los errores son obvios, para empezar la unión del cuello con el resto del cuerpo es demasiado cerrada, queda mal, los ojos no están nada proporcionados, y la mandíbula está inclinada de forma visible.

Aparte, el gradado de color apenas es perceptible (por ejemplo os podéis fijar en la diferencia en las sombras de Link del Zelda, dos artículos más abajo); la sombra del ojo en la cara es bastante cutre; y se ven lineas blancas por la limitación que he comentado de la herramienta relleno.

La mandíbula se va a quedar como está, o lo postergaré para luego. Los ojos, no están del todo mal, tan desencajados y cadavéricos, infunden temor al dibujo. He reparado la curva del cuello y esta vez he usado degradados completamente para realizar las sombras, ampliando la diferencia de luminosidad para acentuar estas. También he usado gradados radiales para crear efecto brillo sobre superficie redonda, lo podéis apreciar en los bordes izquierdo de la parte baja de la serpiente, o en la sombra del entrecejo que ahora ha quedado fetén, o en los mismos ojos de la serpiente. El resultado final es mucho más vistoso y correcto:


De momento no voy a seguir con el otro boceto de la serpiente atacando, planeo realizar sólo la posición de "descanso" de cada monstruo, para así poder realizar un estudio de color antes de hacer últimas modificaciones. Y cuando esté contento con el resultado, crear las otras posturas de los monstruos usando los mismos colores de la postura "descanso" como referencia o paleta de color.

Para aprender nuevas técnicas de dibujo y de Inkscape, estoy siguiendo su blog oficial de tutoriales. Lo podéis encontrar ahí, a la derecha, en la zona de Aprender. Quizás pegue mis progresos de vez en cuando.

Una última comparativa de la serpiente nueva con su imagen reflejada. Es muy curioso como el ojo humano inclina más la proporción en un caso que en otro. Es un reflejo perfecto, aún así, la serpiente de la derecha, parece estar más inclinada que la de la izquierda. Esto es algo que también se podría corregir fácilmente tan sólo con rotar ligeramente para poner el cuello de la serpiente más vertical, pero de momento se queda así.

domingo, 1 de marzo de 2009

Vectorización a mano (con Inkscape)

Se me murió mi WinXp. No se si lo dije ya. El caso es que gracias a Jarel tengo un Pentium 4 viejuno, en el que he metido Ubuntu, y el hardware que he podido para acelerar un poco la cosa. Así que debo seguir mi camino. Y el camino del Flash bajo linux pasa por el software libre.

Otro día hablaré de las herramientas Linux para programar aplicaciones (juegos) Flash, pero una parte muy importante en la creación de videojuegos es la creación de las piezas de arte, esto es, los los mapas de bits, jpgs, música, sonidos y compañía.

El modo natural de incorporar gráficos en Flash pasa por los gráficos vectoriales (un gráfico definido por las lineas, curvas y rellenos de color que definen el dibujo, lo cual hace que no pierdan calidad por más que se amplíen), a pesar que se le pueden meter mapas de bits, yo he optado por lo vectorial, se siente más natural, más plástica que ir amasando montones de píxeles. Además está la dificultad técnica: yo no soy ningún artista plástico, por tanto he encontrado en la vectorización manual un atajo a mi carencia artística.

El editor de diseño de Adobe Flash es sencillo y genial: no sólo sirve para crear películas, puedes crear cada pieza de arte que imagines y automáticamente pasa a ser un elemento de la biblioteca para poder usarlo en una animación o juego posterior. Engloba en la misma herramienta diseño y animación, con una herramienta de papel de cebolla potentísima (emulando la técnica de animación donde se coloca un papel sobre un frame ya terminado de animación, para poder calcar el anterior pero con la variación del movimiento). Quizás se pueda pensar que este editor es menos potente que un diseñador vectorial exclusivo como FreeHand, Illustrator o CorelDraw, pero la realidad es que permite una agilidad que lo hace factible para la creación de arte para videojuegos. Por ejemplo, todo el arte de World of Goo está realizado con Adobe Flash, para luego ser exportado a otro motor de juego que no tiene nada que ver con Flash. Se puede ver un ejemplo de Kyle Gabler en acción creando arte para World of Goo en este video.

Recalco que además, directamente puedes crear las animaciones sea para el motor de juego que sea, no tiene porqué terminar siendo un juego Flash.

Pues bien, eso mismo tan impresionante que hace Kyle Gabler, lo hago yo, pero salvando la tremenda distancia entre su maestría y mi incapacidad. Yo lo llamo vectorizar a mano. Básicamente consiste en tomar un boceto a mano, escanearlo, y ponerlo de fondo en la herramienta de diseño. Luego creando sucesivas capas se va dando vida al gráfico en su forma digital. Al final se borra todo rastro del boceto en papel original.

Después de probar unos cuantos programas libres de diseño vectorial me he decidido por Inkscape. Es un programa que funciona desde 2003, cuyo propósito es cumplir las especificaciones estándares de SVG. Tiene un IDE sólido capaz de enamorar a cualquiera que venga de Windows con un software propietario. Sencillamente la comparación no es posible: Inkscape te ofrece diseño profesional gratuito, y libre; me gusta; y contra eso Adobe o cualquier otra compañía no puede competir.

Veamos un ejemplo práctico, con la serpiente de mi proyecto El Ojo del Guerrero de la Estrella. A modo de organización he creado 5 capas: detalle, relleno, vector, guía y fondo.


El proceso de trabajo es el siguiente:

1) Primero importo el boceto en jpg en la capa de fondo. Centro el dibujo en el que quiero trabajar en el folio de Inkscape y lo bloqueo, de forma que no interfiera en mis futuros manejos del programa.

2) En la capa vector, empiezo a seguir las lineas del boceto creando lineas y curvas con un estilo cómic discreto (1 pixel de ancho de trazo y color negro). Para ello uso la herramienta Beizer, mi preferida siendo un aficionado a la vectorización; suele ser la herramienta, en cualquier programa de diseño, para crear rectas y curvas pudiendo seguir un contorno de forma continua y ágil. El problema es que el Beizer de Inkscape no me gusta nada. Es demasiado potente y complejo, y lanzar las curvas directamente es MUY preciso, pero poco intuitivo; nada que ver con el maravilloso Beizer de Adobe Flash. Así que yo me limito a trazar rectas de punto de inflexión a punto de inflexión, y luego con la herramienta de retocar nodos, curvo cada recta anterior transformando la serpiente geométrica en una figura estilizada llena de curvas. Se pueden crear lineas guía de color rojo y del menor tamaño posible si no se desea que los trazos queden en el resultado final del dibujo, pero esto se haría en la capa...

3) ...guía. En esta capa añado lineas rojas muy finas que sirven para delimitar zonas de relleno adicionales a las que ofrece las lineas negras de trazo anteriores. Al témino del dibujo estas lineas siempre se borran y por eso se ponen en una capa aparte y con un color prominente como el rojo, para borrarlas con facilidad. Como he comentado antes, es posible vectorizar por completo un dibujo a base de lineas guía rojas; esto se hace para buscar un estilo colorido sin costuras ni silueta. Pero no es el caso que nos ocupa, yo ahora busco un estilo más cómic.


4) En la capa de relleno uso el bote de pintura para llenar de color los espacios vacíos delimitados por las lineas creadas. Oculto la capa de fondo para que no interfiera en el llenado de espacios vacíos. Gracias a las lineas guía puedo rellenar zonas de distintos colores para crear la ilusión de volumen o que el dibujo esté iluminado por una fuente de luz externa (en este caso desde la izquierda).

La serpiente ya va cobrando vida, aún así aunque este tipo de sombreado es muy válido y se usa en muchos estilos de dibujo, no queda del todo satisfactorio en mi serpiente. También es que los dos coloresque he elegido para el verde no son muy allá. Es mejor usar un color de base y luego sacar la sombra quitando luminosidad al color. En este caso la luz y sombra en el cuello de la serpiente en la parte rosada ha quedado mucho mejor usando sólo el deslizador de luminosidad.

Otra forma de añadir sombras es usar los degradados de color además de simular que hay cierta iluminación, da volumen. Existen dos tipos de degradados, los lineales y radiales. Los radiales simulan esferas como se puede apreciar ligeramente en los ojos de la serpiente.

5) Y por último, una vez que estamos contentos con el color, y los degradados, llega la hora de añadir detalles y textura, en la capa de detalle. En este punto sinceramente he fracasado. He tratado con varias aproximaciones de añadir textura al dibujo para simular las escamas de una serpiente. He probado a tomar escamas de verdad, vectorizarlas, tratarlas y luego añadirlas. He tratado de dibujarlas a mano; pero todo ha fracasado, está fuera de mis posibilidades actuales; aunque por otro lado, la mayoría del arte vectorial que circula por el mundo suele ser sin textura; con lo cual puedo dar por concluido este dibujo y el estilo elegido para los gráficos de El Ojo del Guerrero de la Estrella.

La organización por capas permite al final adaptar y configurar el aspecto del dibujo. Por ejemplo, escondiendo todas las capas salvo la capa vector, puedo seleccionar fácilmente todos los bordes y jugar con el ancho del trazo del contorno, consiguiendo un acabado más de dibujo animado con siluetas bien anchas. Este es el aspecto final, usando degradados y con un contorno más prominente:

También podría ocultar todas las capas salvo la del relleno, seleccionar todos los degradados y cambiar uniformemente la dirección del foco de luz, simulando que la luz cae sobre la serpiente desde arriba, o desde la derecha. Una buena organización permite en la fase final dar retoques con rapidez en el acabado final.

Lo mejor de todo es que con este método y unos cuantos bocetos rápidos, por muy negado que seas para el dibujo, los resultados son llamativos con poco esfuerzo, y tu mismo puedes hacerte los gráficos para tu juego sin necesidad de buscar un cotizado grafista o de fastidiar a tus mejores amigos para que te hagan los dibujos de tu juego. D I Y. Do It Yourself (hazlo tu mismo, ¡tío!)