Ir al contenido principal

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!)

Comentarios

Anónimo ha dicho que…
Muy bien explicado, te felicito por tu exigente labor con Inkscape, que no es tan fácil de manejar como parece, y por el resultado final, que me parece muy digno para un juego homegrown. Esto me recuerda... ¡a ver si me pongo un dia a dibujar y pintar para ilustrar alguna de mis aventuras!
Ruber Eaglenest ha dicho que…
De todas formas no es una forma muy ortodoxa de hacer vectorizaciones... ya ves, no he contruido la serpiente a base de formas y demás... Habrá una segunda parte corrigiendo errores y hablando de la ortodoxia (por llamarlo de alguna forma). Stay Tuned!
Mel ha dicho que…
Hola. Me ha agradado mucho tu blog, di con él porque buscaba cosas relacionadas con el género épico pero dirigido a los niños. Y me apareció tu entrada épica para niños.

Tus ideas están muy padres, así que seguiré visitándolo por aquí.

Mucho gusto :)
Ruber Eaglenest ha dicho que…
Encantado Mel. Aún así te aviso que no es un blog orientado a los niños, que imagino te está claro, no está mal avisar por si las moscas (es posible que algún día trate sobre temas luctuosos, violentos y demás cosas que suelen gustar a un jugador de videojuegos). Y efectivamente, como padre que soy la temáticas de los videojuegos para niños me interesan sobremanera, lo retomaré muy a menudo, tanto críticas de videojuegos comerciales como artículos sobre diseño orientado a los niños. Espero que te guste.

Entradas populares de este blog

Estructuras para la Ficción Interactiva Basada en Elecciones

Una frase que me gusta decir es que la Ficción Interactiva se define por la comunidad. Que su naturaleza, su uso y su práctica son el fruto de una evolución comunitaria de más de 25 años, a través de obras que suponen un punto de inflexión, dimes y diretes en foros y chats, o la irrupción de nuevos esquemas tan revolucionarios que no hemos tenido más remedio que ampliar horizontes. Juegos como Photopia , howling dogs  y la explosión Twine, o artículos como Crimes Against Mimesis , o incluso discusiones de foro como la que generó el juego-ensayo The Nemean Lion y propició el uso del término Agencia . Esto es tal que así que el vocabulario teórico que se usa no proviene de un corpus teórico oficial o académico (aunque a veces sí), o de populares libros de diseño (aunque a veces también); sino del uso a lo largo de los años, y del análisis compartido. De todo ese rico vocabulario, el que define la ficción interactiva moderna de éxito en la segunda década del siglo XXI, compete a ficcio

Caperucita Original

Versión ilustrada en una antología de cuentos de 1927 Nick Monfort me dijo, al proponerle la traducción de The Girl and the Wolf , que “ Esa es una de las primerísimas obras que hice, pero no estoy avergonzado por ella, así que estoy encantado de que la traduzcas al español ”. Mi motivación para realizar la traducción es que, The Girl and the Wolf, expone en una sóla obra, una buena parte de las iteraciones y versiones diferentes e imaginables de Caperucita y el Lobo. Y de paso me sirve para tratar el tema de las versiones originales de los cuentos. La versión más común del cuento de Caperucita Roja que todos conocemos, puede ser leída, de una forma casi fidedigna, en esta creación de Nick, seleccionando la historia sin tono sexual y con un nivel de violencia medio. En ella, Caperucita, camino de casa de su abuelita, va por el bosque para llevarle provisiones y medicamentos. Es divisada por el lobo, el cual ansía devorarla; pero no en mitad del camin

Épica Romántica (El Bosque Místico). Segunda parte.

[ Decíamos anteriormente en la primera parte de este largo artículo, reseña, ensayo sobre la Épica Romántica, y repaso por los subgéneros de la fantasía y reproducción a mano de un juego, que puedes encontrar en la primera parte, la cual recomiendo leer antes de proseguir con este.] Una vez completado el proyecto de la reproducción del Sorcerer’s Cave, a veces me preguntaba si no hubiese sido mejor reproducir Mystic Wood, una continuación espiritual del Sorcerer realizada por el mismo autor, usando las mismas mecánicas de juego, pero orientádo a multijugador competitivo. Enamorado como estaba de Sorcerer, fue fácil enamorarme también de Mystic Wood. Pero me di cuenta que con las imágenes que hay en BGG es imposible reproducirlo. La curiosidad me llevó a adentrarme en Ebay, y ¡eh voilá! ahí estaba, Mystic Wood original, usado, por una subasta inicial a un precio muy bajo. En el mercado de segunda mano en la BGG el juego ronda los 60 euros arriba o abajo, y yo lo conseguí por 15 euros