Videojuegos artesanales

Cuando se me ocurrió la idea de elaborar un código que pudiese funcionar como videojuego, tuve que decidir qué tipo de juego quería hacer, obviamente. No tardé mucho en decidirme por un juego con vista cenital, como los Zelda originales y muchos otros similares, ya que me pareció la opción más sencilla al tener que modificar las posiciones de los elementos en cuatro direcciones sobre un mapa estático.

Como la idea inicial era crear un juego compatible con dispositivos móviles, la pantalla de juego es cuadrada, dividida en una cuadrícula de 10×10. Esto permite jugar con el móvil tanto en posición normal como apaisada. Por lo tanto, los botones y la interfaz del juego se diseñaron para adaptarse a cada posición, colocándose debajo o en los laterales de la pantalla de juego, según corresponda.

El primer nivel fue el campo de experimentación para las mecánicas del juego y para su diseño visual. Opté por que el protagonista fuese una especie de lagarto, ya que, al usar una vista cenital, me iba a ser más sencillo animar el movimiento de las patas (al sobresalir del cuerpo) y dar la sensación de que camina cuando se mueve entre las posiciones de la cuadrícula. Como posteriormente fui capaz de desarrollar el código para que lanzase fuego y pudiese volar, le añadí alas y pasó a ser una especie de dragón reptante.

Una vez establecidas las bases y las mecánicas en el primero, el desarrollo de cada nivel posterior comenzó con el dibujo de la disposición de los diferentes elementos del mapa en una cuadrícula de 10×10. Estos elementos incluían obstáculos, caídas, gemas, el portal, los recorridos de los enemigos, etc. Así, al tener las coordenadas de la cuadrícula de cada uno, su posterior expresión en el código fue mucho más rápida y sencilla.

Una vez terminado el boceto del nivel, el siguiente paso fue dibujar el escenario en Krita. Para esto, dividiendo el lienzo en la misma cuadrícula, se mantuvieron perfectamente las distancias y las proporciones planeadas. Para cada escenario, se elaboraron diferentes capas de elementos. Esto permitió crear sombras y elementos por los que el personaje pasa por debajo, al colocarlos en una posición del eje z más alta. Una vez dibujado el escenario, se crearon los enemigos y otros elementos dentro de un lienzo cuadrado (la mayoría) para poder integrarlos en la cuadrícula de forma sencilla.

Con los elementos visuales ya terminados, se cargaron en el código HTML del correspondiente nivel y se colocaron en su posición correcta. Posteriormente, añadiendo animaciones con el código CSS, y mediante JavaScript, las funciones ya elaboradas en niveles anteriores se fueron adaptando, introduciendo los nuevos elementos o creando funciones nuevas, de ser preciso. Y así, cada nivel va quedando terminado.

Otra parte importante del desarrollo del juego fue la adición de efectos sonoros. Por ejemplo, el sonido de los pasos de Dunkxar cambia según el tipo de suelo por el que camine y cesa cuando está volando. Descargué los sonidos de la página web freesound.org, teniendo que adaptarme muchas veces a las opciones existentes, pero creo que obtuve un buen resultado en este apartado.

Al ser un proyecto con una finalidad autodidáctica, me propuse el reto de que cada nivel aportase una innovación para forzarme a crear código nuevo y, de esta manera, adquirir más conocimientos:

• -En el primer nivel se establecieron las mecánicas del juego, creando todas las funciones básicas: movimiento, proyectil, recogida de elementos, caídas, obstáculos, enemigos, etc.
• -En el segundo nivel, el reto fue conseguir que el personaje pudiese sumergirse en agua. Para ello, desarrollé el sistema de colocar diferentes capas en el eje z.
• -En el tercer nivel, mi objetivo fue simplemente crear condiciones atmosféricas. Lo conseguí añadiendo una capa superior con la animación de copos de nieve y aplicando un filtro oscuro para simular el oscurecimiento del cielo.
• -En el cuarto nivel coloqué muchísimos obstáculos, ya que en niveles anteriores sufrí ciertos problemas con la interacción con los elementos del mapa. Como resultado, me llevó a entender la importancia del orden del código en JavaScript, ya que la orden incorrecta hacía que el personaje se desplazase hacia atrás en vez de pararse al moverse hacia un obstáculo.
• -En el quinto nivel me propuse hacer una batalla contra un minijefe y colocar elementos en el mapa con los que hubiese que interactuar para poder alargarla, como botones para abrir puertas, en este caso.
• -En el sexto nivel, quise diseñar un sistema para poder realizar más de un ataque de fuego por nivel y cambiar el sistema de movimiento, el cual, al final, también apliqué a todos los niveles anteriores. Originalmente, al pulsar la tecla para mover el personaje, este se movía instantáneamente. Con el nuevo sistema, primero gira en la dirección del movimiento y, al volver a pulsar, es cuando se mueve.
• -En el séptimo nivel, que es el mejor diseñado en mi opinión, quise crear diferentes niveles de altura. Para ello, tuve que implementar la posibilidad de subir al superior por un punto concreto y de poder caer de ese nivel superior al inferior. También conseguí compartir espacio con un enemigo sin que te mate por estar a diferente altura. Si hago una secuela u otro juego parecido, desarrollaré el código a partir de este nivel.
• -En el octavo nivel, el reto fue coordinar perfectamente una animación CSS con el cambio de clases de un elemento a través de JavaScript (JS). Esto lo hice para poder crear el efecto de unos pinchos que salen y vuelven a meterse en la tierra y solo maten al personaje en el momento correcto.
• -En el noveno nivel, quise crear una mayor interactividad con un elemento del mapa, generando la ilusión de poder empujar algo. Lo conseguí desencadenando, con una acción concreta, una animación que combina JavaScript (JS) con CSS.
• -En el nivel final, el objetivo fue crear una batalla con diferentes fases y algo sorprendente, teniendo en cuenta el poco tiempo disponible. Creo que conseguí un resultado bastante aceptable.
• -En el epílogo, quise ofrecer un ambiente relajado en el que se pudiese pasear e interactuar con diferentes elementos. Esto permitió desencadenar dos finales de juego diferentes.

Al ir adquiriendo nuevos conocimientos, tanto de programación como artísticos, todos los niveles sufrieron reescritura de código y retoques visuales. Por ejemplo, no se me ocurrió poner las sombras hasta el nivel 6, por lo que hubo que retocar los fondos de todos los niveles anteriores. El último retoque a nivel general fue tener que modificar el código de todos los niveles para que el personaje principal y los de su especie parpadeasen, solo para darles un aspecto más vivo.

En realidad, ni la historia ni el objetivo final del juego estaban definidos cuando comencé el proyecto. Inicialmente, solo era un juego en el que tenías que coger seis objetos para abrir un portal y acceder a otro nivel. El resto lo fui decidiendo sobre la marcha, ya que no sabía hasta dónde podría llegar. Espero que, aun así, el juego haya alcanzado cierta coherencia al final. Lo que sí decidí al poco de comenzar fue que el juego tendría un máximo de diez niveles, para no eternizarme con el proyecto y poder empezar otros nuevos, que intentaré planificar mejor antes de iniciarlos.

Lo más probable es que Dunkxar tenga una secuela (o precuela), pero con una pantalla de juego más grande. Se desplazará el fondo del mapa al llegar a los bordes, y cada nivel tendrá un mínimo de cuatro secciones. Esto permitiría crear una aventura mucho mayor. En un principio, lo diseñaré solo para PC para eliminar la limitación del tamaño de la pantalla y, después, si es posible, lo adaptaré para dispositivos móviles.