Source: http://blog.theflyingcortijo.com/2010/03/resumen-de-la-charla-en-desea-ii.html
Timestamp: 2014-03-10 14:58:05+00:00

Document:
::: The Blog of The Flying Cortijo :::: ::: Contenido de la charla en DeSEA : Fireworks Orientado a Videojuegos:::
::: Contenido de la charla en DeSEA : Fireworks Orientado a Videojuegos:::
Poco a poco iremos subiendo la charla que dimos en el DevSpace de DeSEA, que tan buena acogida ha tenido. Mucha gente a pedido el material que se habló así que con paciencia pronto estará todo en el blog. A continuación os dejo comentado que fué lo que expuse sobre usar Adobe Fireworks para realizar los gráficos del juego Tile Land, aunque puede ser orieantado para otras plataformas, no específicamente Android.
Buscando un flujo de trabajo que fuera lo más cómo posible para hacer los gráficos decidí usar Adobe Fireworks. Esto por supuesto es una opción para juegos en 2D y personal, pueden haber muchas maneras de hacer un mismo gráfico, es sencillamente una opción más.
Ventajas principales de usar Fireworks:Se pueden editar mapa de bits.
Se puede trabajar con trazados vectoriales de forma más cómoda que en Photoshop.
El algoritmo de exportación es, si no el mejor, de los más potentes.
Los filtros se pueden aplicar en tiempo real, como por ejemplo puede ser un desenforque gausiano.
Se pueden crear y probar animaciones.
Al usar como archivo nativo el PNG, se pueden editar tambíen en otros programas.Se copian y pegan diseños directamente de otras aplicaciones como pueden ser Illustrator o Flash.
Es una mezcla entre el retoque de mapa de bits y editor vectorial. No tiene las opciones ni la versatilidad de un Corel Draw y un Photoshop, pero puede resolver la papeleta. Originalmente empezó siendo de Macromedia hasta que lo compró Adobe y su utilización está orientada principalmente al diseño de la imagen gráfica de las páginas web. Es un programa ideado y destinado para mostrar en pantallas, es decir, no esta planteado para hacer artes finales de imprenta, para llevarlo a papel, una valla, etcétera... para ese fin mejor optar a programas como InDesign, Illustrator o el mencionado anteriormente Corel Draw.
Aparte de su caracter híbrido, la otra característica es su algoritmo de compresión de imágenes, que optimiza el peso de las imágenes ya sea para web, o para un juego, que aunque parezca que hoy en día no pueda ser importante con las actuales velocidades de transmisión y la capacidad de las unidades de almacenamiento, sí puede serlo a la hora de ejecutarlo en un limitado móvil, porque algún comprador en potencia ve que un juego ocupa mucho puede que decida no bajárselo ni para probarlo.
El 90% de los gráficos del Tile Land parten de archivos vectoriales, recalco lo de parte porque hay que tener muy claro que lo que finalmente se le pasa el programador para que lo incorpore al juego es una imagen bitmap (salvo que estemos trabajando en Flash, donde sí se pueden trabajar con imágenes vectoriales), lo que nosotros trabajamos es el master que una vez listo habrá que exportar a un archivo con el que la aplicación que estemos diseñando puedad trabajar.
Imágenes de Mapa de Bits y VectorialesLa cuestión es que al ser un juego en 2D se tiene que partir de una resolución de pantalla fija, que puede ser la de una pantalla de un teléfono como nos ocupa, o la de una consola o la de un monitor. Si fuera un juego en 3D no tendríamos ese problema puesto que el engine del juego es el que crea una ventana en relación a la resolución y lo que sucede al cambiar de resolución o aspect ratio es que veriamos más cosas del escenario, como si abriésemos otra hoja de la ventana, pero el tamaño de los objetos seguiría siendo proporcional.
A la izquierda una ilustración vectorial, a la derecha una de mapa de bits.
Volviendo a las dos dimensiones, si estamos haciendo un juego 2D para un movil cuya resolución de pantalla es 320x480, pues no hay problema, se hacen a su tamaño y no hay más tema. Pero ¿y si queremos hacer un port a por ejemplo a una Nintendo DS? La resolución de las pantallas de la consola son 256x192, en este caso a ser más pequeño no habría problema porque se reducirían las imágenes a las nuevas dimensiones con el programa que usemos de retoque fotográfico (incluso se podría reducir los archivos exportados directamente sin tener que tocar los masters). Pero ¿y si el port vamos a hacerlo a una consola de sobremesa como puede ser la Wii, cuya resolución es de 640x480? Una imagen bitmap no se puede ampliar, lo que hacen los programas es interpolar inventándose pixeles lo que provoca que se emborrone la imágen y se pierda definición.
En el mundo de la impresión hay pequeños trucos como pueden ser ir aumentando una imágen en intervalos de un 110% hasta alcanzar la resolución deseada, cuenta la leyenda que la interpolación no es tan acusada. O si se necesita nitidez usar una máscara de enfoque pero pasando previamente la imaen a modo L.a.b. y retocar solo el canal de la luminosidad. Este sistema, que nos puede sacar de un apuro, puede servir en imágenes de colores planos o degradados pero en fotografías apenas surte efecto.
Aunque entrarían en el ámbito de los bitmaps podremos tener un apartado aparte sobres los gráficos en pixel art (es decir sin antialiasing, con bordes de sierra como comúnmente se dice), un cambio de tamaño ya sea aumentando o bajando pierde toda su definición. A lo sumo que podemos hacer es una ampliación en múltiplos de dos, x2, x4, x8 etc y en las opciones de remuestreo de nuestro programa indiquemos valor más cercano, o por aproximación en el caso del Photoshop.
Entonces ¿qué hacemos si nos novemos en el mundo de las 2D? Pues tenemos dos opciones: La primera es realizar unos diseños en mapa de bits los suficientemente grandes para curarnos en salud (aproximadamente de 2000x2000 pixeles para arriba) e ir reduciendolos hasta nuestras necesidades. La otra opción es hacer los gráficos vectoriales con lo que ya serían independientes de la resolución y exportarlos a las dimensiones del dispositivo en un archivo de mapa de bits, puede pensarse que el diseño vectorial limita, pero las últimas versiones de los programas poseen herramientas (como las mallas en Illustrator) que nos permiten darle un toque más dibujo a mano. Esto nos ayudará también ha la hora de realizar folletos, posters, manuales de instrucciones o carátulas, porque hoy en día no sólo es hacer un videojuego, sino promocionarlo, venderlo, etc. Y todas estas cosas se sacan por imprenta y allí no valen fotos bajadas de la web, allí necesitamos fotos del orden de 300 ppp o 150 si es digital.
Partiendo de nuestro diseño en cualquiera de los programas de diseño vectorial podemos guardarlo como archivo AI o EPS o sencillamente dándole a copiar y pegar. Con las ultimas versiones de la suite de Adobe la interacción entre los programas a mejorado dando prácticamente el 100% de compatibilidad. Incluso desde Corel Draw (tiene buena tradición en lo que se refiere a compatibilidad con Illustratror, hasta posee una opción de cambiar la apariencia del entorno de trabajo para asemejarse con él) se pueden copiar de uno a otro, es una lástima que no directamente a Fireworks, pero podemos usar el illustrator a medio de puente, ahorrádonos un archivo intermedio.
Una vez copiado en Fireworks tendremos que ajustar el lienzo a lo que queremos, dándole al botón, y eliminaremos el fondo eligiendo ninguno. También podemos aplicarle algún filtro que querramos o ajustar el tono, brillo o contraste. Ahora en el caso de que se nos cambie la resolución de la pantalla, ¿que haríamos? Gracias al que el Fireworks guarda los trazados podemos reescarlar si miedo a perder nitidez. En las ultimas versiones de teléfonos de Android han incluido otras resoluciones más a la clásica 480x320 que compartía con iPhone, la 320x240 del HTC Tatoo o la 800x480.
Una idea que se puede pasar por la cabeza es exportar los gráficos a la máxima y que el juego las reescale (a la baja siempre) para las demás, el problema es que al pintarse en pantalla con OpenGL no hay interpolación bilineal o bicúbica como podría haber en Photochop, suavizándote las imágenes para que no haya mucha pérdida de detalles, si no que la hace por aproximación comiéndose pixeles, con lo que queda un resultado muy deslucido, sin añadir el hecho explicado antes del procesador de los Android no da par más y esto sería más cálculo.
La solución es tener un juego de imágenes para cada resolución, pero teniendo en cuenta que conllevaría un grán peso del archivo. Así que depende de vuestras espectativas sopesar si os merece la pena.
Una vez terminado nos disponemos a exportar. Nosotros elegimos hacerlo a PNG8. Las ventajas de este formato es que nos permite un canal indexado, con lo que el peso del archivo es mucho menor pero también un canal alfa en el que se pueden guardar transparencias. Así podemos crear bordes suavizados que dotan a la imagen de gran calidad. De carecer de este canal, al querer hacer una transparencia sería al corte y nos quedaría pixelada o con dientes de sierra.
A la hora de pasarle los gráficos al programador, en los teléfonos Android como comenté antes tienen más memoria que procesador, por lo que es recomendable evitar que el juego tenga que “componer” él los gráficos si queremos un frame rate óptimo, como puede ser un tileador como el RPG Maker, en el caso del Tile Land por ejemplo, cada ficha es un gráfico gris y luego las pegatinas que irían encima se diseñaron individualmente, en este caso erramos y hubiera sido más eficiente hacer cada ficha entera y no saturar el procesador, aunque eso conlleve un peso mayor en megas del archivo descargable.
Animaciones en FireworksPor medio de la herramienta usada para crear los típicos gifs animados podemos diseñar animaciones y exportar luego cada fotograma. Con la paleta ESTADOS podemos definir cuantos fotogramas queramos utilizar y cuanto tiempo transcurrirá entre cada uno en centisegundos [1 segundo=100 centisegundos].
Podemos también ayudarnos de la opción papel cebolla para ir controlando la animación del fotograma anterior. Si es sólo una parte la que cambia, podemos hacer uso de la herramienta división para hacer sectores para componer una imagen en web a partir varios puzles de la misma y exportar sólo esa parte ahorrando en espacio.
Es importante señalar que no guardamos un archivo mágico de animación, al final sigue siendo un PNG pero que contiene más de una imagen, tenemos que exportar fotograma a fotograma para que sea nuestro juego el que realice la animación.
Al usar una imagen vectorial podemos “moldear” la formas geométricas ayudándonos de los nodos que la componen siéndonos mucho más facil que volver a dibujar de nuevo.
¿Pixel Art Vectorial?Gracias a una característica del Fireworks podemos relizar diseños pixel art pero en vectorial. ¿Qué como es eso? Las formas vectoriales pueden en Fireworks tienen 3 posibilidades de bordes, SUAVIZADO que es el que viene por defecto, FUNDIDO que nos permite un calado del borde, y el que nos interesa ahora, DURO.
Te crea una forma vectorial pero con un borde de diente de sierra que podemos modelar a nuestro gusto, dentro de unos límites claro está. Es más bien una opción para el que no sea muy diestro dibujando o tenga una gran maestría con esta técnica. Aparte de las formas también contamos con estilos de trazos pixelados que pueden ayudar a complementar.
Tipografías Las fuentes que utiliza son las Droid, viene incluidas en el SDK, en la parte del emulador. Pero desaconsejamos su uso, porque sólo sirven para los menús nativos de Android, que dejan mucho que desear y porque quitan personalidad al juego, dejándolo como otro más del montón, y a la hora de hacer un port no sirven por lo que hay que reestructurar de nuevo el juego y rediseñar los gráficos, botones, etc. con la consecuente perdida de tiempo y si trabajamos en una empresa, dinero. En el Tile Land los usamos y todavía nos estamos arrepentiendo.
En nuestro juego acabamos utilizando nuestra propia herramienta de fuentes. Al permitir el uso de PNG8 podemos tener tipografias en un archivo de mapa de bits con bordes suavizados y sólo utilizar la parte del juego de fuentes que nos haga falta, ahorrando el peso en megas del juego. El punto flaco es que sólo se puede usar un archivo de fuentes por tamaño y color. Como comentamos antes al ser la fuente un gráfico al fin al cabo no se puede reescalar a la baja para conseguir tamaños inferiores. Aunque lo del color se puede utilizar una fuente blanca y colorearla con un color plano a modo de máscara, aunque no permitiría florituras o degradados. Como las pantallas son muy pequeñas es recomendable utilizar tipografías de bordes duros “pixeladas” que son más legibles para los bloques de mucho texto corrido, como explicaciones o instrucciones y dejar las suavizadas para rótulos.
Si no os veis capaz de desarrollar una herramienta no lo dudeis y utilizar los menús nativos, sobre todo si es vuestro primer juego y estais empezando.
Como no vamos a inventar la rueda de nuevo, podeis acceder a banco de gráficos de juegos ya existentes para buscar referencias, realizar pruebas o buscar inspiración, ver como han realizado una estela o la animación de un puñetazo de un personaje, etc...
The Spriters Resource: aqui encontrareis gráficos de juegos clásicos de NES, Super Nintendo, recreativas entre otros. Ultimamente están añadiendo también pieles de mallas de personajes de juegos en 3D, que también puede ser una opción muy interesante ver como está hecho el unwrap.
Sprite Database: una web similar a la anterior, aunque en esta también suelen meter sonidos, aunque muy ocasionalmente.
The Charas Project: página dedicada a la recopilación de recursos para el RPG Maker, eso no quiere decir que su gran cantidad de gráficos no se puedan reutilizar para otros juegos diseñados en otra plataforma.
Dafont: sin duda la mejor web que se puede encontrar de tipografías. Están estupendamente clasificadas, nos permite hacer previsualizaciones de textos y nos indica el tipo de licencia que tiene.
TFC en Vimeo
Divertronic Games
Un guijarro en la Red
The Flying Cortijo ::: Copyright © 2009

References: resolución 
 resolución 
 resolución 
 resolución 
 resolución 
 resolución 
 resolución 
 resolución 
 resolución