Vytvo┼Öen├¡ prvn├¡ hry ve Phaseru 3 - ─î├íst 5 - Hr├í─ì

M├íme p─økn├® a l├íkav├® plo┼íinky, ale nikoho, kdo by po nich b─øhal. Dejme to do po┼Ö├ídku.

Vytvo┼Öte novou prom─ønnou s n├ízvem player a p┼Öidejte n├ísleduj├¡c├¡ ┼Ö├ídky k├│du do funkce create. V ─ì├ísti part5.html m┼»┼¥ete vid─øt toto:

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
});

D─øj├¡ se zde dv─ø r┼»zn├® v─øci: vytv├í┼Ö├¡ se sprite reaguj├¡c├¡ na hern├¡ fyziku (Physics Sprite) a vytv├í┼Ö├¡ se animace, kter├® bude pou┼¥├¡vat.

Sprite reaguj├¡c├¡ na hern├¡ fyziku

Prvn├¡ ─ì├íst k├│du vytv├í┼Ö├¡ sprite:

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

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

Nov├¢ sprite s n├ízvem player je um├¡st─øn├¢ na pozici 100 x 450. Sprite je vytvo┼Öen pomoc├¡ tov├írn├¡ funkce (this.physics.add) produkuj├¡c├¡ hern├¡ objekty s aktivovanou fyzikou (Physics Game Object Factory), co┼¥ znamen├í, ┼¥e je ve v├¢choz├¡m stavu nastaven jako dynamick├® fyzick├® t─øleso (Dynamic Physics body).

Po vytvo┼Öen├¡ mu nastavujeme hodnotu 0.2 pro m├¡rn├¢ odraz (bounce). To znamen├í, ┼¥e kdy┼¥ p┼Öi skoku dopadne, tak se lehce odraz├¡. D├íle mu nastavujeme kolizi s hranicemi hern├¡ho sv─øta. Ty maj├¡ ve v├¢choz├¡m stavu rozm─øry na┼í├¡ hry. Proto┼¥e jsme h┼Öe nastavili velikost 800 x 600, tak hr├í─ì nebude moct ut├®ct mimo tuto oblast. Hranice hr├í─ìe zastav├¡, pokud se pokus├¡ seb─øhnout z plo┼íinky na kraj├¡ch obrazovky nebo prosko─ìit vr┼íkem.

Animace

Pokud se pod├¡v├íte zp─øt na funkci preload, uvid├¡te, ┼¥e dude byl nahr├ín jako sprite sheet, ne jako obr├ízek. To je proto, ┼¥e obsahuje sn├¡mky animace. Takto vypad├í cel├¢ sprite sheet:

Je zde celkem 9 sn├¡mk┼», 4 pro b─øh doleva, 1 pro pohled p┼Ö├¡mo do kamery a 4 pro b─øh doprava. Pozn├ímka: Phaser podporuje p┼Öekl├íp─øn├¡ obr├ízk┼» podle osy (flipping), aby ┼ílo sn├¡┼¥it po─ìet pot┼Öebn├¢ch sn├¡mk┼» (pro sn├¡mky doprava bychom pou┼¥ili sn├¡mky doleva p┼Öeklopen├® kolem osy X), ale pro ├║─ìely tohoto tutori├ílu to nevyu┼¥ijeme.

Nadefinujeme dv─ø animace, kter├® nazveme 'left' pro pohyb vlevo a 'right' pro pohyb vpravo. Zde je animace 'left':

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

Animace pohybu doleva ('left') pou┼¥├¡v├í sn├¡mky 0, 1, 2 a 3 a b─ø┼¥├¡ rychlost├¡ 10 sn├¡mk┼» za vte┼Öinu. Hodnota -1 vlastnosti 'repeat' ur─ìuje, ┼¥e animace pob─ø┼¥├¡ dokola ve smy─ìce.

Tohle je standardn├¡ postup, kter├¢ zopakujeme pro animaci do opa─ìn├®ho sm─øru s vlastnost├¡ 'key' nastavenou na 'right' a pak je┼ít─ø pro animaci ot├í─ìen├¡ 'turn'.

Pozn├ímka nav├¡c: ve Phaseru 3 je spr├ívce animac├¡ (Animation Manager) glob├íln├¡. Vytvo┼Öen├® animace jsou dostupn├® v┼íem hern├¡m objekt┼»m. V┼íechny hern├¡ objekty sd├¡lej├¡ stejn├í z├íkladn├¡ anima─ìn├¡ data, zat├¡mco si udr┼¥uj├¡ vlastn├¡ informace o pozici v p┼Öehr├ívan├® animaci. D├¡ky tomu m┼»┼¥ete definovat animaci jen jednou a pak ji aplikovat na tolik hern├¡ch objekt┼», na kolik chcete. Je to odli┼ín├® od Phaseru 2, kde animace pat┼Öily v┼¥dy konkr├®tn├¡mu hern├¡mu objektu, na kter├®m byly vytvo┼Öen├®.