E aí pessoal, dando sequência ao nosso tutorial de Phaser.js, iremos dar um propósito ao nosso jogo agora.
Já temos as plataformas, já temos a gravidade implantada, e já temos o nosso player com seus comandos especificados (andar para as laterais e pular para as plataformas). Agora, iremos inserir algumas estrelas no nosso cenário, para que o nosso player as colete. Para isso, criaremos um grupo chamado stars e o preencheremos dentro de nossa função create():
stars = this.physics.add.group({
key: 'star',
repeat: 11,
setXY: { x: 12, y: 0, stepX: 70 }
});
stars.children.iterate(function (child) {
child.setBounceY(Phaser.Math.FloatBetween(0.4, 0.8));
});
Este é um processo muito parecido como quando criamos nosso grupo de plataformas, mas como as estrelas precisam se mover e saltar, elas são um grupo dinâmico de física.
Ok, mas o que faremos agora?
Bom, primeiramente precisamos definir a chave de textura (key) para a nossa imagem. Mas o que isso significa?
Significa que todos os objetos filhos criados como resultado do objeto de configuração estrela receberão as texturas de estrela por padrão.
Ok, já criamos uma estrela, e agora? Agora precisamos definir o repeat. O repeat é o valor de repetição das estrelas. Precisaremos de 12 estrelas saltitando pelo nosso mapa, então precisamos repeti-la 11 vezes.
Feito isso, usaremos o setXY para definir a posição das 12 estrelas criadas pelo nosso grupo star. cada estrela (child) será colocada começando em x:12 e y:0, e com um passo x de 70.
Mas o que isso significa?
Isso significa que a primeira estrela será posicionada em 12 x 0, a segunda terá 70 pixels em 82 x 0, o terceiro em 172 x 0, aumentando 70 pixels proporcionalmente para cada uma das 12 estrelas. Com o valor de 70 pixels, as estrelas vão se espalhar perfeitamente espaçadas na nossa viewport.
Mas e o que a última parte deste código faz?
Bem, esta parte do código itera entre todas as estrelas criadas pelo grupo e fornece a elas um valor aleatório entre 0,4 e 0,8 no eixo Y. O intervalo de rejeição é entre 0 e 1, sendo 0 sem rejeição e 1, rejeição completa. Como as estrelas iniciam sem gravidade, elas são puxadas para o solo, até que ocorra colisão com alguma plataforma.
Beleza, mas cadê o código que implementa a colisão das estrelas com o solo? Pois sem essa física de colisão, as estrelas passariam reto pelo solo e plataformas! Para isso, adicionaremos o seguinte trecho de código:
this.physics.add.collider(stars, platforms);
E também, precisaremos verificar se o player se sobrepõe a alguma estrela ou não:
this.physics.add.overlap(player, stars, collectStar, null, this);
E como o player vai coletar as estrelas? Criaremos a função collectStar! Segue o código dela:
function collectStar (player, star)
{
star.disableBody(true, true);
}
Pronto, agora já temos um personagem que pode correr, saltar e coletar estrelas!
A sua saída deve ser algo parecido com isso:
Legal, né?
Você pode conferir o conteúdo original em inglês em: https://phaser.io/tutorials/making-your-first-phaser-3-game/part8
Está gostando dessa sequência de artigos? Comente abaixo!