MakeCode Arcade aneb vytvořte si vlastní arkádovou hru – 2. část

Herní retro konzole představuje dobrý způsob, jak si užít zábavu, ale také se naučit základy programování. V minulém díle jsme si představili jednu takovou retro konzoli pro výuku programování a ukázali jsme si prostředí MakeCode Arcade. V dnešní druhé části budeme tvořit do naší retro konzole vlastní hru! Naprogramujeme si třeba jednoduché šnečí bludiště s blesky, které vás budou neustále pronásledovat až vás zneškodní 😊. 

Retro konzole a šnečí bludiště

Bludiště, ze kterého budeme vycházet, najdete pod názvem „Maze“ mezi tutoriály MakeCode. Je to skoro na konci. Tutoriál pro šnečí bludiště vás krok po kroku provede tvorbou programu celé hry. Po jeho ukončení se vám otevře přístup ke všem záložkám a blokům (v tutoriálech jsou v záložkách pro přehlednost jen bloky, které budete potřebovat pro tvorbu hry, tu si poté můžete dotvořit dalšími bloky).

Po dokončení tutoriálu budete mít do vaší retro konzole přichystanou následující hru.

A program vypadá takto. Překvapivě jednoduché, že?

V něm máte nejprve nastavenou podobu a definici vašeho hráče, pohyb do všech stan, nakreslenou mapu, kde se váš hráč pohybuje, poté příkaz, aby se váš sprite objevil na vámi zvoleném bloku. Blok ke sledování vašeho hráče (aby vám neutekl z obrazovky), odpočet času a nakonec, když se váš sprite dotkne vámi zvoleného čtverce, tak vyhrajete. 

Můžete si nakreslit svého vlastního hráče nebo si vybrat v galerii ze spousta již nakreslených postav.

Kreslíme vlastní postavu

Jaké by to bylo bludiště, kdyby byla retro konzole bez vlastní postavy. Naštěstí je tady jednoduchý editor pro nakreslení obrázku hráče. Obrázek může vyjadřovat cokoliv. V naší realizaci hry bludiště je to rovnou favicon HWKITCHEN.

Legenda pro nástroje kreslení postavy

Tužka – nástroj pro kreslení hráče (nahoře se pomocí čtverečků mění velikost) 

Guma – maže co je třeba (mění se velikost stejně jako u tužky) 

Obdélník – k nakreslení obrysu čtverce nebo obdélníku podle vaší představy 

Kyblík s barvou – vyplnění velkých prostor barvou 

Kruh – k nakreslení kruhu, jak velkého chcete 

Šikmá čára – nástroj pro nakreslení čáry do různých směrů, různě dlouhé

Čtverečky s čárkovaným ohraničením – označení celého obrázku nebo jeho části. Označenou část pak můžete přesunout, to se hodí i u animací, nebo také u kopírování označeného obrázku do jiného projektu (ctrl c + v) retro konzole. 

Ruka – slouží k rychlému posunování obrázku

Nahoře jsou ikony pro změnu velikosti gumy, štětce a otáčení s obrázkem.

Dole si pak můžete nastavit velikost kreslící plochy, pojmenovat si obrázek, vracet kroky, zmenšovat a zvětšovat svůj výtvor a dokončení (done). 

Nahoře ve složce My Assets jsou obrázky použité ve vaší hře.

Tvoření mapy bludiště

Kreslení mapy funguje podobně jako kreslení postav. Z nabídky vybíráte nástroje a pomocí dílků tvoříte mapu bludiště retro konzole. Můžete si vytvořit i vaši vlastní podobu bludiště, když ve složce My Tiles kliknete na plus. Vytvoříte si všechny rohy, části cesty, potřebné dílky a začnete ji postupně sestavovat. Vaše nákresy pak můžete doupravit kliknutím na ikonu tužky s papírem, duplikovat kliknutím na ikonu papírů a nebo kliknutím na koš odstranit. Práce v editoru je dost intuitivní.

Nakonec nezapomeňte vymezit prostor, kde se váš hráč bude v bludišti retro konzole pohybovat. Bloky, které budou tvořit stěny, musíte označit červeně po kliknutí na ikonu zdi.

Pokud vám příklad mapy připomíná plošný spoj, tak to je správně! Bude se nám hodit do následujícího příkladu!

Bastlířské bludiště s LEDkami, odpůrky a blesky

Já jsem si šnečí bludiště samozřejmě upravila a vylepšila. Vytvořila jsem si hru, ve které musíte do konce časového limitu dojít do cíle a v průběhu toho posbírat co nejvíce součástek a ještě se vyhnout všem zákeřným bleskům, které vás celou dobu pronásledují a snaží se vás vyzkratovat. 🙃 V případě, že vaši postavu zasáhnou všechny blesky nebo nestihnete dojít do cíle do konce časového limitu, tak prohráváte. A nebojte se, ty blesky vás budou pořád sledovat! 😊

Do programu jsem dále nastavila barvu pozadí (nemám v celé mapě dílky mapy), tři životy, skóre na nulu, splash (to je rámeček s vaším textem, který se zobrazí při spuštění hry). Do bludiště jsem přidala nepřítele (zkratovací blesk) a programové bloky pro pronásledování hráče blesky s jejich rychlostí, efekty, zvuky a animací.

Po bludišti jsou rozházené různé součástky, které musíte posbírat. Funguje to tak, že vždy když sprity překryje součástku, tak se změní skóre o 1, spustí se zvuk a na toto místo se nastaví průhledné pozadí a součástka zmizí. Když překryje hráč nepřítele, tak se odstraní efekty, nepřítel se zničí s efektem, zahraje se zvuk a ubere se život.

Nakonec je tady nastavení pro tlačítko B, při jeho zmáčknutí se objeví dialogový rámeček s informacemi ke hře. U rámečku si můžeme nastavit text, jeho barvu i místo zobrazení, ale i rámeček (ten si můžete vytvořit, nebo vybrat z již nakreslených, funguje to jako u kreslení hráčů). 

Na pár místech jsem ještě přidala efekty nebo různé zvuky, jsou to jen drobnosti, ale myslím, že to hře dodá větší šťávu.

Hru si můžete vyzkoušet v následujícím simulátoru nebo si ji rovnou nahrát do vaší retro konzole.

Program retro konzole si můžete projít níže a nebo si vytvořit vlastní podobu hry jeho editací.

Další možnosti programu pro retro konzole

Představivosti se meze nekladou. Můžete si vzít kostru hry bludiště a vymyslet si podle vlastních nápadů své originální. Pro ukázku přikládám bludiště, kde se snaží špión získat diamant. To je vylepšeno o náhodné střídání se míst odkud agent začíná svou misi. Je to způsobeno několikanásobným použitím grafického bloku, na kterém se sprite vždy na začátku hry objeví.

Ještě si představíme použití animací, jelikož jsou tady oproti původnímu tutoriálu také navíc. Animaci najdete ve sloupečku s bloky dole ve skupině advanced. Prostředí k animování je opět skoro stejné jako u kreslení postav. Nakreslíte si nebo okopírujete, co chcete animovat a pak jen vpravo v rámečku vašeho obrázku kliknete na duplikovat, zde můžete obrázek i odstranit. Duplikovaný obrázek si posunete a jedete dál, dokud nemáte hotovo. Ubíráte anebo přidáváte postupně bloky, aby to vypadalo, že se váš obrázek pohybuje. Nahoře si můžete pustit, jak vaše animace vypadá. U animace si můžete nastavit její interval a zapnout smyčku pro opakování.

Tip pro programování retro konzole na závěr

K vymazání nebo přesunutí programovacího bloku, který je zrovna někde uprostřed kódu, stačí zároveň zmáčknout ctrl a kliknutím tento programovací blok vyjmout. Nemusíte tak přesouvat celý kód.