Czas da─ç naszej grze jaki┼ø cel. Zrzu─çmy wi─Öc troch─Ö b┼éyszcz─àcych gwiazdek na scen─Ö i pozw├│lmy graczowi je pozbiera─ç. Aby to osi─àgn─à─ç stw├│rzmy now─à┬ágrup─Ö zwan─à┬á'stars' i dodajmy do niej elementy. W funkcji 'create' dopiszmy nast─Öpuj─àcy kod (mo┼╝esz to zobaczy─ç w pliku 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));

});

Proces ten jest łudząco podobny do tworzenia platform. Ponieważ jednak chcemy żeby gwiazdki się poruszały i odbijały nadamy im fizykę dynamiczną zamiast statycznej.

Grupy mog─à przyjmowa─ç jako parametr obiekty z konfiguracj─à ┼╝eby przy┼øpieszy─ç ich deklarowanie. W tym przypadku ustawienia sk┼éadaj─à si─Ö z trzech cz─Ö┼øci: pierwsza ustawia klucz na obrazek 'star'. Oznacza to, ┼╝e ka┼╝dy element potomny tej grupy b─Ödzie mia┼é w┼éa┼ønie taki sprite ustawiony standardowo. P├│┼║niej ustawiamy warto┼ø─ç 'repeat' (mno┼╝nik) na 11. Poniewa┼╝ grupa zawiera jeden element od pocz─àtku stworzymy w ten spos├│b ┼é─àcznie 12 gwiazdek.

Ostatnia cz─Ö┼ø─ç┬áto setXY - ustawia ona pozycj─Ö 12 element├│w potomnych, kt├│re grupa tworzy. Ka┼╝dy element potomny b─Ödzie umiejscawiany pocz─àwszy od x: 12, y: 0 z krokiem w osi x wynosz─àcym 70. Oznacza to, ┼╝e pierwszy element otrzyma wsp├│┼érz─Ödne 12 x 0, drugi natomiast b─Ödzie przesuni─Öty o 70 pikseli czyli znajdzie si─Ö w pozycji 82 x 0, trzeci otrzyma koordynaty 152 x 0 itd. Warto┼ø─ç 'step' (krok) jest przydatna przy pocz─àtkowym umiejscawianiu element├│w grupy. Warto┼ø─ç 70 w tym przypadku zosta┼éa wybrana dlatego, ┼╝e gwiazki rozdysponuj─à si─Ö idealnie na szeroko┼øci ca┼éego ekranu.

Kolejna cz─Ö┼øc kodu iteruje przez wszystkie elementy potomne grupy i nadaje im warto┼ø─ç 'bounce' w osi Y losowan─à z zakresu 0.4 do 0.8. Warto┼ø─ç 'bounce' mo┼╝e wynosi─ç 0 (co oznacza brak odbijania) do 1 (pe┼éne odbijanie). Poniewa┼╝ gwiazdki stworzyli┼ømy w punkcie 0 na osi y, grawitacja ┼øci─àgnie je w d├│┼é i odbij─à si─Ö w ko┼äcu od platform poni┼╝ej. Warto┼ø─ç 'bounce' (odbicia) sprawi, ┼╝e losowo b─Öda si─Ö odbija─ç a┼╝ do ca┼ékowitego wyhamowania.

Je┼╝eli uruchomiliby┼ømy ten kod w obecnym stanie, wszystkie gwiazdki spadn─à w do┼é i wylec─à poza obszar gry. ┼╗eby je przed tym powstrzyma─ç musimy doda─ç jeszcze obs┼éug─Ö ich kolizji z platformami. Stworzymy do tego celu kolejny obiekt typu Collider:

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

Opr├│cz tego sprawdzimy czy gwiazdki nie nachodz─à na gracza:

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

Ten fragment mówi Phaserowi żeby sprawdzał nachodzenie pomiędzy graczem a grupą gwiazdek. Jeżeli dojdzie do tego zdarzenia, dwa nachodzące na siebie obiekty zostaną przekazane do funkcji 'collectStar:

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

To co zachodzi w tej funkcji jest bardzo proste do zrozumienia. Usuwamy dla tej konkretnej dotkni─Ötej gwiazdki cia┼éo fizyczne, czynimy j─à nieaktywn─à i niewidoczn─à - co usuwa j─à z widoku gry. Uruchamiaj─àc to co do tej pory stworzyli┼ømy uzyskamy prost─à gr─Ö, w kt├│rej gracz mo┼╝e skaka─ç po platformach, odbija─ç si─Ö od dnich i zbiera─ç gwiazdki, kt├│re spadaj─à z nieba. Ca┼ékiem nie┼║le jak na, mam nadziej─Ö, kilka z grubsza ┼éatwych do zrozumienia linijek kodu :)

image