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é.