Usando Phaser con CDN

Como hemos comentado, Phaser se puede utilizar puramente en un navegador, sin necesidad de utilizar NodeJS, npm, linters, etc. Sólo escribiendo un index.html y un index.js. Sin embargo, esta opción sólo la recomiendo para empezar o para ejemplos muy, muy básicos, ya que aunque al principio resulta muy fácil, pero a medida que el juego crece, es más difícil mantener tu código organizado y legible.

No obstante, para ver un ejemplo sencillo de Phaser y entender su funcionamiento principal, es un enfoque ideal, así que vamos a repasarlo un primer ejemplo muy sencillo.

Crear un `index.html`

Vamos a crear un archivo index.html, que es el archivo principal que cargará nuestra web con el juego de Phaser. Si hay algo que desconoces de HTML, puedes revisar LenguajeHTML para aprenderlo:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Juego Phaser</title>
  <script type="module"></script>
</head>
<body>

</body>
</html>

Observa la etiqueta <script>. Hemos indicado un type="module" para que el navegador pueda cargar módulos Javascript a través del import que utilizaremos en breve.

Usando Phaser con un CDN

Aunque podríamos hacerlo a la vieja usanza, y añadir otro <script> con la librería de Phaser, vamos a optar por hacerlo de una forma un poco más moderna, y utilizar el import con una dirección de un CDN (jsdelivr) con la librería de Phaser:

import * as Phaser from "https://cdn.jsdelivr.net/npm/[email protected]/+esm";

Esto irá incluido en la etiqueta <script>, seguido del código de nuestro juego de Phaser. Estamos haciendolo de esta forma para evitar tener que instalar Node, npm y otras herramientas. Pero recuerda que a la larga, jugará en nuestra contra y sólo servirá en casos muy concretos o para los ejercicios iniciales.

Estructura del juego

La explicaremos en profundidad más adelante, pero tener una pequeña idea de como funciona, la estructura básica del juego será la siguiente:

1️⃣ Una clase Screen, que será la escena de nuestro juego, donde ocurren las cosas.
2️⃣ Un método preload(), donde se precargarán los recursos (imágenes, sonidos, etc...)
3️⃣ Un método create(), donde se creará la escena y sus elementos.
4️⃣ Un objeto config, con la configuración (resolución, título, escenas, etc....)
5️⃣ Un objeto game, instancia principal del juego.

class Screen extends Phaser.Scene {
  preload() { /* ... */ }
  create() { /* ... */ }
}

const config = {
  /* ... */
};

const game = new Phaser.Game(config);

El código final que incluiríamos en el <script> sería el siguiente:

Precargamos la imagen phaser.png con el nombre logo
Añadimos la imagen logo en la posición 300x150 y reducimos el tamaño (escala)
Añadimos el texto Mi primer juego de Phaser con ciertas características

import * as Phaser from "https://cdn.jsdelivr.net/npm/[email protected]/+esm";

class Screen extends Phaser.Scene {
  preload() {
    this.load.image("logo", "/phaser/introduccion/primeros-pasos/phaser.png");
  }

  create() {
    this.add.image(300, 150, "logo").setScale(0.5);

    this.add.text(0, 350, "Mi primer juego de Phaser", {
      font: "16px Courier",
      fill: "#ffffff",
      align: "center",
      fixedWidth: 600
    });
  }
}

const config = {
  type: Phaser.AUTO,
  width: 600,
  height: 400,
  autoCenter: Phaser.Scale.Center.CENTER_BOTH,
  scene: [ Screen ],
  title: "Primer juego de Phaser",
  version: "1.0"
};

const game = new Phaser.Game(config);

Aquí lo tenemos. No es un juego propiamente dicho, ya que sólo estamos mostrando una imagen y un texto, pero sin duda, es un primer paso para ir añadiendo funcionalidades y detalles y comprender como crearlo.

Es posible que si estás arrastrando el index.html al navegador, el juego no cargue correctamente y en la consola aparezca un error de CORS. Esto ocurre porque no se pueden utilizar ciertas funcionalidades avanzadas de Javascript si no estás utilizadno un servidor de desarrollo, que sería lo ideal.

Mi recomendación es que hagas algunas pruebas y juegues un poco en Codepen con el código anterior, y si te gusta Phaser, te tomes un tiempo en seguir las instrucciones de instalación de mkweb, comprendas la estructura de carpetas y sigas los primeros pasos con Phaser, utilizando NodeJS, npm y las herramientas que te aconsejo para que sea mucho más fácil y cómodo desarrollar con Phaser.