¿Qué es Phaser?

Crear un videojuego es un proceso complejo. Existen muchísimos motores, muy diferentes entre sí, para crear videojuegos como Godot, Unity, Unreal, GameMaker, etc. Sin embargo, nosotros vamos a hablar de Phaser, un motor de videojuegos orientado a desarrolladores que ya conocen Javascript y se sienten cómodos con este lenguaje de programación que te permite construir juegos basados en tecnologías web.

¿Qué es Phaser?

Phaser es un framework Javascript que te proporciona una serie de herramientas, atajos rápidos y funcionalidades que te permiten crear un videojuego rápidamente. Se basa en una etiqueta <canvas>, que mediante Javascript y el uso de diferentes API, WebGL u otras tecnologías, permiten dibujar, animar y controlar el contenido del juego.

Al estar basado en tecnologías webs, Phaser es ideal para crear juegos que quieres publicar en una web, así como empaquetarlo para distribuirlo en dispositivos móviles o sistemas de escritorio.

Requisitos

Para poder comenzar a desarrollar un videojuego con Phaser, te recomiendo varias cosas:

• 1️⃣ Un navegador web. Por ejemplo, Chrome o Firefox.
• 2️⃣ Si usas Windows, tener instalado WSL para trabajar en una terminal Linux en Windows.
• 3️⃣ NodeJS instalado, ya que usaremos npm. Tutorial recomendado: Instalar NodeJS con PNPM.
• 4️⃣ Vite, vamos a utilizar este automatizador para que sea más cómodo trabajar con Phaser.
• 5️⃣ Visual Studio Code o cualquier otro editor de texto.

En el caso de NodeJS, recuerda que lo ideal es tener una versión actualizada, no muy antigua, ya que de lo contrario podría darte problemas.

Salvo el navegador, ninguna de estas cosas es obligatoria 100% para desarrollar con Phaser. En el siguiente artículo, veremos como utilizar Phaser mediante CDN sin ninguna herramienta adicional. Sólo un index.html y un index.js.

Sin embargo, usar Phaser sin CDN solo sirve para juegos muy pequeños o ejemplos de aprendizaje (porque son más sencillos), pero con el tiempo se volverán liosos y dificiles de programar. Mi recomendación personal para que la experiencia de desarrollo sea agradable, es tomarse un tiempo para preparar y configurar todo lo que veremos en el resto de artículos. Si aún así, prefieres saltarte estos pasos, puedes clonar el repositorio oficial phaserjs/template-vite con lo estrictamente necesario para empezar.

Instalación de mkweb

En el resto de este tutorial vamos a ver como instalar mkweb, un comando que he creado y utilizo en mis directos de Twitch para crearnos la estructura del proyecto y preinstalarnos algunas herramientas útiles. Sirve tanto para Phaser, como para crear proyectos webs sencillos y empezarlos desde cero.

Entre otras cosas, incorpora lo siguiente:

• Linter de Javascript preinstalado y configurado.
• ViteJS y servidor de desarrollo preinstalado y configurado.
• Sistema de despliegue en GitHub Pages preinstalado y configurado.

Para instalar mkweb, simplemente abre una terminal de Linux o WSL y ejecuta los siguientes comandos:

$ apt install curl
$ sudo curl -s https://manz.dev/download/mkweb -o /usr/local/bin/mkweb
$ sudo chmod ugo+rx /usr/local/bin/mkweb

La primera linea instala el comando curl si no lo tienes instalado (necesario para la instalación de mkweb). El segundo comando instala mkweb para que puedas utilizarlo. El tercer comando le da permisos para que puedas ejecutarlo para crear proyectos.

Una vez hechos estos pasos, ahora deberíamos tener instalado mkweb. Para comprobarlo, ejecuta el siguiente comando:

$ mkweb --version
0.3.16

Si está todo correcto, debería devolverte la versión instalada de mkweb.

Si aún así tienes dudas, o prefieres ver una guía de uso de mkweb de forma visual, puedes echar un vistazo a este video donde explico como instalar mkweb y utilizarlo paso a paso. Puede parecer algo complejo si lo estás haciendo por primera vez, pero sin duda merecerá la pena ya que nos ahorrará mucho trabajo más adelante:

Crear proyecto

Si cumplimos los requisitos anteriores y hemos instalado mkweb, vamos a comenzar a crear el proyecto. Simplemente abrimos nuestra terminal y escribimos el siguiente comando, donde juego-phaser es el nombre de la carpeta de nuestro videojuego:

$ mkweb juego-phaser --phaser
[1/3] Instalando vite...
[2/3] Creando estructura de carpetas...
[3/3] Preparando dependencias...

No olvides añadir --phaser después de la carpeta para que añada la librería Phaser. En caso contrario, simplemente tendrás que ejecutar también npm install phaser. Una vez terminamos este proceso, que no debería tardar demasiado, vamos a acceder a nuestra carpeta juego-phaser recién creada y ejecutaremos los siguientes comandos:

$ cd juego-phaser
$ npm install
$ code .
$ npm run dev

Explicamos los comandos:

• Con npm install instalamos con npm todo lo necesario para trabajar
• Con code . abrimos nuestro editor Visual Studio Code
• Con npm run dev levantamos el servidor de desarrollo, para ver cambios en vivo al guardar cambios

Al levantar nuestro servidor de desarrollo nos aparecerá el siguiente texto en nuestra terminal:

VITE v5.3.3  ready in 118 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h + enter to show help

Si pulsamos CTRL y hacemos click en http://localhost:5173/, (o lo abrimos en una pestaña del navegador), deberíamos ver una página vacía por defecto. Ya lo tenemos todo listo para comenzar a programar. Esta es la pantalla donde aparecerá nuestro juego a medida que vayamos construyéndolo.