Phaser.js #6 – Criando jogo Parte 5

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.

Continue lendo “Phaser.js #6 – Criando jogo Parte 5”