C├│mo crear tu primer juego con Phaser

Internamente, this.add.image est├í creando un nuevo elemento del juego de tipo Imagen y a├▒adi├®ndolo a la lista de objetos de la escena. Esta lista es donde se encuentran todos los elementos del juego. Podr├¡a colocar la imagen en cualquier lugar. Por supuesto, si est├í fuera de la regi├│n de 0x0 a 800x600, entonces no se ver├í, porque estar├í "fuera de pantalla", pero seguir├í existiendo dentro de la escena.

La escena en s├¡ no tiene un tama├▒o fijo y se extiende infinitamente en todas las direcciones. El sistema de c├ímaras controla la vista de la escena y permite mover la c├ímara activa y hacer zoom seg├║n sea necesario. Tambi├®n se pueden crear nuevas c├ímaras para tener otras vistas en la escena. Este tema queda fuera del alcance de este tutorial, por lo que s├│lo es necesario indicar que el sistema de c├ímaras en Phaser 3 es significativamente m├ís potente que en la versi├│n 2. Las cosas que antes no eran posibles ahora lo son.

Por ahora, construyamos la escena agregando una imagen de fondo y algunas plataformas. Aqu├¡ est├í la funci├│n create actualizada:

var platforms;

function create ()
{
    this.add.image(400, 300, 'sky');

    platforms = this.physics.add.staticGroup();

    platforms.create(400, 568, 'ground').setScale(2).refreshBody();

    platforms.create(600, 400, 'ground');
    platforms.create(50, 250, 'ground');
    platforms.create(750, 220, 'ground');
}

Si observa el c├│digo, ver├í una llamada a this.physics. Esto significa que estamos usando el sistema de f├¡sicas Arcade. Antes de que podamos hacer esto debemos agregarlo a la configuraci├│n para que Phaser sepa que nuestro juego lo requiere. As├¡ que vamos a actualizarlo para incluir soporte de f├¡sicas. Aqu├¡ est├í la configuraci├│n del juego revisada:

var config = {
    type: Phaser.AUTO,
    width: 800,
    height: 600,
    physics: {
        default: 'arcade',
        arcade: {
            gravity: { y: 300 },
            debug: false
        }
    },
    scene: {
        preload: preload,
        create: create,
        update: update
    }
};

Ver├í que se ha a├▒adido la propiedad physics. Al ejecutar el juego con esta configuraci├│n, que se encuentra en el archivo part4.html del tutorial, se deber├¡a ver una escena mucho m├ís parecida a la de un juego:

Tenemos un fondo y algunas plataformas, pero ┬┐c├│mo funcionan exactamente esas plataformas?