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!)
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
Tus ideas están muy padres, así que seguiré visitándolo por aquí.
Mucho gusto :)