3 caminos para crear juegos con JavaScript

Alguien que esté intentando aprender sobre desarrollo de juegos hoy en día ciertamente ya ha oído hablar de las tres grandes game engines del momento: Unity, Unreal Engine y Godot. En cuanto al tiempo necesario para el desarrollo y la presencia de una comunidad activa para ayudar con dudas, probablemente estas sean la opción más eficiente para el desarrollador/artista indie (independiente) que quiera crear un juego, ya sea para participar en una game jam o para un proyecto comercial.

Pero, a veces, solo queremos hacer un clon de un juego de nuestra infancia y luego no volver a tocar el desarrollo de juegos. En esos casos, es más difícil justificar la inversión de tiempo y energía en aprender una de las grandes engines. La buena noticia es que si no tienes grandes ambiciones para tu proyecto, existen innumerables bibliotecas o frameworks de desarrollo de juegos para prácticamente cualquier lenguaje mínimamente popular (Lua/Love2D, Python/PyGame, Java/libGDX, C++/Raylib, C#/MonoGame, etc.). De esta forma, puedes seguir usando tu lenguaje, editor y ecosistema favoritos.

En este artículo, nos enfocaremos en la plataforma Web. La estructura inicial del proyecto es la siguiente:

• index.html
• style.css
• main.ts

El código inicial de index.html es el siguiente:

Y el del archivo style.css es así:

El main.ts quedará vacío por ahora.

Utilizaremos el bundler esbuild para generar el archivo JavaScript que contendrá la lógica del juego junto con posibles bibliotecas. También usaremos archivos TypeScript, pero solo para obtener ayuda con la autocompletación. El esbuild ya viene con soporte nativo para TypeScript, lo que implica que no es necesario instalar el compilador tsc por separado.

Para instalar esbuild, se hace como con cualquier otro paquete NPM:

npm install esbuild

yarn add esbuild

pnpm add esbuild

En el archivo package.json, agregaremos los siguientes scripts:

Además, necesitamos servir el directorio raíz del proyecto usando un servidor local. Aquí hay varias opciones, como los paquetes http-server e serve. A mí me gusta la extensión ritwickdey.LiveServer para VS Code.

Kontra.js

Es una micro-biblioteca creada específicamente para la game jam js13k. En esta game jam cada byte cuenta, ya que para participar, tu envío debe ser un archivo .zip que contenga todo lo que tu juego necesita para funcionar (códigos, index.html, hojas de estilo, imágenes, sonidos, etc.) y este archivo no puede tener más de 13 KB de tamaño.

Dado este enfoque minimalista, esta biblioteca se centra solo en lo esencial: cargar archivos, implementar un game loop, leer la entrada del usuario vía mouse/teclado y abstracciones para sprites y tilemaps. Así es, no tiene soporte para audio, lo que requiere el uso de algo como un HTMLAudioElement o de la Web Audio API o incluso de alguna herramienta como MiniSoundEditor que transforma efectos sonoros en código.

La instalación es sencilla:

npm install kontra

yarn add kontra

pnpm add kontra

Un ejemplo de aplicación que carga imágenes del disco y usa animaciones (archivo main.ts):

Si quieres ver el proyecto completo, aquí está el repositorio.

Algunos juegos hechos con esta biblioteca se pueden encontrar aquí.

Kaboom.js

Esta es una biblioteca basada en la arquitectura ECS, lo que significa que los objetos del juego son básicamente colecciones de componentes que son formas de añadir estado y comportamiento a los objetos para minimizar el acoplamiento.

Esta arquitectura o alguna variación de ella es fuente de inspiración para la mayoría de las nuevas game engines, ya que si se implementa con cuidado en cuanto a la forma de organizar los datos, especialmente teniendo en cuenta la cuestión de la localidad, es posible extraer mucho más rendimiento del ordenador o consola en la que se esté ejecutando el juego.

Para instalarla, solo ejecuta en la raíz del proyecto:

npm install kaboom

yarn add kaboom

pnpm add kaboom

El código completo, para el mismo proyecto de antes, con Kaboom.js queda así:

Repositorio con la aplicación completa: link.

Phaser.js

De lejos, la opción más rica en funcionalidades y con la comunidad más grande entre las mencionadas anteriormente. Es más un framework que una biblioteca, y si consideramos este proyecto hecho por un miembro de la comunidad, incluso podríamos considerarlo como un motor de juego.

Hay muchos juegos en Steam y en itch.io hechos con Phaser. ¡Incluso el éxito indie “Vampire Survivors” fue hecho con esta biblioteca! Es cierto que el autor tuvo que cambiar de motor recientemente debido a las limitaciones de rendimiento de la plataforma Web, pero durante algún tiempo él mismo creaba nuevas funcionalidades con JavaScript y otro equipo se encargaba de portar el código al nuevo motor.

Ahora, vamos a instalar el paquete Phaser:

npm install phaser

yarn add phaser

pnpm add phaser

El código usando Phaser queda así:

Como podemos ver, Phaser tiene un estilo similar a la POO (Programación Orientada a Objetos), lo que puede ser una buena puerta de entrada para quienes ya están familiarizados con este paradigmaa.

Repositorio con la aplicación completa: link.

Consideraciones finales

Así queda el resultado de cualquiera de las tres versiones:

Las imágenes son de este paquete hecho por Kenney.

Aquí puedes ver la versión live (esta versión está basada en Kontra, pero las otras son idénticas).

Hacer juegos con tecnologías web es una de las formas más fáciles de empezar en este campo, especialmente ahora que todo el mundo, sus perros y sus gatos conocen al menos un poco de JavaScript.

Algunos enlaces útiles para quienes están comenzando en el desarrollo de juegos:

• https://www.reddit.com/r/gamedev/wiki/index
• http://www-cs-students.stanford.edu/~amitp/gameprog.html
• https://www.gamedeveloper.com/disciplines/how-to-prototype-a-game-in-under-7-days
• https://www.kenney.nl/
• https://kaboomjs.com/
• https://newdocs.phaser.io/

¡Buena suerte y que tengas un buen aprendizaje!