Navigation

7.časť - Ovládanie postavy klávesnicou

Kolízie sú skvelá vec, ale to, čo nutne potrebujeme je, aby sa naša postava pohybovala. Asi ťa napadlo pozrieť sa do dokumentácie a nájsť spôsob pridania poslucháča k udalosti, ale to tu nepotrebujeme. Phaser má zabudovaný manažer klávesnice a jedna z jeho výhod je táto malá funkcia:

cursors = this.input.keyboard.createCursorKeys();

Funkcia pridá do objektu cursors štyri vlastnosti: up, down, left, right. Sú to všetko inštancie objektu Key. Ďalej nám už stačí iba zisťovať ich stav počas slučky update:

if (cursors.left.isDown)
{
    player.setVelocityX(-160);

    player.anims.play('left', true);
}
else if (cursors.right.isDown)
{
    player.setVelocityX(160);

    player.anims.play('right', true);
}
else
{
    player.setVelocityX(0);

    player.anims.play('turn');
}

if (cursors.up.isDown && player.body.touching.down)
{
    player.setVelocityY(-330);
}

Pridali sme dosť kódu, ale kód je zrozumiteľný .

Najskôr kontrolujeme, či je stlačený kláves left. Ak áno, nastavíme zápornu horizontálnu rýchlosť a spustíme animáciu pohybu doľava. Ak je stlačený kláves right, urobíme opak.

Treba zdôrazniť, že postava sa bude pohybovať len vtedy, keď je kláves stlačený a zastaví sa ihneď po jeho uvoľnení. Phaser tiež umožňuje vytvárať omnoho komplexnejší pohyb s hybnosťou a zrýchlením, ale pre túto hru to nepotrebujeme. Podmienka else nuluje rýchlosť a nastavuje animáciu na 'turn' v prípade, že nie je stlačený žiaden kláves.

Skok

Posledná časť kódu pridává skok. Naším klávesom pre skok je kláves up a my testujeme, či je stlačený. Nechceme, aby naša postava mohla skákať i vo vzduchu, tak testujeme aj to, či sa dotýka plošinky.

Ak sú obe tieto podmienky splnené, nastavíme vertikálnu rýchlosť na - 330 pixelov za sekundu. Postava bude padať na terén automaticky, pretože na ňu pôsobí gravitácia. S dokončeným ovládaním tu máme herný svet, ktorý môžeme začať skúmať. Spusti si part7.html a hraj sa. Pohraj sa s hodnotou -330 pre skok. Skús ju zvýšiť alebo znížiť a sleduj, aký to bude mať efekt.

image