Making your first Phaser 3 game

Por baixo dos panos this.add.image est├í criando um novo Game Object de Imagem adicionando-o ├á lista de exibi├º├úo atual da Scene. Esta lista ├® onde todos os seus Game Objects vivem. Voc├¬ poderia posicionar a imagem em qualquer lugar e o Phaser n├úo se importaria. Claro, se estiver fora da regi├úo 0x0 a 800x600, voc├¬ n├úo o ver├í, porque estar├í "fora da tela", mas ainda existir├í dentro da cena.

A cena em si n├úo tem tamanho fixo e se estende infinitamente em todas as dire├º├Áes. O sistema de c├ómera controla sua visualiza├º├úo e voc├¬ pode mover e aplicar zoom na c├ómera que est├í ativa conforme necess├írio. Voc├¬ tamb├®m pode criar novas c├ómeras para outras visualiza├º├Áes da cena. Este t├│pico est├í al├®m do escopo deste tutorial, basta dizer que o sistema de c├ómeras no Phaser 3 ├® significativamente mais poderoso do que na vers├úo 2. Coisas que n├úo eram poss├¡veis, agora s├úo.

Por ora, vamos construir a Scene adicionando uma imagem de fundo e algumas plataformas. Aqui est├í a fun├º├úo create atualizada:

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

Em uma r├ípida olhada pelo c├│digo, voc├¬ ver├í uma chamada para this.physics. Isso significa que estamos usando o sistema Arcade Physics, mas antes que possamos fazer isso, precisamos adicion├í-lo ao nosso Game Config para informar ao Phaser que nosso jogo exige da f├¡sica Arcade. Ent├úo, vamos atualizar-lo para incluir suporte ├á f├¡sica. Aqui est├í a configura├º├úo do jogo 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
    }
};

A nova adi├º├úo ├® a propriedade physics. Com este c├│digo no lugar, o qual voc├¬ pode encontrar no arquivo zip do tutorial como part4.html, se voc├¬ execut├í-lo voc├¬ ver├í uma cena muito mais parecida com um jogo:

Temos um plano de fundo e algumas plataformas, mas como funcionam essas plataformas?