The Brick Web
Desde siempre me han fascinado el desarrollo de juegos, sobretodo los juegos clásicos, inicie en el mundo del desarrollo de juegos haciendo uso de Visual Basic 6.0, realizando los movimientos de los personajes con Flash (Si con Flash), en este caso haciendo uso de un componente de Visual Basic que permitía el embebido de SWF dentro de un proyecto.
Una vez me inicie en el mundo laboral conocí el desarrollo web, en este caso en Backend con PHP e inicie mis primeros pasos con las tecnologías web, como es bien sabido éstas en los últimos años han mejorado considerablemente, tanto es así que han reemplazado en gran medida a los Plugins.
En los últimos tres años he tenido un gran interés en Javascript y en la APIS que ofrece para el manejo de gráficos sin la dependencia de los Plugins, como SVG, Canvas y WebGL.
En el caso de WebGL he realizado algunos ejercicios, el último relacionado a un juego que hace uso no sólo de WebGL (Juego recorre Mundos), sino también de elementos propios del celular como el acelerómetro y vibrador, el código del mismo puede ser consultado en GitHub.
Para el fácil manejo de WebGL, he hecho uso de la popular librería ThreeJS.
Este tipo de ejercicios me han permitido conocer mucho acerca de la forma de poder hacer aplicaciones web, en este caso juegos, que puedan ser “instalables” en un móvil, por ejemplo usando el manifest.json para indicar propiedades tales como orientación del dispositivo, ícono y más características del juego.
Una de las principales debilidades de este tipo de aplicaciones es la necesidad de contar con una conexión a internet (las aplicaciones híbridas y nativas no tienen está dificultad), pero igualmente ya existen nuevas tecnologías que buscan solucionar este “inconveniente” como es Service Worker, en este momento me encuentro estudiando su uso para una futura versión de los juegos que he realizado y que realizaré.
Mi último proyecto es el que ha inspirado está entrada “The Brick Web”, el cual es una colección de juegos de la famosa consola The Brick Game, esta contenía varios juegos, los cuales en su mayoría eran similares, pero que cambiaban tan sólo algunas características de su funcionamiento.
Deseaba realizar una versión de estos juegos con tecnologías Web, ya había encontrado varios juegos de este tipo de forma nativa , los cuales me sirvieron como inspiración.
Uno de los principales retos del proyecto, es el relacionado a que no sólo era un juego sino varios, los cuales tienen diferentes dinámicas y movimientos.
Otra “dificultad” estaba relacionada a que el juego debería desplegarse en cualquier resolución de pantalla (Dispositivos móviles o de escritorio), por lo cual era necesario que se ajustará de forma proporcional.
Inicie realizando algunas pruebas de concepto, en este caso iniciando con la creación del LCD del juego.
En los juegos de está consola se “jugaba” con el encendido y apagado de ciertos puntos que conformaban el LCD, quería dar la misma experiencia, también inicié la validación de los botones del Juegos, los cuales deberían funcionar tanto en dispositivos móviles a través de eventos touch, como en equipos de escritorio haciendo uso del mouse o teclado.
Además en ciertos juegos, se debe tener en cuenta si un botón está presionando por largo tiempo para realizar ciertas acciones, tal es el caso de los juegos Tetris, el cual al presionar el botón “abajo” la figura debe bajar a mayor velocidad y en el juego Race al presionar el botón “Enter/Arriba” el carro aumenta de velocidad.
Haciendo estas pruebas llegué a la conclusión que quería realizar una base común a todos los juegos, como el LCD, Inputs, Puntuaciones, Render y cargarlos dinámicamente.
El primer paso para lograr esto fue la creación de una serie de módulos, como LCD, Controls, Cartucho (para cargar los juegos), para lograr dicha separación hice uso del Browserify, que permite el manejo de módulos como se realiza en Node.js
“Con Browserify se lográ el manejo de Módulos como si de una aplicación de Node se tratase.”
Una vez logrado este objetivo, estaba el reto de programar los juegos y poderlos cargar de forma dinámica, uno de los módulos que hace uso la aplicación es Jquery, la cual cuenta con el método getScript() que permite cargar archivos .js de forma dinámica, a este módulo se le estableció el nombre cartuchos.js, el cual consume un archivo .json, con la relación de juegos que se han realizado, cada uno de estos juegos, heredan elementos comunes, como es el caso de los controles, LCD y el render, éste último haciendo uso de requestAnimationFrame().
Con la separación de módulos, la carga dinámica de los scripts, se hizo sencillo la creación de los juegos, al día de hoy se ha realizado 4 como son:
- Tetris.
- Race.
- Adivina la figura.
- The Frog.
Este último juego con un pequeño “Huevo de Pascua” para cambiar color a los elementos (presionar el botón abajo seis veces, en el punto de partida).
Aún el juego tiene ciertas puntos a mejorar y próximamente será publicado en GitHub, para que cualquier persona que desea realizar juegos de este tipo lo pueda hacer.
Ciertamente el desarrollo de está aplicación sirvió para afianzar el conocimiento de estas nuevas APIS como Canvas, pero además de Javascript/CSS3, no soy un programador experto, leo constante de nuevas tecnologías/librerías, además del nuevo estándar de Javascript (ES6), pero indudablemente la mejor manera de aprender es haciendo, y más aún haciendo algo divertido como juegos.
Este fue un pequeño adelanto, de la experiencia que he tenido al realizar este proyecto, el cual día a día lo he ido puliendo y como lo decía próximamente será publicado.
Actualización (03/09/2015)
The Brick Web ya se encuentra disponible en GitHub https://github.com/Jorger/the_brick_web además de poder ser jugado en línea en: https://jorger.github.io/the_brick_web/
Jorge Rubiano.
