Phaser.js #3 – Criando jogo Parte 2

Olá pessoal! Dando sequência ao tutorial de Phaser.js na prática, hoje iremos abordar a inserção de assets no nosso jogo. Recomendo fortemente uma leitura da nossa Parte 1 para seguirmos adiante.

Continuando…

Bom, já temos o nosso céu criado. Podemos usar o setOrigin para alterar a exibição da imagem. Veja como fazer isso:

this.add.image(0, 0, 'sky').setOrigin(0, 0);

Isso redefiniria a posição do nosso desenho (céu) no canto superior esquerdo da tela. No Phaser 3 existem as propriedades originX e originY.

A ordem de exibição dos objetos do jogo corresponde à ordem que você os cria. Agora, iremos colocar um sprite de estrelas que ficará acima do nosso plano de fundo, ou seja, precisamos garantir que ele seja adicionado depois da imagem do céu.

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

A sua saída deve ser assim:

Se a imagem da estrela for inserida antes, a imagem do céu a encobrirá.

Por baixo dos panos, this.add.image cria um objeto de jogo de imagem e o adiciona a lista de exibição das cenas. Essa lista é onde ficam os objetos do seu jogo. Cuidado para não adicionar as imagens fora da tela. Você não as verá visualmente, mas ainda existirão.

A cena em si não possui tamanho fixo e se estende em todas as direções, mas a câmera controla sua visualização na cena. Agora, criaremos elementos da cena, adicionando uma imagem de fundo e também, algumas plataformas, utilizando a função create:

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

Olhando o código, você deve ter percebido uma chamada this.physics. Estamos utilizando o sistema Arcade Physics do Phaser. Precisamos adicioná-lo ao Game Config para informar ao Phaser. Aqui está a configuração:

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 sua saída deve ficar algo parecido com isso:

Observação:

Comente a inserção da estrela no seu código.

Você pode verificar o seu código olhando o arquivo part4.html.

Ok, já temos um cenário e algumas plataformas. Mas como essas plataformas funcionam?

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

Criamos um grupo de física e atribuímos à variável platforms. Na Arcade Physics existem dois tipos de corpos físicos: Dinâmico e Estático. O corpo dinâmico pode se mover através de aceleração ou velocidade, podendo saltar e colidir com outros objetos. Um corpo estático simplesmente possui posição e tamanho. Quando algo colide com ele, ele não se move. É perfeito para solo e plataformas.

O que é um grupo?

São maneiras de agrupar objetos e controlá-los como uma única unidade. Você pode verificar colisões entre grupos e objetos de jogo. Eles são capazes de criar seus próprios objetos de jogo por meio de funções auxiliares úteis. Em um grupo criado para a física, os filhos automaticamente herdarão as habilidades de física, poupando trabalho.

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

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

Este código cria uma imagem “ground”: um retângulo verde simples, que servirá de plataforma.

Para fazer a plataforma abranger toda a largura do nosso jogo, utilizamos a função setScale(2), que dobrará em x2 o tamanho original. A chamada refreshBody() é necessária pois escalamos um corpo estático, portanto, precisamos fazer alterações na física do jogo.

O processo de criação das outras plataformas é exatamente o mesmo, apenas não precisamos escalar a imagem.

Você pode ler o artigo original em inglês neste link: http://phaser.io/tutorials/making-your-first-phaser-3-game/part2

Está gostando desta sequência? Comente abaixo!