Desarrollo de videojuegos con Phaser

I - Primeros pasos con Phaser

Phaser es un framework de desarrollo de videojuegos en JavaScript. Estos videojuegos se desarrollan empleando tecnologías web (HTML, CSS y JavaScript) y son multiplataforma, ya que pueden ejecutarse tanto en navegadores convencionales como en otras plataformas (iOS, Android) a través de determinados mecanismos de exportación.

Entre sus principales características, podemos destacar las siguientes:

• Utiliza la librería WebGL para renderizar los gráficos, pero también podemos basarnos en los canvas de HTML5 para renderizarlos (especialmente indicado para aquellos dispositivos que no soporten WebGL)
• Incluye implementaciones básicas de algunos comportamientos físicos y maneo de sprites, tales como rotaciones, colisiones o gravedad.
• Dispone también de otras características avanzadas, como sistemas de partículas, cámara, etc.

1. Descarga e instalación

Podemos descargar Phaser de su web oficial, en la sección de descargas. Podemos descargar la librería en distintos formatos:

• Descargar el repositorio completo de GitHub (especialmente útil si queremos consultar la referencia de funciones que incorpora). También podemos descargar una versión comprimida en formato zip o tar.gz.
• Descargar directamente el archivo .js o .min.js listo para incluir en nuestros proyectos.

2. Eligiendo un IDE

Existen multitud de IDEs que podemos emplear para desarrollar videojuegos en Phaser, ya que, a priori, dicho framework no exige ningún requisito en particular. Así, podemos utilizar editores más o menos sencillos como Notepad++, Geany o incluso el mismo bloc de notas, y también otros que nos permitan estructurar y gestionar mejor el conjunto de archivos y carpetas del proyecto.

Desde este último punto de vista, en este documento proponemos utilizar Visual Studio Code como editor de referencia, aunque existen otras alternativas similares como Brackets, Sublime Text o Atom, entre otros. Aquí tienes unos pasos sobre cómo descargar e instalar Visual Studio Code, si no estás familiarizado aún con este IDE.

3. Uso de un servidor web

Aunque pueda parecer extraño, para hacer las pruebas en local de nuestros juegos necesitaremos tener activo un servidor web donde ejecutarlos. Esto es así para que el navegador otorgue los permisos correctos de acceso a los diferentes recursos del juego (imágenes, archivos de audio…), ya que de lo contrario es posible que algunos de estos recursos no se muestren o se reproduzcan.

Existe gran variedad de opciones para elegir aquí, como por ejemplo:

• XAMPP, una herramienta que incluye un servidor web Apache junto con el lenguaje PHP y una base de datos MySQL (estas últimas dos opciones no son necesarias para Phaser). Podemos descargarlo e instalarlo en múltiples plataformas desde su web oficial. Una vez instalado, ponemos en marcha el manager de XAMPP y ubicamos nuestro juego en la carpeta correspondiente (típicamente cualquier carpeta dentro de la subcarpeta htdocs de XAMPP).
• Web server for Chrome, una extensión de Google Chrome que lanza un pequeño servidor. A través de esta utilidad, podemos elegir qué carpeta queremos poner en marcha, y accedemos a ella bajo dicho servidor. La podemos descargar desde aquí y, al ponerla en marcha, elegimos la carpeta y listo.

Para facilitar en todo momento la integración entre el desarrollo y las pruebas de nuestro videojuego, en este curso proponemos utilizar la extensión Live Server de Visual Studio Code. Podéis consultar más información en la web del marketplace de VS Code.

Una vez instalada la extensión, para ejecutar cualquier página HTML en el servidor basta con abrirla en el editor VS Code, hacer clic derecho sobre ella y elegir la opción Open with Live Server en el menú contextual que aparecerá.

Se abrirá directamente nuestro navegador por defecto, accediendo a la página con la URL por defecto del servidor. Para detener el servidor después, con el mismo clic derecho podemos elegir la opción inmediatamente inferior (Stop Live Server).

4. Una primera prueba sencilla

Vamos a crear un primer ejemplo de uso de Phaser, que no se va a poder llamar juego propiamente dicho porque no vamos a tener, de momento, nada con lo que interactuar. Es una simple primera toma de contacto para ver cómo incorporar Phaser al proyecto y definir los parámetros de configuración principales.

Creamos una carpeta llamada ejemplo00, con la siguiente estructura:

• Subcarpeta js con:
  • La librería phaser.min.js que puedes descargar de la web de descargas oficial.
  • Archivo game.js donde rellenaremos el código de nuestro videojuego
• Página principal index.html en la raíz del proyecto.

El contenido del archivo index.html puede ser algo así:

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Ejemplo 00</title>
    <script src="js/phaser.min.js"></script>
    <script src="js/game.js"></script>
</head>
<body>
    
</body>
</html>

Algunos comentarios sobre este código inicial:

• En la cabecera (head) cargamos la librería Phaser
• En el contenido de la página se dibujará el contenido del videojuego

En cuanto al archivo js/game.js, definiremos un primer contenido como este: