jueves, 20 de diciembre de 2012

Como se hizo "Bubble Dream" (MSX Kotai + PM)

Bubble Dream es el nombre del último juego de Kotai para la competición de MSX.org Ten Liner Challenge que como su nombre indica, trata de programar un pequeño juego en unas míseras diez líneas de BASIC, pudiendo usar un fichero externo para los gráficos.

Todo un reto que queda lejos de mi comprensión pero del que pude formar parte gracias a la invitación de Kotai para volver a dibujar en MSX.

Éste es el resultado.




El juego ya se puede descargar desde AQUI. (El emulador y pasos a seguir en el post)

Os contaré los detalles de como surgió todo, pruebas y algunos detalles técnicos con la ayuda de Kotai, después del salto!





Tras el anuncio del Tenliner Challenge, Kotai pensó en participar y tras barajar varias opciones, llegó a la conclusión que un remake (o demake según como se vea) del mítico Pang! sería todo un punto. A medida que avanzaba el proyecto, pronto se modificaría la idea inicial aunque se conservarían las mecánicas del juego original.

En cuanto me propuso colaborar en el proyecto lo primero que me vino a la mente fueron las tremendas limitaciones en cuanto a colores por línea, paleta y demás. Kotai nos explica mejor las diferencias entre trabajar para MSX1 y MSX2.

"La diferencia en los gráficos entre un MSX1 y un MSX2 es que el MSX1 tiene una resolución de 256x192 y siempre trabaja en modo patrones, que significa que lo que hacemos es modificar los 256 caracteres ASCII por los caracteres o gráficos que nosotros queramos y para pintar la pantalla lo que tenemos que hacer es ir pintando esos caracteres ASCII de 8x8 píxeles que hemos redefinido. Además cada patrón de 8x8 solo puede tener 2 colores por línea de la paleta de 16 colores fijos que no se pueden modificar y los sprites HW de 16x16 solo pueden tener un color por sprite y en una misma línea solo se ven 4 sprites, si ponemos más no serán visibles."





"En el MSX2 tenemos además de los modos del MSX1 otros nuevos con una resolución de 256x212 que permiten hasta 8 sprites HW en una misma línea, además de poder cambiar el color de los sprites línea a línea. En el caso de los gráficos de fondo, algunos de los nuevos modos ya no trabajan por patrones, si no con varias pantallas gráficas de las cuales solo hay una visible en cada momento y podemos hacer transferencia de gráficos de unas a otras. Cada pantalla necesita 32 KB, por lo que en los MSX2 de 128KB de VRAM (el 99% de los MSX2) significa que podemos tener hasta 4 pantallas en memoria. La paleta sigue siendo de 16 colores simultáneos, pero en este caso a elegir de 512 posibles y ya no existe la restricción de solo 2 colores cada 8 pixels."


512 colores posibles, paleta propia de 16 colores y sin restricción de 2 colores cada 8 píxeles? ACEPTO!

Aunque me lo pasé genial dibujando para Trail 2, lo cierto es que el poder tener menores restricciones me permitía trabajar más rápido.

Era el momento de empezar a dibujar y lo primero era esbozar un escenario. Pensé en un fondo para un juego del estilo y volví a acordarme de Trail 2, en particular en su primera fase con ese cielo rojizo y las montañas. 





Decidí probar a hacer un pequeño homenaje del escenario pero esta vez con mi propia paleta de colores. Este fue el primer esbozo que le mandé a Kotai.




Mientras tanto pensaba en el personaje principal. Debido a las restricciones la animación debía ser en dos frames. Así que debía pensarlo bien. Mi primera prueba ponía al personaje de espaldas con su gorra roja de la suerte, como Bart Simpson. 




Pero no convencía del todo así que lo giré un poco para que mostrara algo más.



Se me olvidaba añadir que Kotai me advirtió en repetidas ocasiones que nuestro sprite estaría formado por dos capas y que en cada capa solo podía haber un color por línea más el fondo. Los sprites no atienden a razones! Así que tuve que separarle el diseño por capas para que pudiera 'picarlos' a mano.





Mientras tanto seguía con el escenario y la idea inicial era hacer un lago con su orilla en la parte inferior de la pantalla.



Pensaba en que contrastara lo suficiente el suelo con el personaje así que esa era la pauta para diseñar el escenario. Tras varias pruebas decidí eliminar la arena y añadir un risco.

El resultado fue satisfactorio y ahí aproveché para rematar la parte superior y añadir elementos en el agua, de los que hablaré más tarde.





La buena noticia es que tras pruebas y pruebas ya tenía la paleta de colores!





Como se puede apreciar, no utilizo en ningún momento el verde y es que ese fue el color elegido para las bolas de forma de destacaran lo suficiente.

Ahora el personaje no se distinguía bien y me gustaba el resultado del escenario por lo que pensé en quitarle los zapatos pasando de gris a un color carne que destacaba con el suelo marrón. Ya puestos, porque no quitarle la gorra y ponerle un gorrito de noche?

Le propuse a Kotai el nombre de Bubble Dream, le gustó y nos pusimos a ello. De repente todo empezaba a cobrar sentido.




Llegados a este punto Kotai me comentó las distintas pantallas que podían incluirse en el juego, pero como decíamos en el principio del post, solo se podía hacer en un mismo archivo. Hubo que separar por zonas cada pantalla. 


"El concurso MRC TenLiner Challege además de la limitación de un máximo de 10 líneas de código BASIC solo permitía el uso de un fichero con contenido multimedia. En Bubble Dream la intención era tener una pantalla con todos los gráficos del: Menú, Final, Stage Clear, Game Over y Vidas de la cual ir copiando según hiciera falta y luego las otras 3 con los fondos de las 3 fases, pero un fichero con las 4 pantallas de VRAM (memoria de video) necesitaba 4x32KB=128KB y el BASIC solo puede leer fichero de hasta 64 KB por lo que nos tuvimos que conformar con solo dos páginas, una con el fondo de las 3 fases y la otras con los tiles que necesitaremos para el juego."



Ajustando, cortando de aquí y de allá y finalmente conseguí meterlo todo. Le dí las referencias a Kotai que incluyó cada escena en su lugar.  Así es como quedó. 



El disparo inicial dejó paso a unas tijeras rojas que finalmente ocuparon protagonismo en todas las escenas. Que mejor que algo afilado para romper burbujas?

Como apunte final, querría que os fijarais en un detalle del agua. Alguien me sabría decir que es ese pedrusco de ahi? Perrito piloto para el que lo acierte.




EDIT:  Pues como bien se ha entendido en los comentario, es un saurio del Bubble Bobble. Un guiño al nombre del juego, a la temática y a unos de los remakes de Kotai. Él no lo adivinó a la primera! Ahí dejo un esbozo para que se vea más claro.




Como jugar?


Lo primero de todo necesitamos un emulador. Uno de los más sencillos de utilizar es Blue Msx. Simplemente es descargarlo y ejecutarlo. 

Nos encontraremos con esta pantalla. 





Descargamos el juego (si no lo habéis hecho todavía) y vamos a 'archivo > Unidad de disco A > Insertar' y abrimos el archivo BubDream.dsk. Ahora pulsamos PLAY en la barra superior y listo!

Es importante que esté en modo MSX2. Para ello basta con ir a 'opciones > emulación' y contrastar que así sea. 





El juego consta de tres pantallas y no tiene sonido de ningún tipo por el lógico límite de la competición pero la idea es que en un futuro el juego se llegue a completar con más niveles, objetos y todo lo necesario para que Bubble Dream deje de lado la coletilla "Ten Liner Edition". 

Esperamos que os guste!



Descárgalo en | Bubble Dream
Tenliner Challenge | Msx resource center



21 comentarios:

  1. El dinosaurio de bubble bobble? ya me pongo a probar el juego, es genial poder meter un juego en 10 lineas, todavía no lo puedo creer, felicidades!

    ResponderEliminar
    Respuestas
    1. Exacto! Vaya a la primera. A mí me parecía que se entendía bastante bien pero al parecer no todo el mundo lo sabía ver. La verdad es que Kotai no se como lo ha hecho pero le ha cabido todo en un espacio mínimo :)

      Eliminar
  2. Está muy buen este paso-a-paso que has hecho!!!

    ResponderEliminar
    Respuestas
    1. "Está muy buen" -> Está muy bien :D

      El que se asoma del agua es el dragon del Bubble Bobble!

      Eliminar
    2. gracias Jose! Veo que se ha entendido a la primera :) Me gusta ver como se hacen las cosas desde cero así que me animé a explicar en esta ocasión mi experiencia. Es curioso como de una idea siempre se acaba en otro lugar!

      Eliminar
  3. Genial el artículo, yo no lo habría explicado mejor.
    Yo no supe reconocer la estatua de piedra y es uno de mis juegos favoritos :(

    ResponderEliminar
    Respuestas
    1. jaja bueno, tu veías un pedrusco no? ;) Gracias por las explicaciones técnicas Kotai!

      Eliminar
  4. Genial sin duda el paso a paso, ahora entiendo como en diez lineas crean estos magnificos juegos. Ademas creo recordar que en otro blog Kotai me lo explico pero no termine de entender.
    Fabuloso vuestro trabajo, sois unos cracks.

    ResponderEliminar
    Respuestas
    1. Gracias Xisco! No te preocupes que yo también me pierdo con los datos más técnicos, por eso le pedí si me podía explicar en unas líneas ;P

      Eliminar
  5. Como mola este "Como se hizo", espero que te animes a hacer más artículos así si vuelves a colaborar con Kotai, pues se aprenden muchas cosas.

    ResponderEliminar
    Respuestas
    1. Me alegro de que guste Roy! Me encantan los paso a paso y aunque este es a muy pequeña escala, me parecía interesante hacerlo. A ver si más adelante lo ampliamos sin limitación de lineas ;D

      Eliminar
  6. Cuanto curro macho, me sorprende lo del sprite en 2 capas, vaya movida. A ver si saco tiempo y me lo bajo para probarlo.

    ResponderEliminar
    Respuestas
    1. Ya estaba avisado desde Trail 2 que se hacía igual pero eso sí, pregunta a Kotai lo que me constó comprender lo que estaba pasando xd que paciencia tuvo!

      Eliminar
  7. Podéis ver un vídeo del juego en el siguiente link:

    http://www.youtube.com/watch?v=4OwCVh6ehis

    Saludos.

    ResponderEliminar
  8. Dios...si que tiene merito la cosa, hacerlo en solo 10 lineas bufff.
    Muy buena la explicación del como se hizo.

    ResponderEliminar
    Respuestas
    1. Gracias! La verdad es que es muy curioso ver como cabe todo eso en diez lineas verdad? Ahora a esperar a ver en que puesto queda en la competición!

      Eliminar
  9. Grande! Se agradece mucho el paso a paso desde cero, para los profános sobretodo, jaja, enhorabuena!

    ResponderEliminar
    Respuestas
    1. Gracias! Espero que a alguien le pueda servir si se anima a dibujar para MSX ;)

      Eliminar
  10. Grandísimo trabajo compañero. Y enhorabuena por el premio.
    ¿Qué programa usas para hacer los sprites?

    ResponderEliminar
    Respuestas
    1. Auqneu tarde, te respondo (se me pasó!) Utilizo Cosmigo Promotion. Es de pago pero una alternativo muy buen y gratuíta es Graphics Gale.

      Eliminar

Gracias por comentar!