Vytvoření první hry ve Phaseru 3

Abychom naši hru uzavřeli, přidáme nějaké zloduchy. To přidá do hry prvek výzvy, něco, co dosud chybělo.

Myšlenka je tato: když poprvé seberete všechny hvězdičky, spadne odrážející se bomba. Tato bomba se bude náhodně odrážet po úrovni a když se s ní srazíte, tak zemřete. Všechny hvězdičky budou generované znova, takže je můžete opět sbírat a pokud je sesbíráte, vypustí se další bomba. To dá hráči výzvu: získej co největší skóre, dokud nezemřeš.

První věc, kterou potřebujeme je skupina (Group) pro bomby a pár Colliderů:

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

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

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

Bomby se budou samozřejmě odrážet od plošinek a pokud do nich hráč narazí, zavoláme funkci 'hitBomb'. Vše, co uděláme je, že hru zastavíme a zbarvíme hráče do červena:

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

    player.setTint(0xff0000);

    player.anims.play('turn');

    gameOver = true;
}

Zatím dobré, ale potřebujeme bombu vypustit. Upravíme funkci 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);

    }
}

Použijeme metodu countActive objektu Group, abychom zjistili, kolik hvězdiček ve skupině je stále aktivních. Pokud žádná, pak je hráč sesbíral všechny, takže využijeme funkci iterate, abychom je všechny obnovili a nastavíme jejich pozici y na nulu. Tím donutíme všechny hvězdičky znovu spadnout z vršku obrazovky.

V další části kódu vytvoříme bombu. Nejdříve vybereme náhodnou pozici x tak, aby byla vždy na opačně straně obrazovky, než je hráč, prostě proto, abychom mu dali šanci. Pak bombu vytvoříme a nastavíme tak, aby kolidovala s hranicí světa, odrážela se a měla náhodnou rychlost.

Výsledkem je roztomilá bombička, co se odráží po obrazovce. Dost malá, aby se jí dalo na začátku snadno vyhnout, ale brzy, jak jich bude víc, to bude o dost těžší!

A tím je naše hra dokončena :)

Závěr

Naučili jste se, jak vytvořit sprite s fyzikálními vlastnostmi, ovládat jeho pohyb a hlídat jeho interakce s ostatními objekty v malém herním světě. Existuje velká spousta věcí, kterými to můžete dále rozvíjet. Co třeba zvětšit velikost úrovně a nechat kameru skrolovat? Nebo přidat další typy zloduchů, jiné cenné předměty ke sbírání nebo přidat hráči indikátor zdraví.

Nebo pro nenásilný styl ji můžete upravit na typ hry speed-run a jen měřit hráči, jak rychle dokáže hvězdy posbírat.

S tím, co jste se naučili v tomto tutoriálu a s pomocí stovek příkladů, které jsou k dispozici, byste nyní měli mít solidní základ pro další projekty. Ale pokud máte otázky, potřebujete radu nebo se chcete podělit o to, na čem pracujete, tak můžete kdykoli požádat o radu na fóru k Phaseru.

Facebook Instant Games

Phaser 3 plně podporuje tvorbu instantních her na Facebooku (Facebook Instant Games). Teď jste se naučili, jak vytvořit hru ve Phaseru. Proč se nepodívat, jak snadné to je ji zkonvertovat na instantní hru (Instant Game) ve specifickém průvodci Jak začít.

← Previous