Navigation

8.časť - Hviezdny prach

Je čas dať našej malej hre cieľ. Rozsypme do scény skupinu hviezdičiek, ktoré bude naša postava zbierať. Aby sme to dosiahli, vytvoríme novú skupinu nazvanú 'stars' a naplníme ju. Vo funkcii create pridáme následujúci kód (nájdete ho tiež v 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));

});

Postup je podobný vytváraniu skupiny plošiniek. Pretože potrebujeme, aby se hviezy pohybovali a odrážali od terénu, vytvoríme skupinu dynamických fyzických telies, nie statických.

Pri tvorbe skupiny je možné použiť konfiguračný objekt, ktorý pomôže s jej nastavením. V našom prípade má konfiguračný objekt tri časti: Najskôr nastavíme kľúč pre textúru na obrázok hviezdy. Každý potomok vytvorený vďaka konfiguračnému objektu bude mať teda defaultne textúru s obrázkom hviezdy. Potom nastavujeme vlastnosť repeat na 11. Pretože 1 potomok sa vytvára automaticky, 11 opakovaní znamená, že ich budeme mať celkom 12.

Posledným nastavením je setXY - takto nastavíme pozíciu 12 potomkov skupiny. Potomkovia sa začnú umiestňovať od pozície x:12 a y:0 s odstupom 70 pixelov. Takže prvý bude na pozícii 12 x 0, druhý na pozícii o 70 pixelov ďalej, čiže na 82 x 0, tretí na 152 x 0 a tak ďalej. Hodnota pre krok predstavuje šikovný spôsob rozmiestnenia potomkov. Hodnota 70 bola zvolená preto, aby sme rozmiestnili všetkých 12 potomkov perfektne na obrazovke.

Ďalšia časť kódu prechádza všetkými potomkami v skupine a nastavuje im náhodnu hodnotu vlastnosti odraz v intervale od 0.4 po 0.8. Hodnoty pre odraz môžu byť inak od 0, čo predstavuje žiadne odrážanie, až po 1, čo je maximálne odrážanie. Pretože hviezdy sa vytvárajú s hodnotou 0 pre pozíciu y, gravitácia ich stiahne dole, až sa nakoniec odrazia od plošinky alebo terénu. Náhodná hodnota odrazu určuje, do akej výšky sa odrazia, až nakoniec zostanú ležať v kľude.

Ak by sme teraz spustili náš kód, hviezdy by prepadly dole cez obrazovku. Aby sme tomu zabránili, musíme testovať ich kolíziu s plošinkami. Použijeme teda ďalší objekt Collider:

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

Podobne budeme testovať, či sa naša postava prekrýva s hviezdou:

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

Takto hovoríme Phaseru, aby testoval prekrývanie medzi postavou a ľubovoľnou hviezdou v skupine. Ak dôjde ku prekrytiu, tak sa zavolá funkcia 'collectStar':

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

Jednoducho deaktivujeme hviezde jej fyzikálné telo a jej rodičovský herný objekt nastavíme na neaktívny a neviditeľný, čím hviezda zmizne z obrazovky. Ak spustíme hru teraz, tak postava môže behať, skákať, odrážať sa od plošiniek a zbierať hviezdy padajúce zhora. To nie je zlé na pár riadkov pomerne čitateľného kódu :)

image