epelpad

He recreado a Bomberman y te muestro como lo hice

¿Que tal?
Antes que nada en el siguiente post hablaré en algunas ocasiones sobre temas técnicos los cuales intentaré explicar o resumir para evitar cualquier confusión al final, espero que sea de su agrado.


La verdad es que soy programador y llevo algo más de un año metido en esto, hace tiempo se me ocurrió la idea de recrear juegos clásicos o hacer uno que fuera algo interesante así que inicié por lo más simple: un juego de NES y pensé en Bomberman, aquel juego que desde pequeño lo jugaba con un primo desde una consola pirata que tan solo costaba en ese entonces 10 dólares y simulaba el sistema de una plataforma NES donde me costó pasarmelo o al menos superar los primeros 10 niveles porque en aquel entonces no existian los checkpoint o no tenías el privilegio de salvar la partida en las circunstancias más difíciles o simplemente tenías un número finito de vidas y un sinfín de niveles, el punto es que después de tanto tiempo y con ayuda de una XBOX vieja (un modelo del 2004) que tengo y que tiene un simulador de videojuegos de plataformas NES, SEGA y Nintendo 64 logré pasarme el videojuego en una mañana completa pero por supuesto con una pequeña ayuda que tiene el simulador y es que al presionar el Black Button del control podía salvar el juego en un par de segundos y al presionar el White Button cargaba la partida salvada en otro par de segundos, este proceso lo realizaba cada vez que iniciaba un nivel, por lo que siempre tenía las típicas tres vidas, sin embargo algo que facilitó aún mas mi objetivo era que si tenía el poder de ser inmune a las explosiones de las bombas, traspasar los muros de concreto, colocar más de 5 bombas seguidas y activar las bombas cuando quisiera entonces ya tenia la partida ganada debido a que si ponía una cadena de bombas esto creaba una cadena de explosiones pero cuando explotaba una de ellas en ese instante me permitía poner otra en ese mismo instante ahora imagina hacer esto presionando el botón de poner bombas y explotarlas al mismo tiempo mientras ibas caminando por el mapa He recreado a Bomberman y te muestro como lo hice


bomberman


El efecto era similar a este:

Programacion


¿Alguien mas lo intentó? lo cierto es que hacer esto ponía lento el juego, los FPS bajaban considerablemente si lograbas hacer esto y tenías que superar 20 o 25 niveles (no recuerdo muy bien) pero el punto es que superabas el juego fácilmente y ya perdía sentido seguir jugando, sin embargo perdí toda una mañana.

Me puse el objetivo de recrear el mismo videojuego con los mismos personajes, el mismo ambiente, los mismos sonidos, los mismos efectos y hasta la misma jugabilidad, había investigado sobre crear videojuegos de la forma más simple posible, no quería un "Hola Mundo" cuyo proyecto pese 2 o 3 GB quería algo orientado a Web al menos, fue entonces cuando contemplé que la idea de crear un videojuego así en Vanilla JavaScript (usar JavaScript puro) en poco tiempo era una locura, tan solo realizar la animación del personaje del videojuego cuando camina hacia la izquierda eran más de 50 líneas de código donde tenía que manejar con absoluta precisión el alto, el ancho, el punto de ancla, bla bla bla ¿puedes imaginarte cuantas líneas de código tendría las siguientes animaciones, manipular las colisiones, pintar el mapa, etc.? en este punto si tú eres programador o has leído algo sobre temas de desarrollo has escuchado sobre las famosas librerías o frameworks, y son muy útiles porque las librerías hacen milagros inesperados juegos existe una librería para realizar animaciones similares y se llama jQuery.animateSprite y si ves bien realizar una animación de este tipo te puede tomar pocas líneas de código, si no sabes que es una librería te lo puedo resumir:


Es un traductor de un lenguaje de programación que te permite hacer algo en menos tiempo, mucho mejor y con mayor facilidad


¿Y como crean las librerías? pues cuando los programadores tenemos la necesidad de hacer algo rápido por lo general nacen proyectos de programadores de diversas partes del mundo que se suman a suplir esta necesidad, escriben muchas líneas de código en cierto tiempo y lo comparten, es como si en este momento alguien te pidiera crear una bicicleta, entonces ¿tienes que crear la rueda desde cero o simplemente la compras? cabe aclarar que muchos pueden optar por comercializar la licencia y ganar algo de liga. Entonces ¿te puedes imaginar cuantas líneas código puede tener una librería como la que te acabé de mencionar? existen librerías para visualizar gráficos estadísticos, controles web y por supuesto que videojuegos también.

Entonces buscando en GitHub (es como la Taringa de los programadores pero con unas cuantas diferencias) sobre que motores de juegos podría usar, uno de ellos es Cocos2d-x orientado al lenguaje de programación C++ (uno de los lenguajes mas viejos pero mas respetado), JavaScript y Objetive-C (este lenguaje se usa para crear aplicaciones en iOS) y si no lo sabias Geometry Dash está desarrollado en este motor, pero me pareció demasiado para empezar, entonces me topé con Phaser y me interesó bastante especialmente porque está orientado a JavaScript y usa renderizado en WebGL, indagado un poco en el sitio web de ellos hay demasiada documentación (es como una Wikipedia de como usar la librería, entre más detallada sea, mucho mejor) aparte tenían pequeñas muestras de videojuegos, es decir un ejemplo de como hacer animaciones, colisiones, mapas, física, partículas, etc. Solo faltaba un tinto para empezar a romperme el coco y ver si daba resultados.

Recuerdo que el primer día vi este ejemplo y no entendía nada, pero absolutamente nada, parecía una mezcla de Python con Java (que también son lenguajes de programación que se usan para hacer otras cosas), no tenía ni idea de como demonios funcionaba, lo cierto es que ya había trabajado con JavaScript pero comprender esto fue un reto.

Estructura de Phaser

Bajarse los sprites (no es el refresco sino una secuencia de fotos las cuales si las mueves a cierta velocidad da el efecto de una animación) y los sonidos fue lo más fácil, sin embargo tuve que editar los sprites con Photoshop para que se viera una animación precisa y no recortada. Pasó una semana o dos y vi resultados, por lo menos podía mover los personajes y animarlos, comprendía la relación que existia entre ciertas partes del código, por ejemplo, en programación se usa algo extremadamente importante que se llaman funciones o métodos que sirven para encapsular código y reutilizarlas cuando se requiere de tal forma que el código quede más organizado y con menos líneas de código, algunas esas funciones que usa Phaser son:

  • Preload permite cargar archivos como mapas, texturas, imágenes, sonidos, etc.
  • Create permite cargar el juego, poner los personajes, cargar el mapa, iniciar el sonido, definir controles, etc.
  • Init se ejecuta antes de Create y permite pasar datos para ser procesados como el número de vidas, el número y tipo de personajes, el tiempo límite, etc.
  • Update funciona como alguien esperando a que tecla presionas para hacer algo (mover el personaje, activar o desactivar un sonido, etc.).
  • Render permite detallar tu juego (altura y anchura del personaje, a que velocidad se desplaza, en que posición X o Y se encuentra, etc.) es necesaria si queremos analizar como se comporta el juego.

Colisiones

Es posible usar Física en Phaser ¿puedes creerlo? es más, te permite elegir entre tres tipos de Física: Arcade, P2 y Ninja, donde el tipo Arcade es el más básico y el que usé en el proyecto, los otros tipos te permiten renderizar cuerpos físicos de la forma que quieras y son mucho más precisos. La Física es necesaria para que Bomberman y los enemigos no se salgan del mapa, determinar si Bomberman puede morir o no y que cuando se detone una bomba se determine si un ladrillo de concreto se destruya.

videojuegos web
Ejemplar de una torre de domino usando un reconocido motor físico llamado Box2D en Phaser


Mapa

Una de las partes más complejas es el mapa, resulta que el mapa del juego es un archivo JSON (una mini base de datos) con una serie de propiedades que permiten indicar en que posición (X,Y) está ubicado cierto elemento como los ladrillos de concreto y los de metal pero para generar este archivo se puede hacer por medio de un software llamado Tile Map Editor el cuál es muy fácil de usar, sin embargo al principio puede parecer confuso debido a que no sabes como ubicar un elemento encima de otro sin que se borre y resulta que el programa trabaja por capas, similar a Photoshop, entonces desde Phaser puedes indicarle que capa rederizar, también puedes crear elementos o puntos donde vas a posicionar una imagen o un sprite como los ladrillos de concreto debido a que en cada nivel los ladrillos se ubican en posiciones diferentes y necesitan ser destruidos.

Explosiones

Renderizar una explosión es muy sencillo, basta con renderizar los sprites de la explosión en cierta coordenada, sin embargo tuve que dividir la explosión en partes ya que si Bomberman adquiere el poder de incrementar la longitud de la explosión pues tendría que renderizar una explosión mas grande y para hacer esto tienes que ser preciso al ubicar cada parte del sprite, por el momento tengo problemas al momento de detallar la explosión de la forma más exacta posible.

Enemigos

Otra cosa que me complicó bastante es el tema de ubicar los enemigos justo cuado empiez la partida debido a que algunos quedan encima de los ladrillos de concreto. El tema de mover los enemigos de forma autónoma no lo hago de la mejor manera posible o al menos eso creo, lo que hago es moverlos aleatoriamente en una dirección hasta que detecte una encrucijada en el mapa y si es así entonces que tome otro camino al azar, así que todavía no son "inteligentes".

Sacar el jugo a Phaser

El código estaba creciendo, tenía todo en un archivo y no existía POO (Programación Orientada a Objetos, es un tipo de programación donde se implementa la lógica en objetos y si la dominas bien tu código queda mucho mejor estructurado, flexible y legible para otros programadores), empecé a tener problemas con volver a iniciar el juego, es decir si se perdía la partida tendría que limpiar el mapa y acomodar todo de nuevo, pues resulta que es un lío hacer esto manual, por lo que indagué y me topé con este artículo donde hablaba sobre la Programación por Estados en Phaser phaser ¿y qué es? pues esta funcionalidad de Phaser permite eliminar la basura de la forma más optima posible y no tener que "sacar la basura con las manos", de esta forma puedes poner un menú de juego, una pantalla mostrando el nivel y finalmente el juego en sí.

¿El juego tiene fin?

No. Es solo una demo de un nivel, sin mas que decir dejo un video de la demo:


link: https://www.youtube.com/watch?v=W5vcOb7laG0

Si quieres probar el juego puedes descargarlo desde aquí, en la parte superior derecha das clic en "Clone or Download" y luego en "Download ZIP", descomprimes los ficheros y luego abres el archivo que dice "index.html" (Es necesario abrirlo en Mozilla Firefox).

Conclusión

No sé cuanto tiempo exacto me tomó en crear el videojuego pero estimo que fueron 2 o 3 meses, en aquel tiempo no tenía empleo sólo estudiaba por lo que cuando recién empecé a laborar no me dió tiempo para terminar el proyecto, aún faltan muchas cosas como lo son:

  • Detallar la explosión de las bombas.
  • En algunos equipos el juego se ve extremadamente lento, aún no sé la razón sin embargo sospecho que puede ser el mapa o los Timers activos.
  • Fijar un fin de nivel y el efecto de los poderes en Bomberman.
  • Solucionar bug al ubicar los enemigos en el mapa (algunos enemigos aparecen encima de los ladrillos de concreto o aparecen en el siguiente nivel pero no se mueven y son "inmortales" ).
  • Optimizar la autonomía de los enemigos según su tipo, si recuerdas bien, algunos enemigos del juego como la galleta (creo que era una galleta o me parece) saben donde se encuentra Bomberman y lo pueden perseguir por el resto del mapa con suma precisión.

Estoy abierto a críticas constructivas ya que planeo terminar el proyecto y dar una continuación con este tema ¿Que recomendaciones me podrías dar? bomberman nes

Juegos en HTMLJuegos en JavaScript

2 comentarios - He recreado a Bomberman y te muestro como lo hice

Julian_0072
Aguante el Neo Bomberman wachín!