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