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?