Vytvorenie tvojej prvej hry v programe Phaser 3

M├íme pekn├® a l├íkav├® plo┼íinky, ale nikoho, kto by po nich behal. Dajme to do poriadku.

Vytvor nov├║ premenn├║ s n├ízvom player a pridaj riadky k├│du, ktor├® n├íjde┼í v ─ìasti part5.html do funkcie create :

player = this.physics.add.sprite(100, 450, 'dude');

player.setBounce(0.2);
player.setCollideWorldBounds(true);

this.anims.create({
    key: 'left',
    frames: this.anims.generateFrameNumbers('dude', { start: 0, end: 3 }),
    frameRate: 10,
    repeat: -1
});

this.anims.create({
    key: 'turn',
    frames: [ { key: 'dude', frame: 4 } ],
    frameRate: 20
});

this.anims.create({
    key: 'right',
    frames: this.anims.generateFrameNumbers('dude', { start: 5, end: 8 }),
    frameRate: 10,
    repeat: -1
});

Ide tu o dve rôzne veci: vytvára sa tu sprite reagujúci na hernú fyziku a aj jeho animácia.

Sprite reaguj├║ci na hern├║ fyziku

Prvá čásť kódu vytvára sprite:

player = this.physics.add.sprite(100, 450, 'dude');

player.setBounce(0.2);
player.setCollideWorldBounds(true);

Nov├¢ sprite s n├ízvom player je umiestnen├¢ na poz├¡ciu 100 x 450. Sprite je vytvoren├¢ pomocou tov├írenskej funkcie (this.physics.add) produkujucej hern├® objekty s aktivovanou fyzikou. Defaultn├¢ stav spritu je dynamick├® fyzick├® teleso.

Po vytvoren├¡ mu nastavujeme hodnotu pre mierny odraz na 0.2. To znamen├í, ┼¥e ke─Å pri skoku dopadne, tak sa trochu odraz├¡. ─Äalej mu nastavujeme kol├¡ziu s hranicami hern├®ho sveta. Defaultne zodpoved├í hern├¢ svet rozmerom na┼íej hry. Preto┼¥e sme hre nastavili ve─¥kost 800 x 600, tak hr├í─ì nebude m├┤c┼Ñ opusti┼Ñ t├║to oblas┼Ñ. Hranice hr├í─ìa zastavia na okrajoch obrazovky a to aj na hornej strane.

Animácia

Ak sa vr├íti┼í sp├ñ┼Ñ ku funkcii preload, tak uvid├¡┼í, ┼¥e dude bol nahran├¢ ako sprite sheet, nie ako obr├ízok. D├┤vodom je to, ┼¥e obsahuje anima─ìn├® sn├¡mky. Takto vyzer├í cel├¢ sprite sheet:

Je tu spolu 9 sn├¡mkov, 4 pre beh do─¥ava, 1 pre poh─¥ad priamo do kamery a 4 pre beh doprava. Pozn├ímka: Phaser podporuje osov├® prekl├ípanie obr├ízkov, aby sa dal zn├¡┼¥it po─ìet potrebn├¢ch sn├¡mkov, ale v tomto kurze to nevyu┼¥ijeme.

Zadefinujeme dve anim├ície, ktor├® pomenujeme 'left' pre pohyb v─¥avo a 'right' pre pohyb vpravo. Tu m├íme anim├íciu 'left':

this.anims.create({
    key: 'left',
    frames: this.anims.generateFrameNumbers('dude', { start: 0, end: 3 }),
    frameRate: 10,
    repeat: -1
});

Animácia pohybu doĝava ('left') vyuŝíva snímky 0, 1, 2 a 3 a beŝí rychlosťou 10 snímkov za sekundu. Hodnota -1 vlastnosti 'repeat' určuje, ŝe animácia sa bude opakovať v slučke.

Tento ┼ítandardn├¢ postup zopakujeme aj pre anim├íciu do opa─ìn├®ho smeru s vlastnos┼Ñou 'key' nastavenou na 'right' a pre anim├íciu ot├í─ìania 'turn'.

Pozn├ímka: vo frameworku Phaser 3 je spr├ívca animac├¡ glob├ílny. Vytvoren├® anim├ície s├║ dostupn├® pre v┼íetky hern├® objekty. Tieto zdie─¥aj├║ z├íkladn├® anima─ìn├® d├íta, ale maj├║ vlastn├® ─ìasov├® osy. V─Åaka tomu m├┤┼¥eme definova┼Ñ anim├íciu len raz a potom ju m├┤┼¥eme aplikova┼Ñ na to─¥ko hern├¢ch objektov, na ko─¥ko potrebujeme. Je to odli┼ín├® od Phasera 2, kde anim├ície patrili v┼¥dy konkr├®tn├®mu hern├®mu objektu, na ktorom boli vytvoren├®.