Existen algunas herramientas que necesitamos instalar en nuestro sistema antes de comenzar a desarrollar juegos con Phaser. En este tutorial nos aseguraremos de que estamos listos para iniciar y contemos con todo lo necesario.

Servidor web

En primero lugar necesitamos un servidor web, esto es necesario porque más adelante vamos a cargar los assets de manera dinámica, imágenes, audio y fuentes. Es por esta razón que necesitamos un servidor que nos permita acceder a estos archivos en nuestro sistema, de lo contrarío el navegador no tiene acceso por cuestión de seguridad.

Personalmente me agrada utilizar NGinx porque es muy sencillo de instalar y configurar, es muy rápido, cuenta con opciones avanzadas, de hecho, este mismo sitio es servido por un NGinx. Pero existen muchos otros, como el Apache, Jetty, Puma y la lista sigue.

Ya he creado un tutorial de como instalar y configurar el NGinx sobre Windows y Mac OS, revísalo en caso de ser necesario, si ya cuentas con algún servidor web instalado asegúrate de poner el código fuente de este curso en el webroot de tu servidor.

Navegador moderno

Esto es algo obvio, pero importante aclararlo. En este curso estaré usando Google Chrome, esto porque las herramientas de desarrollo son muy fáciles de usar y útiles a la hora de buscar errores o problemas.

GIT (opcional)

Usar un control de versiones siempre es buena idea, revisa el curso de introducción a GIT en caso de no estar familiarizado con esta herramienta. Esta herramienta es opcional pero muy recomendada, ya que la usaremos para descargar la librería aunque veremos un par de métodos alternativos.

Bower (opcional)

Esta herramienta nos permite instalar paquetes y dependencias de una manera extremadamente sencilla, veremos como instalar Phaser usando Bower. Ya he escrito un tutorial sobre como instalar e iniciarte con Bower, revísalo de ser necesario.

Descargar Phaser

Si decidimos no instalar GIT ni Bower tenemos que descargar el archivo ZIP con la última versión disponible. Phaser es un proyecto Open Source y lo podemos encontrar en GitHub. Para descargarlo damos click sobre el botón Download Zip.

Descargar Phaser

Esto descargará la versión 2.1.3 que actualmente se encuentra en el branch Master del repositorio, si quisieras descargar otra versión asegúrate de seleccionar el tag correcto.

Es necesario descomprimir el archivo ZIP que descargamos dentro del webroot de nuestro servidor web, esto nos permitirá ejecutar los ejemplos que vienen incluidos.

Descargar Phaser con GIT

Una de las ventajas de usar GIT es que podremos estar descargando las nuevas versiones muy fácilmente, GIT se encargará de manejar todo automáticamente, también podríamos hacer aportaciones y ayudar al desarrollo de esta librería.

Para descargar el repositorio ejecutamos el siguiente comando en la terminal.

$ git clone git@github.com:photonstorm/phaser.git

Es recomendable hacer esto dentro del webroot  del servidor que estamos usando, esto nos permitirá ejecutar los ejemplos que vienen en el repositorio.

Descargar Phaser con Bower

Como he mencionado antes Bower es una buena alternativa para manejar dependencias y versiones, para utilizar esta herramienta necesitamos crear un folder donde estará nuestro proyecto, en este caso le llamaremos phaser-course, es importante que este folder esté en el webroot de nuestro servidor.

Lo siguiente es inicializar nuestro proyecto con Bower, dentro del folder que creamos ejecutamos el siguiente comando.

$ bower init

Bower nos hará algunas preguntas, podemos dejar las opciones por default. Una vez que tenemos nuestro proyecto inicializado vamos a descargar Phaser con el siguiente comando.

$ bower install phaser -S

Con eso se iniciará la descarga y además se agregarán las dependencias al archivo bower.json, permitiéndonos llevar un registro de todas aquellas librerías que usaremos en este proyecto.

Primera prueba

Vamos a realizar una primera prueba con Phaser, por el momento solo crearemos el canvas que contendrá nuestro juego, no voy a detenerme a explicar los conceptos en este primer ejemplo ya que solo queremos ver que hemos descargado Phaser de manera adecuada y que funcione correctamente.

Vamos a crear el folder 01-installation, dentro de este folder crearemos un archivo llamado index.html con el siguiente código.

<!doctype html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>Installation</title>
        <script src="../bower_components/phaser/build/phaser.js"></script>
    </head>
    <body>

    <script type="text/javascript">

    window.onload = function() {

        var game = new Phaser.Game(800, 600, Phaser.AUTO, '', { create: create });

        function create () {

            console.log('Installed!!');

        }

    };

    </script>

    </body>
</html>

Como se puede observar estamos importando la librería de Phaser, en este caso desde el folder que Bower nos creo. Si seguiste los otros dos métodos alternativos de descarga, solamente tienes que asegurarte que la ruta al archivo phaser.js esté correcta. 

Esto es todo lo necesario para instalar Phaser, no necesitamos incluir ningún otro archivo adicional. Todo lo que necesitamos está dentro de este archivo. Por el momento no entraremos a detalle sobre las líneas de código en JavaScript, eso lo veremos más adelante.

Si abrimos ese documento html en el navegador deberíamos ver algo como la siguiente imagen.

Instalación de Phaser

Por el momento todo lo que deberíamos ver es un rectángulo negro, aquí es donde aparecerá nuestro juego más adelante, por el momento esta vacío pero pronto estará mucho más interesante. También deberías ver en la consola el mensaje que imprimimos así como un mensaje con la versión de Phaser.

Ya estamos listos para iniciar a codificar nuestro juego, en este tutorial hemos descargado Phaser e instalado lo necesario para introducirnos en este divertido mundo del desarrollo de videojuegos con HTML5.

En el siguiente tema veremos el concepto de estados (state) que nos servirá para definir diferentes escenas en nuestro juego, por ejemplo la precarga, el menu principal, el juego principal, los scores, etc.

Te gustaría recibir más tutoriales como este en tu correo?

Este tutorial pertenece al curso Videojuegos en HTML5, te recomiendo revises el resto de los tutoriales ya que están en secuencia de menor a mayor complejidad.

Si deseas recibir más tutoriales como este en tu correo te recomiendo registrarte al curso, si ya eres miembro solo identifícate y registrate al curso, si no eres miembro te puedes registrar gratuitamente!