Dibujando en MSX (Trail 2)

Aunque ande un poco perdido (lo siento!), lo cierto es que en realidad no paro. En esta ocasión he estado trabajando duro junto a Kotai para la MSXdev'11. 

Al final nos hemos quedado fuera por unos minutos, pero tras el chasco inicial, nos ha servido para poder perfeccionar el juego y lanzarlo con algo más de calma. No hay una fecha concreta, pero sin lugar a dudas ya lo anunciaré por aquí.

Hablo del juego Trail 2.

Hablaré con más calma del juego cuando sea el momento pero en esta ocasión quería explicar como es eso de dibujar para MSX1. 

A modo de tutorial, explicaré los pasos que he seguido para hacer la imagen de portada y las limitaciones que nos encontraremos.

Espero, que aunque no os sirva esa información, disfrutéis viendo el paso a paso, después del salto.




Antes de nada, debo aclarar que era la primera vez que dibujaba en este sistema por lo que todo lo que explique por aquí es obra de un primerizo. Es probable que hayan otros sistemas de trabajo e incluso que algo lo esté haciendo mal. Espero vuestra comprensión ;)

Lo primero es explicar la dificultad de la imagen de presentación. No es solo la limitación de 16 colores, sino que la imagen está separada en una cuadrícula de 8 x 8 píxeles y en cada línea horizontal dentro de ese cuadrado, no pueden haber más de 2 colores. 

No más de 2 colores por cada 8 píxeles

En ese detalle del casco se puede ver como no hay en ningún momento más de dos colores por línea, dentro de ese recuadro de 8 x 8 píxeles.

Aclarar, que la cuadrícula en este caso solo tiene sentido en la orientación horizontal, ya que verticalmente no tendremos ningún tipo de traba. 

Pero vayamos al lío. Lo primero es preparar la paleta de colores. Buscando por la red podemos encontrar incluso paletas preconstruidas para Photoshop. En mi caso, al usar Cosmigo Promotion, me la monté yo mismo. Es sencillo, son solo 16 colores (en realidad 15 + transparente)

Paleta de colores de MSX

Una vez tenemos la paleta debemos crear el lienzo. En MSX hay varios modos de pantalla, no sabría entrar en detalles pero el más utilizado es el llamado SCREEN 2 o SC2.

En este modo jugaremos con una resolución de 256 x 192 píxeles, los 16 colores y con la limitación de 2 colores por cada 8 píxeles.

Crear la cuadrícula (o grid) es sencillo con cualquier programa de edición gráfica.

Ahora solo queda dibujar un primer esbozo. Aquí no hace falta tener la cuadrícula ya que simplemente es una guía por donde empezar el dibujo y además solo usaremos un color (más el de fondo).

Primer esbozo. No importa el acabado en esta fase.

Así es como me planteé la imagen en un principio. Como con todo, a lo largo del proceso se nos irán ocurriendo otras opciones, pero por algún sitio hay que empezar!

Como se puede ver, el motorista de la derecha sobretodo, está muy mal en cuanto a proporciones y perspectiva, pero no importa ya que es sólo para podernos hacer una idea de como gestionar la escena.

Decidí empezar por el título.

Trail 2. Pensé en las típicas banderas a cuadros y las recorté en las puntas. Para dar ese efecto de profundidad en los pliegues, le apliqué un poco de Dithering (más adelante explico sobre ello). Por último, el número 2 que no sabía donde poner en un principio.

Decidí vaciar la letras y darle un poco de color. Para el 2, un pequeño degradado para que pareciera brillar en el centro. Seguía sin saber donde poner ese número.

Aunque no se vea en las muestras, ese dos fue de muchas fuentes, tamaños y posiciones diferentes hasta que le encontré un lugar.

Finalmente un punteado de diferentes colores me pareció una buena opción. Ese maldito 2 lo acabé situando encima de la bandera, borrando estratégicamente su alrededor. Recordemos que no podían haber más de 2 colores por línea de 8 px.

Una vez convencido con el título, tocaba ir a por los motoristas.

Como comentaba, el primer dibujo que hice estaba lleno de fallos, así que lo primero era redibujarlo hasta quedar satisfecho.

La posición es extraña y la perspectiva y dimensiones mal planteadas.

En este punto no hacía falta la cuadrícula ya que solo iba a utilizar 2 colores, el blanco para dibujar y el negro de fondo. 

En este punto paré de retocarlo. Al final no tenía mucho que ver con el original.

Ahora había que dar los tonos básicos sobre los que trabajar. En ente momento activé la cuadrícula para no liarla más de la cuenta. 

En este punto ya empecé a borrar píxeles de aquí y allá para trampear un poco. 

Con los colores básicos la cosa empezaba a coger forma. Asi que lo siguiente fue jugar con la paleta y darle algunas iluminaciones.

Aunque aquí el resultado sea más o menos decente, voy a echarme tierra encima. Mirad el brazo de la derecha (su izquierdo). La iluminación es una linea recta hasta abajo. Mirad la imagen de cabecera y veréis la 'cantada'.  No podía hacer más dada la limitación de 2 colores por línea y si desplazaba la imagen hacia los lados, salía perjudicado en otras zonas.

Un recurso muy utilizado en MSX y en los sitsemas con pocos colores en general, es el dithering. 

Hablé de él en la imagen de ISO-LOGY de Pixeljoint. Se trata de usar un punteado para crear el efecto de difuminación de colores o sombras. 

En esta caso en particular, me sirvió para suavizar al dibujo y dotarle de algunas sombras extra. Aunque el dithering es todo un arte en si, me obligué a usarlo y aprender de una vez por todas a utilizarlo.

Por supuesto, hice lo que pude ;p

Haciendo énfasis en las zonas de sombra, acabé dando el visto bueno al primer motorista.

Con el segundo hice lo mismo. Pero antes lo giré de posición y le hice algún retoque.

Este motorista era significativamente más pequeño, por lo que la restricción de 2 colores se acentúa muchísimo. Aquí tuve que eliminar muchos píxeles del dibujo original y generar más espacios en negro.

Con mucho cuidado, le apliqué las iluminaciones que pude y jugué sutilmente con el dithering. Fijaos como me comí un trozo de pié derecho y un poco de rodillera izquierda, por ejemplo.

Ya estaba el grueso acabado. Ahora tocaba situar todo el texto para organizar la imagen. Como se puede ver, cambié bastante la organización que tenía planeada en un principio.

La letras estaban colocadas pero había que darles color para que vistieran un poco más la pantalla.

Uno de los sistema más utilizados y más resultones es la de los degradados. dado que se hacen a lo horizontal, no hay problema de restricciones.

Opté por utilizar tonos oscuros en el exterior y claros hasta llegar al blanco en el centro.

El logo de Pixels Mil pude realizarlo con dos tonos que casualmente son parecidos a los usados en la realidad. 

Aún así, la pantalla se veía excesivamente vacía pero había que ir con cuidado de no sobrecargarla en exceso. 

Pensando en los niveles del juego, se me ocurrió probar con unas montañas.

Al estar de fondo, había que elegir un color oscuro, que mejor que el azul. Dejé las partes oscuras en negro pero aún así no acababa de verse integrado en al imagen.

Era la hora del dithering, de nuevo.

El cambio es significativo y lo dí por bueno.

Solo quedaba acabar de dar unos detalles.

Una vez comprobado que no hubieran irregularidades entre casillas, ya tenía la pantalla lista para el menú principal.

Esa moto pequeña está animada y sirve de cursor para elegir en número de jugadores.

Y esta ha sido mi odisea particular. Eso sin contar los 5 niveles diferentes del juego y las pantallas de victoria y derrota (2 de cada).

Pero todo siguiendo la base de lo comentado en este paso a paso.

Para acabar, si alguien está interesado en esto de dibujar para MSX, debo recomendar el blog del compañero Aorante, que me ha servido de ayuda en numerosas ocasiones.


Espero que os haya gustado y en breve os presentaremos el juego de manera oficial.