image

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.