sábado, 4 de febrero de 2012

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.



31 comentarios:

  1. Simplemente impresionante, me dejas sin palabras, estoy deseando ver de manera oficial el juego, un saludo!

    ResponderEliminar
    Respuestas
    1. Muchas gracias! Le hemos dedicado muchas noches hasta las tantas. Mucho retro HAMOR en este trial 2 :D (y ojeras XD)

      Eliminar
  2. Como siempre un trabajo magnifico, la mezcla de kotai contigo es explosiva no paráis de hacer cosas y todas buenas, enhorabuena.

    ResponderEliminar
    Respuestas
    1. Se agradece esa confianza. Es todo un halago :D A ver si lo ultimamos.

      Eliminar
  3. Gran trabajo Toni, que paciencia y que estilazo :). Os habéis mezclado dos tíos muy buenos y trabajadores, así que solo esperar poder disfrutar de vuestros remakes :D

    ResponderEliminar
    Respuestas
    1. Ha sido toda una experiencia esto de dibujar en msx! Cuando empecé no tenía ni idea, asi que como ves todo es cosa de ponerse y ya está. Paciencia y martirizar a Kotai con preguntas XD

      Eliminar
  4. Ten bastante claro que cuando salga el juego, aunque no ha dado tiempo a presentarlo en el concurso y aunque normalmente hablo de juegos de pc, va a ser artículo de mi blog y voy a dar por culo con el hasta en la sopa.

    ResponderEliminar
    Respuestas
    1. jaja gracias! Este tipo de cosas la verdad es que quién más la disfrutarán serán los que les guste el mundillo del msx. Además está programado con Basic y no con lenguaje de máquina, por lo que la velocidad se ve afectada. Eso sí, Kotai ha creado un scroll muy convincente en BASIC, toda una hazaña. Hay que verlo!

      Ya hablaré sobre ello.

      Eliminar
  5. Muy bueno Toni!!
    Es todo un arte hacer dibujos con pixelart, pero en el caso de los 8 bits tiene un "arte" adicional que es combinar las limitaciones de colores en la cuadrícula de 8x8 :)

    Veo que con Kotai estais colaborando bastante, ¡me alegro!

    ResponderEliminar
    Respuestas
    1. En realidad este Trail 2 fue un proyecto al que me enganché de rebote y ha sido toda una experiencia. Es muy divertido esto de dibujar con restricciones (hasta que el tiempo se echa encima XD)

      Espero seguir colaborando con Kotai :)

      Eliminar
  6. ¡Qué lástima lo del concurso! Bueno, aún así, felicidades por el resultado, te lo digo sinceramente. Me gusta mucho el dibujo y también me hace mucha ilusión, porque me ha recordado a mis pinitos de dibujante con el MSX, aunque se me daba muy mal y no he continuado con esto. Yo tengo un cartucho ROM de dibujo de la compañía HAL que se llama Eddy II y le dediqué muchas horas porque lo encontraba tan divertido como algunos juegos, además de que ya sabes que en aquella época lo normal era tener pocos juegos, por lo caros que eran, así que exprimíamos lo que teníamos.

    En fin, espero ver el resultado de esta nueva colaboración con Kotai.

    ResponderEliminar
    Respuestas
    1. La verdad es que el chasco inicial fue importante. Pero luego, en frío, vimos la oportunidad de acabar de pulirlo bien y alguna otra sorpresilla.

      No conocía ese Eddy II. Para ser sincero, este es el primer contacto con MSX, yo era de c64 ;p

      Eliminar
  7. A mi lo que mas me gusta de estas entradas de Toni es que aprendo cosas, no tenía ni puñetera idea del límite de 2 colores por cada cuadrícula de 8x8, por ejemplo.

    ResponderEliminar
    Respuestas
    1. Me alegro de que te gusten estas entradas! Ya que lo cuelgo siempre me gusta explicarlo un poco por si a alguien le puede servir o interesar de alguna manera. Imagínate mi cara cuando me empecé a topar con esas limitaciones por primera vez...

      Eliminar
  8. Enhorabuena por el duro trabajo que habéis echo y las horas que le habéis echado. Sinceramente, no es un tema que me haya llamado la atención nunca y además no se me da bien, pero reconozco que has echo una grandiosa labor y que debe costar muchísimo llegar a hacer tu dibujo final (que ha sufrido un gran cambio desde el inicial). En cualquier caso te ha quedado bastante bien y espero que nos mantengas informados sobre tu juego para poder disfrutar de él cuando salga!

    Un saludo y mucho ánimo Toni!

    ResponderEliminar
    Respuestas
    1. Muchas gracias por tus palabras :D aunque en el post hayan pocos pasos, en realidad me llevó tiempo y quebraderos. Como todo, es cuestión de práctica y cambiar cosas una y otra vez hasta quedar satisfecho.

      Sin duda ya hablaré sobre él. Un saludo!

      Eliminar
  9. Pues si os gusta el imagen de la portada esperar a ver los graficazos que ha hecho para el juego... impresionantes. Casi parecen más gráficos de un juego de consola que de un MSX tal y como lo conocíamos en europa (los juegos japoneses eran otra historia y los gráficos del Trail 2 incluso superan a los juegos japonés)

    ResponderEliminar
    Respuestas
    1. No nos hypeeis mas y enseñarnos el juego cacho cabrones xD, si mola y auto editáis versión física os compro la edición especial xD.

      Eliminar
    2. Los gráficos son muy buenos, pero el juego está hecho en Basic, así que no esperéis gran cosa... al tener scroll el Basic se ahoga un poco y el juego va lento, aunque jugar a dobles es divertido.

      Eliminar
    3. Ups, el hype ya está hecho XD

      Muchas gracias por esos halagos Kotai. Ya solo por aguantar la avalancha de preguntas a las que te sometía y corregir esas imágenes una y otra vez... ya te mereces un templo jaja

      Eliminar
  10. Estás hecho todo un artista! :D
    Sin lugar a dudas, la unión de kotai y Toni promete MUCHÍSIMO!
    Un fuerte abrazo compañero!
    Y felicidades por un trabajo bien hecho!

    ResponderEliminar
    Respuestas
    1. Gracias José! Todos estos proyectos son la mejor forma de practicar y no perder el contacto con los píxeles (cada vez más gordos por eso XD)

      Eliminar
  11. joder Que currado y bien explicado esta todo :) Aunque menuda putada que no podais entrar al concurso a ver si el año que viene....

    ResponderEliminar
    Respuestas
    1. Fue un buen chasco :( pero como decía por ahí arriba, era complicado competir con gente que ha programado con lenguaje de máquina, más complejo pero con resultados insuperables. Vale la pena echarles un ojo, hay auténticas maravillas!

      Aún así, lo estamos ultimando para sacarlo en breve ya sin las prisas ;)

      Eliminar
  12. Jo, pues sí que era difícil. Yo no me había dado cuenta del error ese del brazo hasta que lo has dicho tú. Cuánta paciencia tienes.

    ResponderEliminar
    Respuestas
    1. La verdad es que es toda una historia esto de dibujar en msx, pero con ganas todo es posible!

      Eliminar
  13. Ma habia perdido este tutorial y es genial sin duda, hay que ver lo que se aprende, nunca habia visto los graficos del MSX desde este punto de vista.

    ResponderEliminar
    Respuestas
    1. hasta que no me puse a investigar sobre el tema, no tenía ni idea de todas esa limitaciones. Sin duda es la mejor manera de valorar como se merecen todas esas joyas sobretodo, de Konami. Hay que ver como estrujaban la máquina!

      Eliminar
    2. Tengo que acabar el juego y subirlo.
      Ya está todo acabado, pero al añadirle los sonidos del motor he llegado al límite de memoria del BASIC y ahora el juego solo carga si arrancas el MSX (o emulador) con el CTRL pulsado (que te deja un poco más de memoria a costa de no cargar algún recurso) y eso no me gusta.
      Tengo que cargar el juego en el MSX real y cambiar algunos CHR$() del código fuente por el carácter en cuestión (que solo puedo hacer desde el MSX real) y así ahorrar esos pocos bytes que necesito para que el juego arranque sin necesidad de pulsar la tecla CONTROL.
      A ver si monto el MSX delante del televisor y lo acabo ya.

      Eliminar
    3. Échale una foto cuando lo tengas todo montado, para el making of xd. Ánimo Kotai :D

      Eliminar
  14. Quedará un poco apretado encima de la mesa el portatil de mi mujer, la TV de 32" para el MSX y mi monitor de 24" del PC

    ResponderEliminar

Gracias por comentar!

Quizás también te interese...