C├│mo crear tu primer juego con Phaser

Vamos a cargar los recursos que necesitamos para nuestro juego. Esto se realiza dentro de una funci├│n de escena llamada preload. Phaser buscar├í autom├íticamente esta funci├│n cuando se inicie y cargar├í cualquier cosa definida en ella.

Actualmente la funci├│n preload est├í vac├¡a. C├ímbiela a:

function preload ()
{
    this.load.image('sky', 'assets/sky.png');
    this.load.image('ground', 'assets/platform.png');
    this.load.image('star', 'assets/star.png');
    this.load.image('bomb', 'assets/bomb.png');
    this.load.spritesheet('dude', 
        'assets/dude.png',
        { frameWidth: 32, frameHeight: 48 }
    );
}

Esto cargar├í 5 recursos: 4 im├ígenes y un grupo de im├ígenes (spritesheet). Aunque puede parecer evidente, me gustar├¡a centrarme en el primer par├ímetro, tambi├®n conocido como la clave del recurso ('cielo', 'bomba'). Esta cadena es un identificador al recurso y es lo que utilizar├í en su c├│digo cuando cree los elementos en el juego. Se puede usar cualquier cadena de texto v├ílida en JavaScript como clave.

Mostrar una imagen

Para mostrar una imagen tendremos que poner el siguiente c├│digo dentro de la funci├│n create:

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

Esta l├¡nea se puede encontrar en el archivo part3.html. Si se carga esta p├ígina en un navegador se debe mostrar la pantalla del juego con un cielo azul de fondo:

Los valores 400 y 300 son las coordenadas X e Y de la imagen. ┬┐Por qu├® 400 y 300? Esto se debe a que en Phaser 3 todos los elementos del juego est├ín posicionados por defecto en base a su centro. La imagen de fondo tiene un tama├▒o de 800 x 600 p├¡xels, por lo que si se muestra centrada en 0 x 0 solo se ver├¡a su esquina inferior derecha. Si se posiciona en 400 x 300 se ve al completo.

Sugerencia: Se puede usar setOrigin para cambiar esto. Por ejemplo, el c├│digo: this.add.image(0, 0, 'sky').SetOrigin(0, 0) posicionar├¡a la imagen en la esquina superior izquierda. En Phaser 2 esto se logr├│ a trav├®s de la propiedad anchor pero en Phaser 3 se usan las propiedades originX y originY.

El orden en el que se muestran los objetos del juego coincide con el orden en que se crean. Por lo tanto, si desea colocar una estrella sobre el fondo deber├í asegurarse de que se haya a├▒adido en segundo lugar, despu├®s de la imagen del cielo:

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

Si se cargara la imagen star en primer lugar quedar├¡a tapada por la imagen del cielo.