Cómo crear tu primer juego con Phaser

Bienvenido a nuestro primer tutorial Cómo crear un juego con Phaser 3. Aprenderemos cómo crear un pequeño juego en el que un personaje corre y salta a través de plataformas, recoge estrellas y evita peligros. Mientras se avanza en el desarrollo se explicarán algunas de las principales prestaciones de Phaser.

¿Qué es Phaser?

Phaser es un entorno de programación que tiene como objetivo ayudar a crear juegos de forma rápida en HTML5 y jugar en navegadores. Fue creado específicamente para aprovechar los beneficios de los navegadores modernos, tanto de escritorio como móviles. El único requisito del navegador es el soporte de canvas.

Requirimientos

Descargue este archivo zip que contiene cada paso de este tutorial, el código fuente y los recursos que lo acompañan.

Es necesario tener un conocimiento muy básico de JavaScript.

También es importante revisar la Guía de inicio, donde se muestra cómo descargar Phaser, configurar un entorno de desarrollo local y le dará una idea de la estructura de un proyecto Phaser y sus funciones básicas.

Si ha revisado la Guía de inicio habrá descargado Phaser y tendrá todo configurado y listo para empezar. Descargue los recursos para este tutorial y descomprímalos en una carpeta de su servidor web local.

Abra la página part1.html en el editor de su elección y veamos más de cerca el código. Después de un pequeño HTML que incluye Phaser, la estructura del código se ve así:

var config = {
    type: Phaser.AUTO,
    width: 800,
    height: 600,
    scene: {
        preload: preload,
        create: create,
        update: update
    }
};

var game = new Phaser.Game(config);

function preload ()
{
}

function create ()
{
}

function update ()
{
}

Un juego en Phaser se configura mediante una variable de tipo json. Hay muchas opciones que se pueden colocar en esta variable y, a medida que amplíe su conocimiento sobre Phaser, conocerá más. Pero en este tutorial solo vamos a configurar dónde se muestra el juego, sus dimensiones y una escena predeterminada.

Para iniciar un juego en Phaser sólo es necesario asignar una instancia de un objeto Phaser.Game a una variable local llamada game y pasarle la variable de configuración.

En Phaser 2, el objeto game era necesario en casi todos los sistemas internos y se accedía a menudo desde una variable global. En Phaser 3 ya no es necesario ni útil almacenar la instancia del juego en una variable global.

La propiedad type (tipo) puede ser Phaser.CANVAS, Phaser.WEBGL o Phaser.AUTO. Esta variable indica qué usar para mostrar el juego. El valor recomendado es Phaser.AUTO que intenta utilizar WebGL automáticamente, pero si el navegador o dispositivo no lo admite, usará Canvas. El HTML que añade Phaser se incluirá en el sitio en el que se llamó al script, aunque también se puede especificar un contenedor principal en la configuración del juego.

Las propiedades width (ancho) y height (alto) establecen el tamaño de la pantalla que usará Phaser. En este caso son 800 x 600 píxeles. El juego puede ser del tamaño que se desee, pero esta será la resolución en la que se mostrará el juego.

La propiedad scene (escena) de la variable de configuración se tratará con detalle más adelante en este tutorial.