É hora de dar ao nosso joguinho um propósito. Vamos jogar algumas estrelas na cena e permitir que o jogador as colete. Para conseguir isso, criaremos um novo grupo chamado 'stars' e o preencheremos. Em nossa função create, adicionamos o seguinte código (isto poderá ser visto em part8.html):

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 processo ├® semelhante a quando criamos o grupo de plataformas. Como precisamos que as estrelas se movam e saltem, criamos um grupo din├ómico de f├¡sica em vez de um est├ítico.

Grupos s├úo capazes de receber objetos de configura├º├úo para ajudar em sua inificaliza├º├úo. Neste caso, o objeto de configura├º├úo do grupo tem 3 partes: Primeiro, ele define a key de textura para ser a imagem de estrela. Isso faz com que filhos criados receber├úo essa textura por padr├úo. Em seguida, ele define o valor da propriedade repeat como 11. Pois, como ele cria um filho automaticamente, repetindo 11 vezes significa que obteremos 12 no total, o que ├® exatamente o que precisamos para o nosso jogo.

A parte final ├® setXY - isto ├® usado para definir a posi├º├úo dos 12 filhos que o Grupo cria. Cada filho ser├í posicionado come├ºando em x: 12, y: 0 aumentando x em 70 a cada vez. Isso significa que o primeiro filho ser├í posicionado em 12 x 0, o segundo ser├í 70 pixels a diante, em 82 x 0, o terceiro est├í em 152 x 0 e assim por diante. A propriedade "step" ├® uma maneira realmente ├║til de espa├ºar um grupo de filhos durante a cria├º├úo. foi escolhido o n├║mero 70 porque todos os 12 filhos estar├úo perfeitamente espa├ºadas em toda a tela.

A pr├│xima parte do c├│digo itera por todos os filhos do grupo e fornece um valor de bounce Y aleat├│rio entre 0,4 e 0,8. O intervalo de bounce ├® entre 0, sem ressalto, e 1, um ressalto total. Como as estrelas s├úo todas geradas em y 0 a gravidade ir├í puxar elas para baixo at├® colidirem com as plataformas ou com o solo. O valor de bounce significa que eles retornar├úo aleatoriamente at├® que finalmente se acomodem.

Se fôssemos rodar o código como está agora, as estrelas iriam cair para baixo do jogo e sumiriam de vista. Para parar, precisamos checar sua colisão contra as plataformas. Podemos usar outro objeto Collider para fazer isso:

this.physics.add.collider(stars, platforms);

Al├®m de fazer isso, tamb├®m verificaremos se o jogador se sobrep├Áe a uma estrela ou n├úo:

this.physics.add.overlap(player, stars, collectStar, null, this);

Isso diz ao Phaser para verificar se há sobreposição entre o player e qualquer estrela no grupo de estrelas. Se encontradas, elas são passadas para a função 'collectStar':

function collectStar (player, star)
{
    star.disableBody(true, true);
}

Bem simples, a estrela tem sua física desabilitada e seu Game Object pai fica inativo e invisível, removendo sua exibição. Rodando o jogo agora nos dá um player que pode correr, pular, saltar das plataformas e coletar estrelas que caem de cima. Nada mal para algumas linhas de código, na maior parte, espero que, bem legível :)

image