Pierwsza gra w Phaserze 3

Aby zamknać nasz projekt musimy dodać do niego jeszcze wrogów. Dołoży to element wyzwania do gry, coś czego do tej pory brakowało.

Idea jest następująca: gdy za pierwszym razem uzbierasz wszystkie gwiazdki uwolni to odbijającą się bombę. Będzie się ona losowo przemieszczała po planszy, jeżeli ją dotkniesz, po prostu zginiesz. Wszystkie gwiazdki się automatycznie odtworzą gdy je wyłapiesz. Scenariusz z bombą również się powtórzy. Gracz będzie musiał uzbierać jak najwięcej punktów i nie zginąć.

Pierwsze czego potrzebujemy to grupa z bombami i dodanie odpowiednich Collider'ów:

bombs = this.physics.add.group();

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

this.physics.add.collider(player, bombs, hitBomb, null, this);

Bomby naturalnie będą spadać z platform i jeżeli gracz ich dotknie wywołamy funkcję zwrotną hitBomb. Wszystko co będzie ona wykonywać to zatrzymanie gry i kolorowanie gracza na czerwono:

function hitBomb (player, bomb)
{
    this.physics.pause();

    player.setTint(0xff0000);

    player.anims.play('turn');

    gameOver = true;
}

Do tej pory wszsytko jasne ale musimy w końcu zrzucić tę bombę. Aby tego dokonać zmodyfikujmy funkcję collectStar:

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

    score += 10;
    scoreText.setText('Score: ' + score);

    if (stars.countActive(true) === 0)
    {
        stars.children.iterate(function (child) {

            child.enableBody(true, child.x, 0, true, true);

        });

        var x = (player.x < 400) ? Phaser.Math.Between(400, 800) : Phaser.Math.Between(0, 400);

        var bomb = bombs.create(x, 16, 'bomb');
        bomb.setBounce(1);
        bomb.setCollideWorldBounds(true);
        bomb.setVelocity(Phaser.Math.Between(-200, 200), 20);

    }
}

Wykorzystamy metodę typową dla grup zwaną countActive. Sprawdzimy za jej pomocą ile jeszcze pozostało gwiazdek w grze. Jeżeli ich już nie ma, wykorzystamy iterację żeby je wszystkie przwyrócić i zresetować ich pozycję. To sprawi, że gwiazdki ponownie spadną z nieba.

W następnym kroku kod stworzy bombę. Najpierw wylosujemy losowy punkt w osi x, zawsze po przeciwnej stronie niż gracz - damy mu w ten sposób szansę na przeżycie. Kiedy bomba zostanie stworzona ustawimy ją na kolidującą ze światem i nadamy jej losową prędkość.

W rezultacie powyższego uzyskamy ładny mały sprite bomby, który losowo będzie się odbijał po ekranie gry. Będzie on na tyle niewielki, że łatwo go ominać. Jeżeli jednak pojawi się ich kilka gra stanie się o wiele trudniejsza!

I oto skończyliśmy pierwszą grę :)

Podsumowanie

Nauczyłeś się jak stworzyć sprite'a z właściwościami fizycznymi, które umożliwiają kontrole jego ruchu i interakcję z innymi obiektami w świecie gry. Możesz rozwinąć ten projekt na wiele sposobów. Dlaczego nie powiększyć obszaru gry i pozwolić kamerze na śledzenie gracza? Może dodasz różnych przeciwników, różne znajdźki albo nawet pasek życia dla gracza?

Żeby pozbawić grę jakiegokolwiek elementu przemocy i nadać jej charakter speed-run możesz zmusić gracza do jak najszybszego zebrania wszystkich gwiazdek.

Z pomocą tego co nauczyłeś się w tym poradniku i tysięcy przykładów dostępnych w sieci, powinieneś mieć solidną podstawę dla Twojego następnego projektu. Jeżeli będziesz miał jakieś pytania albo będziesz potrzebować pomocy, napisz śmiało na forum Phasera.

Facebook Instant Games

Phaser 3 wspiera w pełni tworzenie gier typu Facebook Instant Games. Jeżeli już potrafisz stworzyć własną grę, dlaczego nie przekonwertujesz jej dla Facebook'a za pomocą tutorialu Getting Started Guide?

← Previous