Making your first Phaser 3 game

Vamos carregar assets que precisamos para o nosso jogo. Voc├¬ faz isso fazendo chamadas ao Phaser Loader dentro de uma fun├º├úo da Scene chamada preload. O Phaser procurar├í automaticamente por essa fun├º├úo quando for iniciado e carregar├í qualquer coisa definida nela.

Atualmente, a fun├º├úo preload est├í vazia. Altere para:

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 }
    );
}

Isto ir├í carregar 5 assets: 4 imagens e uma sprite sheet. Pode parecer ├│bvio para alguns de voc├¬s, mas eu gostaria de mostrar o primeiro par├ómetro, tamb├®m conhecido como chave do asset (ou seja, 'sky', 'bomb'). Essa string ├® um link para o asset carregado e ├® o que voc├¬ usar├í no seu c├│digo para criar Game Objects. Voc├¬ est├í livre para usar qualquer string JavaScript v├ílida como chave.

Exibir uma imagem

Para exibir uma das imagens que carregamos, coloque o seguinte c├│digo dentro da fun├º├úo create:

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

Voc├¬ pode encontrar isso em part3.html. Se voc├¬ abri-lo em um navegador, voc├¬ deve ver uma tela de jogo com um plano de fundo de c├®u azul cobrindo-o:

Os valores 400 e 300 s├úo as coordenadas x e y da imagem. Por que 400 e 300? ├ë porque no Phaser 3 todos os objetos do jogo s├úo posicionados com base em seu centro por padr├úo. A imagem de fundo tem 800 x 600 pixels de tamanho, por isso, se f├┤ssemos exibir ela centralizada em 0 x 0, ver├¡amos apenas o canto inferior direito dela. Se o exibirmos em 400 x 300 voc├¬ ver├í ela toda.

Dica: Voc├¬ pode usar setOrigin para mudar isso. Por exemplo, o c├│digo: this.add.image(0, 0, 'sky').setOrigin(0, 0) ir├í redefinir a posi├º├úo de desenho da imagem para o canto superior esquerdo. No Phaser 2, isso foi conseguido atrav├®s da propriedade anchor, mas no Phaser 3 s├úo as propriedades originX e originY.

A ordem em que os objetos do jogo s├úo exibidos corresponde ├á ordem em que voc├¬ os criou. Ent├úo, se voc├¬ deseja colocar um sprite de uma estrela acima do fundo, voc├¬ precisa garantir que ele foi adicionado como uma segunda imagem, ap├│s a imagem do c├®u:

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

Se voc├¬ colocar a imagem estrela primeiro, ela ser├í encoberta pela imagem do c├®u.