Obsah
1. MakeCode Arcade: další z mnoha pomůcek pro výuku programování
2. Kouzlo vizuálního programování
3. Projekt Scratch – „programovatelné puzzle“
4. Další projekty založené na principu představeného ve Scratchi
5. MakeCode Arcade se představuje
6. Základní koncepty, s nimiž se pracuje
8. Rastrový obrázek na herním pozadí
9. Herní svět složený z dlaždic
11. Pohyb spritu představujícího hráče
12. Sprite představující protivníka
14. Nastavení počáteční pozice hráče i protivníka
16. Detekce kolize spritů a definice podmínky pro ukončení hry (game over)
17. Přidání počitadla životů a změna podmínky pro ukončení hry
1. MakeCode Arcade: další z mnoha pomůcek pro výuku programování
It's a bit like learning natural languages: the earlier the better.
Michael Kölling
V předchozích částech dnes již několik let starého seriálu pojednávajícího o programovacích jazycích vhodných pro výuku programování (viz též odkazy uvedené na konci článku) jsme se seznámili s několika programovacími jazyky, které se v minulosti používaly i v současnosti používají jak na základních školách, tak i na školách středních. V první části jsme se zmínili o dnes již klasických jazycích z této kategorie. Jedná se o LOGO a Karel (ten se doposud používá buď v původní variantě, nebo v různých úpravách typu Lightbot, Baltík atd.). V části druhé jsme se zaměřili na Pascal (až relativně donedávna se jednalo o stálici v tuzemském školství) a taktéž na Python, včetně různých vývojových nástrojů, které byly pro tyto jazyky zhruba v průběhu předchozích deseti let navrženy. Malou odbočku jsme udělali směrem k NetLogu, což je (nejenom) vývojové prostředí, které se i přes svůj název od klasického Loga v mnoha ohledech odlišuje (a stále se jedná o živý projekt).
Obrázek 1: V předchozích částech seriálu o programovacích jazycích určených pro výuku programování jsme se zmínili o relativně velkém množství různých jazyků a vývojových prostředí. Na tomto obrázku je zobrazeno uživatelské prostředí nástroje NetLogo se spuštěnou simulací.
Zmínili jsme se i o některých pokusech o reinkarnaci „starého dobrého“ programovacího jazyka BASIC. Příkladem může být projekt SmallBasic, kterému jsme se věnovali v článcích Small Basic: moderní reinkarnace BASICu určená pro výuku programování a Vestavěné objekty Small Basicu: práce s grafikou, časovačem, reakce na události. Mezi jednu z předností Small Basicu patří fakt, že ho lze začít používat ihned a bez nutnosti instalace, protože se jedná o nástroj dostupný na webu. Na druhou stranu však lze různá webová pískoviště a webová IDE v současnosti najít i pro mnoho dalších jazyků.
Obrázek 2: Další programovací jazyk a jeho vývojové prostředí, s nímž jsme se již seznámili – Smalltalk a Squeak.
2. Kouzlo vizuálního programování
Scratch uses hands-on, active learning; it is visually appealing; it allows users to express their own creativity and to build on their own experiences; it gives immediate, understandable feedback; and it allows users to avoid syntax errors without focusing on minutiae, freeing them to focus on processes and concepts.
NCWIT study
Většina programovacích jazyků, resp. možná přesněji řečeno výukových pomůcek zmíněných v předchozí kapitole je sice vhodná pro výuku programování, ovšem pro děti předškolního věku nebo pro děti na prvním stupni ZŠ se podle mého názoru příliš nehodí, a to hned z několika důvodů. Jedním z těchto důvodů je nutnost zápisu algoritmů s využitím více či méně strukturovaného textu, jehož syntaxe je hlídána buď interpretrem či překladačem. Jedná se o nejdéle používaný způsob programování, jehož počátky můžeme hledat v hluboké počítačové minulosti, protože první překladač pracující se strojovým textem byl vytvořen již v rozmezí let 1951 až 1952 Grace Hopperovou v rámci projektu A-0 (Arithmetic Language version 0), který byl později následován známým FORTRANem navrženým Johnem W. Backusem a jeho vývojovým týmem. Ovšem v průběhu oněch přibližně šedesáti let se znovu a znovu objevovaly pokusy o vizuální návrh algoritmů, tj. o tvorbu programů nikoli zápisem strukturovaného zdrojového textu, ale návrhem algoritmů pomocí diagramů.
Obrázek 3: Základní informace o projektu Scratch. V tomto dialogu ovšem chybí důležitá informace o tom, že vedoucím skupiny Lifelong Kindergarten je Mitchel Resnick (podle příjmení se možná jedná o potomka českých emigrantů). Použitá licence umožňuje jak šíření programu v binární formě i ve formě zdrojových kódů, tak i tvorbu odvozených projektů. Příkladem může být například projekt BYOB, neboli „Build Your Own Blocks“.
Známé jsou například pokusy o „překlad“ klasických vývojových diagramů, využití kopenogramů (což je, resp. byla tuzemská specialita) atd. V současnosti někteří analytici a vývojáři využívají UML (což je ovšem jen pomůcka) či BPMN (návrh business procesů, ovšem s vhodně zvolenými bloky se vlastně jedná o plnohodnotný jazyk). V oblasti software určeného pro výuku programování se využívá podobný princip, jako v případě vývojových diagramů – možnost zápisu algoritmů s využitím bloků představujících jednotlivé příkazy či volané funkce, které jsou doplněny o základní strukturované příkazy určené pro tvorbu rozhodovacích podmínek a programových smyček. Na tomto principu, tj. na vylepšených vývojových diagramech, je postaven i projekt Scratch, v němž jsou uživatelům nabídnuty základní stavební bloky, z nichž se program skládá, přičemž je ponecháno pouze na uživateli, jakým způsobem tyto bloky využije ve svých programech. Díky způsobu skládání bloků pod sebe (podobně jako u puzzle), popř. do sebe je zajištěno, že program bude po syntaktické stránce vždy v pořádku, což je důležité, protože odpadá pro děti nudná oprava překlepů, hledání chybějících středníků, hlídání párovosti závorek i další činnosti spojené s prací s běžnými programovacími jazyky.
Obrázek 4: Bloky, z nichž se programy skládají, jsou na základě své funkce rozděleny do osmi kategorií (postupně se tato sada rozšiřuje, dnes se jedná už o deset kategorií). Povšimněte si, že prostředí Scratche bylo téměř kompletně počeštěno; jedna z mála částí ponechaná v angličtině je nápověda k jednotlivým příkazům (i když i tato část se pravděpodobně brzy přeloží).
3. Projekt Scratch – „programovatelné puzzle“
Pojďme si nyní ve stručnosti říci, jakým způsobem se vlastně programy ve Scratchi tvoří. Je to ve skutečnosti velmi jednoduché a po krátkém zaučení i intuitivní – v levé části okna se postupně vybírají příkazové bloky, které se přetahují do prostřední části okna, kde se z těchto bloků může tvořit program či programy. Běžný příkazový blok je vizuálně představován obdélníkem s několika výčnělky připomínajícími puzzle. Programové smyčky a podmínky jsou vyobrazeny jako složitější tvary umožňující vkládání dalších bloků dovnitř svého těla. Pomocí těchto výčnělků se bloky spojují dohromady tak, aby tvořily sekvenci či dokonce strukturovaný program. V případě, že je zapotřebí sekvenci příkazů změnit, je možné bloky od sebe rozdělit, popř. vybraný blok smazat (přes menu zobrazené po stisku pravého tlačítka myši), zkopírovat (opět přes pravé tlačítko myši) či přesunout. Společně spojené bloky tvoří program, který je možné spustit doubleclickem. Na ploše Skripty je možné vytvořit i více programů, každý je tvořený množinou spojených bloků.
Obrázek 5: Programy se ve Scratchi tvoří přetahováním příkazových bloků z oblasti umístěné v levé části okna do střední oblasti, zde nadepsané „Skripty“ (tento screenshot vznikl v původní verzi Scratche, kterou je možné nainstalovat lokálně. Kromě toho lze pochopitelně použít i webovou verzi, u níž není vyžadována ani instalace ani registrace).
Vizuální tvorba programů pomocí skládání příkazových bloků tvoří pouze jednu část přitažlivosti Scratche při výuce programování. Druhou částí je takzvaná pracovní plocha s volitelným pozadím, po níž se mohou v závislosti na volaných příkazech pohybovat takzvané sprity, které navíc mohou při svém pohybu za sebou kreslit křivku (tj. stopu pohybu). Pod pojmem sprite je ve Scratchi myšlen rastrový obrázek, jenž může představovat například postavu či jiný pohyblivý nebo i statický předmět ve hře, zatímco pozadí umístěné na pracovní plochu (taktéž se jedná o rastrový obrázek) je většinou neměnné a může představovat pozadí hry, místnost, ve které se odehrává nějaký dialog atd. Scratch díky možnosti prakticky neomezeného pohybu spritů po pracovní ploše s volitelným kreslením cesty (stopy pohybu), kterou sprity vykonaly, umně integruje jak možnosti programovacích jazyků typu Karel či Baltazar (sprity umístěné a pohybující se po pomyslné šachovnici) a taktéž programovacího jazyka Logo s neodmyslitelnou želvou, která se může pohybovat libovolným směrem po ploše.
Obrázek 6: Editor bitmapových spritů zabudovaný přímo ve Scratchi.
Pohyb spritů lze zajistit pomocí příkazových bloků určených pro posun spritu o zadaný počet kroků, otočení spritu libovolným směrem, přesun spritu na zvolené absolutní či relativní souřadnice atd. Všechny tyto bloky jsou umístěny v první skupině nazvané příznačně Pohyb. Základní vlastnosti spritu se ovšem nemusí měnit pouze běžícím programem, ale i interaktivně. K tomu slouží jak pracovní plocha, na níž je možné sprite pomocí myši přesunout na libovolné místo, tak i oblast zobrazená nad vlastním skriptem (programem). V této oblasti lze pomocí trojice ikon měnit velikost i natočení vybraného (přesněji řečeno právě aktivního) spritu a kromě toho se zde zobrazuje i způsob vykreslení stopy. Sprity mohou při svém pohybu po pracovní ploše reagovat na různé události, například na náraz do jiného spritu, přesun nad oblast s určenou barvou, náraz do stěny ohraničující pracovní plochu atd. Vybraný sprite navíc může něco „říct“ nebo si něco „pomyslet“, což je vizuálně zobrazeno formou komiksového obrázku se zvoleným textem (takto lze realizovat základní vstupně/výstupní operace).
Obrázek 7: Základní informace o spritu i o vlastnostech kreslicího pera.
4. Další projekty založené na principu představeného ve Scratchi
Projekt Scratch, jehož popisem jsme se až doposud zabývali, se po relativně krátké době po svém představení veřejnosti stal velmi populární a to nejenom mezi učiteli základních škol (v USA a dalších zemích), ale i na středních školách a na školách vysokých (především na fakultách netechnického zaměření). Důvodů k této popularitě bylo a je několik, největším však zůstává možnost vytvoření i poměrně složitého programu bez toho, aby byl uživatel nucen zdlouhavě studovat syntaxi a sémantiku jazyka, učit se ovládat vývojové prostředí nebo prostředí interpretru a navíc ještě reagovat na různá kryptická chybová hlášení (ze syntaxe většiny běžných programovacích jazyků vyplývá, že například chybějící uzavírací závorka nebo klíčové slovo ukončující nějaký blok, mnohdy vede ke vzniku chybového hlášení na jiném místě v programu, než kde se skutečně chyba nachází). Další předností Scratche je jeho orientace na tvorbu multimediálních programů a taktéž možnost snadno prezentovat výsledný projekt na Internetu.
Obrázek 8: MakeCode pro micro:bit – návrh algoritmu s využitím bloků.
Webová verze Scratche je v současnosti založena na JavaScriptové knihovně nazvané Blockly. Právě tato knihovna nabízí vývojářům možnost využití stavebních bloků ve tvaru typických scratchovských „puzzle“. Knihovna Blockly je kromě Scratche využita i v dalších projektech, které více či méně kopírují původní design i funkci Scratche, ovšem většinou s dalšími vylepšeními, napojením na reálný hardware, roboty atd. Jedná se například o vývojové prostředí MakeCode, které se (mj. ) používá pro programování jednodeskového mikropočítače micro:bit.
Obrázek 9: Tentýž program, ale transformovaný do JavaScriptu.
Zajímavé je, že MakeCode pro micro:bit umožňuje zápis programu třemi způsoby: přímo s využitím bloků (to již známe), dále zápis v Pythonu a v JavaScriptu. To ovšem není vše, protože mezi jednotlivými zápisy se můžeme snadno přepínat, takže se využívá to nejlepší z obou světů – názornost vizuálního „zápisu“ programů a snadné a rychlé úpravy zdrojového kódu v textovém editoru (zde je použit webový editor).
Obrázek 10: Stále tentýž program, ale nyní transformovaný do Pythonu.
5. MakeCode Arcade se představuje
V dnešním článku se seznámíme se základními možnostmi webového vývojového prostředí nazvaného poměrně přímočaře MakeCode Arcade, které je dostupné na adrese https://arcade.makecode.com/. Jedná se o prostředí založené na výše zmíněném projektu Blockly, které je primárně určeno pro tvorbu jednodušších „arkád“, tedy her, které si mohou (nepatrně) starší čtenáři pamatovat z herních automatů. Příkladem takového typu her může být světově proslulý PacMan, herní série s Mariem, herní série s Donkey Kongem, nekonečná řada stříleček (zmiňme například R-type), bludišťové hry, bojové sporty atd. Pro tyto účely nabízí MakeCode Arcade příslušné pomocné objekty – pozadí, hráče, NPC, další sprity, možnost ovládání hry různými ovladači, časovače atd.
Obrázek 11: Prostředí MakeCode Arcade.
Výsledná hra přitom může být spuštěna přímo v prostředí webového prohlížeče (což bude nejčastější způsob) nebo ji lze nahrát do různých retro herních konzolí, které jsou v MakeCode Arcade podporovány (popravdě řečeno ale většinu těchto konzolí s velkou pravděpodobností nebudete znát, snad až na herní konzoli postavenou na základě Raspberry Pi).
6. Základní koncepty, s nimiž se pracuje
V MakeCode se využívají následující koncepty používané v počítačové grafice, ve hrách i interaktivních aplikacích:
- Herní scéna, což je buď statické pozadí nebo pravidelné dlaždice, na které je herní svět rozdělen (podle typu hry).
- Sprity, což jsou pohyblivé objekty ve hře (hráči, NPC, poklad atd.).
- Callback funkce volané při vzniku událostí (typicky stisk tlačítka ovladače či zvolení jednoho ze směrů).
- Úlohy s naplánovaným časem spuštění.
Všechny tyto objekty, události a úlohy přitom mohou být reprezentovány jak s využitím bloků, tak i ve formě programového kódu v Pythonu či JavaScriptu.
Obrázek 12: Některé bloky, které související s herním prostředím (scénou).
7. Herní pozadí
Herní pozadí může být v tom nejjednodušším případě představováno jednobarevnou plochou. Program (a jedná se o skutečně spustitelný program), který pouze nastaví barvu pozadí, může vypadat následovně:
Obrázek 13: Triviální program, který po svém spuštění pouze nastaví barvu pozadí.
Samozřejmě můžeme barvu pozadí vybrat interaktivně z nabídnuté barvové palety (která je naschvál omezena na několik barev):
Obrázek 14: Výběr barvy z barvové palety.
8. Rastrový obrázek na herním pozadí
Jednobarevné pozadí je nudné, ovšem MakeCode Arcade umožňuje na pozadí vložit prakticky libovolný rastrový obrázek:
Obrázek 15: Program, který na pozadí vykreslí rastrový obrázek.
Samotný obrázek lze vybrat z galerie nebo si ho nakreslit v online editoru (ten je dosti primitivní, ale pro dané účely dostačuje, obsahuje operaci undo a triviálním způsobem – kolečkem myši – umožňuje obrázek přiblížit a dělat v něm detailní změny):
Obrázek 16: Grafický (rastrový) editor obrázků pro herní pozadí.
Obrázek 17: Přiblížení obrázku pro provedení detailních změn.
9. Herní svět složený z dlaždic
Mnoho klasických her používá pro reprezentaci herního světa pravidelné dlaždice, přičemž každá dlaždice představuje určitou část světa s pevnou (pravidelnou) velikostí. Velmi dobrým příkladem takové hry je původní Legend of Zelda, klasické plošinovky, ale i mnohé strategické hry (pro ty se ovšem MakeCode Arcade příliš nehodí):
Obrázek 18: Screenshot hry Super Mario Bros. Celý herní svět je složen z dlaždic.
Nakreslení herního světa (resp. přesněji řečeno jednotlivých úrovní herního světa) je v MakeCode Arcade jednoduché, protože je k dispozici editor, který tyto operace podporuje:
Obrázek 19: Editor herního světa složeného z dlaždic.
Nejkratší program, který nastaví a vykreslí takto reprezentovaný herní svět, může vypadat následovně:
Obrázek 20: Program pro vykreslení herního světa složeného z dlaždic.
A takto vypadá tento herní svět po spuštění v emulátoru herní konzole v levé části okna MakeCode Arcade:
Obrázek 21: Herní svět (zde jen jeho část) zobrazená v emulátoru herní konzole.
Herní svět může být ve skutečnosti větší, než je velikost displeje (emulované) herní konzole. V takovém případě je možné nastavit „sledování“ postavičky a automatický scrolling herního světa, což si ukážeme v dalším textu.
10. Sprity ve hře
Nedílnou součástí naprosté většiny her jsou takzvané sprity, což je (dnes již historické) označení objektů pohybujících se v herním světě. Tyto objekty jsou buď přímo řízeny hráčem (postavička), nepřímo řízeny hráčem (střela) nebo jsou řízeny programem (NPC, předměty, poklady, dnes tak „oblíbené“ loot boxy atd.). V projektu MakeCode Arcade jsou sprity vykreslovány jako rastrové obrázky, z nichž některé pixely mohou být průhledné; což je grafická technika používaná již několik desetiletí.
V prostředí existuje galerie s výběrem spritů, ovšem nové sprity je možné si nakreslit v již zmíněném vestavěném grafickém editoru:
Obrázek 22: Rastrový grafický editor, tentokrát při úpravě spritu.
Rozšíření programu, který původně pouze vykreslil pozadí, na program, který vykreslí i sprite, bude vypadat následovně:
Obrázek 23: Program, který vykreslí pozadí i sprite.
A takto bude vypadat výsledek po zobrazení v emulátoru herní konzole:
Obrázek 24: Program zobrazující pozadí a sprite po zobrazení v emulátoru herní konzole.
11. Pohyb spritu představujícího hráče
Typickou úlohou pro sprite představujícího hráče je jeho ovládání s využitím směrového ovladače nebo kurzorových šipek. Emulátor herní konzole směrový ovladač (zde ve tvaru kříže) má a ve webové verzi se ovládá buď právě kurzorovými šipkami nebo přes klávesy WSAD. Jak se však řeší pohyb spritu/hráče? Klasické řešení spočívá v implementaci těchto kroků:
- Přečtení stavu ovladače
- Série (typicky čtyř) rozhodovacích konstrukcí typu „pokud je stisknut směr doleva, změn x-ovou pozici hráče o –1“
Tento algoritmus byl realizován snad již milionkrát, ovšem v MakeCode Arcade to není nutné dělat ještě jednou :-) K dispozici je totiž speciální blok, který přímo propojí ovladač s daným spritem a dokonce umožní zvolit si relativní rychlost posunu hráče. Vše, co je zapotřebí do hry přidat, aby se začal hráč pohybovat, je právě tento jediný blok:
Obrázek 25: Rozšíření programu o zajištění pohybu hráče ve hře s využitím ovládacích tlačítek (resp. ovladače na herní konzoli).
Pokud nyní v levé části webové stránky emulátor herní konzole spustíme, bude možné hráče ovládat přes WASD či přes kurzorové šipky (pokud tomu tak není, pokuste se získat fokus na tuto část webové stránky kliknutím myší na libovolné místo na webové konzoli).
Obrázek 26: Spuštění programu v emulátoru herní konzole.
A jak bude vypadat příslušný programový kód získaný transformací z „bloků“ do JavaScriptu nebo Pythonu?
Odpovídající kód v JavaScriptu:
scene.setBackgroundImage(img`
...
zkráceno
...
`)
let mySprite = sprites.create(img`
. . . . . . f f f f . . . . . .
. . . . f f f 2 2 f f f . . . .
. . . f f f 2 2 2 2 f f f . . .
. . f f f e e e e e e f f f . .
. . f f e 2 2 2 2 2 2 e e f . .
. . f e 2 f f f f f f 2 e f . .
. . f f f f e e e e f f f f . .
. f f e f b f 4 4 f b f e f f .
. f e e 4 1 f d d f 1 4 e e f .
. . f e e d d d d d d e e f . .
. . . f e e 4 4 4 4 e e f . . .
. . e 4 f 2 2 2 2 2 2 f 4 e . .
. . 4 d f 2 2 2 2 2 2 f d 4 . .
. . 4 4 f 4 4 5 5 4 4 f 4 4 . .
. . . . . f f f f f f . . . . .
. . . . . f f . . f f . . . . .
`, SpriteKind.Player)
controller.moveSprite(mySprite, 100, 100)
Odpovídající kód v Pythonu:
scene.set_background_image(img("""
...
zkráceno
...
"""))
mySprite = sprites.create(img("""
. . . . . . f f f f . . . . . .
. . . . f f f 2 2 f f f . . . .
. . . f f f 2 2 2 2 f f f . . .
. . f f f e e e e e e f f f . .
. . f f e 2 2 2 2 2 2 e e f . .
. . f e 2 f f f f f f 2 e f . .
. . f f f f e e e e f f f f . .
. f f e f b f 4 4 f b f e f f .
. f e e 4 1 f d d f 1 4 e e f .
. . f e e d d d d d d e e f . .
. . . f e e 4 4 4 4 e e f . . .
. . e 4 f 2 2 2 2 2 2 f 4 e . .
. . 4 d f 2 2 2 2 2 2 f d 4 . .
. . 4 4 f 4 4 5 5 4 4 f 4 4 . .
. . . . . f f f f f f . . . . .
. . . . . f f . . f f . . . . .
"""),
SpriteKind.player)
controller.move_sprite(mySprite, 100, 100)
12. Sprite představující protivníka
Nyní do programu se vznikající hrou přidáme další sprite, který bude představovat protivníka. Použijeme k tomu stejný blok, jako byl blok pro přidání hráče, pouze se změní typ spritu z Player na Enemy (a při změně typu spritu si povšimněte dalších voleb typů spritu). Výsledný program by měl (v zobrazení založeném na blocích) vypadat následovně:
Obrázek 27: Přidání druhého spritu představujícího protivníka do programu.
Po spuštění hry je možné hráčem pohybovat (s využitím ovladače, resp. klávesnice), kdežto druhý sprite bude pouze zobrazen ve středu herního pole:
Obrázek 28: Hráčem je možný pohybovat, druhý sprite zůstává na místě.
13. Protivník sledující hráče
V dalším kroku se pokusíme protivníka rozpohybovat. MakeCode Arcade nám dokonce nabízí jeden předpřipravený způsob pohybu – NPC může sledovat hráče, resp. se může snažit se k němu přiblížit po nejkratší možné dráze. Toto chování zajistíme přidáním bloku, který je na dalším screenshotu zvýrazněn žlutou barvou:
Obrázek 29: Nyní bude protivník sledovat hráče a pohybovat se jeho směrem relativní rychlosti 50 (tedy přibližně s poloviční rychlostí oproti hráči).
Povšimněte si, že se již na dvou místech pracuje s rychlostí. Prvně je možné nastavit rychlost při ovládání hráče (výchozí hodnotou je 100 jednotek) a podruhé jsme nastavili rychlost sledujícího NPC (spritu). A samozřejmě na závěr si můžeme vše otestovat v emulátoru herní konzole:
Obrázek 30: Protivník sledující hráče v emulátoru herní konzole.
14. Nastavení počáteční pozice hráče i protivníka
Do hry přidáme v rámci dalších kapitol test na kolizi hráče s NPC. Ovšem tyto dva sprity ve skutečnosti kolidují již na začátku hry, protože oba sprity jsou umístěny doprostřed herního světa. To ovšem můžeme změnit, a to dosti triviálně – přidáním dvojice bloků „set sprite position“, přičemž se x-ové a y-ové pozice spritů sice zapisují číselně, ale vybírají se interaktivně v k tomu určených dialozích. Podívejme se, jak lze zajistit, aby se hráč objevil v pravém dolním rohu zatímco NPC v levém horním rohu:
Obrázek 31: Přidání dvou bloků, které zajistí nastavení pozice hráče i protivníka.
Přičemž výsledek by měl po zobrazení na herní konzoli vypadat následovně:
Obrázek 32: Výchozí pozice obou spritů v herní scéně nyní bude vypadat následovně.
15. Přejmenování obou spritů
Jména spritů zvolená prostředím, tedy mySprite a mySprite2, nejsou ideální. Ovšem jejich přejmenování je snadné, postačuje k tomu vybrat položku v kontextovém menu zobrazeném po kliknutí na jméno spritu. Zajímavé je, že se sprite nemůže jmenovat ani Player ani Enemy, protože tento identifikátor je použit v atributu Kind (což znamená, že se interně používá jediný jmenný prostor). Proto sprity přejmenujeme na player1 a enemy1. K přejmenování dojde automaticky ve všech blocích, kde se dané jméno vyskytuje:
Obrázek 33: První sprite byl přejmenován na „player1“, druhý sprite na „enemy1“.
16. Detekce kolize spritů a definice podmínky pro ukončení hry (game over)
Nyní se pokusíme o přidání sofistikovanější podmínky – budeme detekovat situaci, kdy protivník dostihne hráče. V takovém případě by hra měla skončit prohrou hráče. Pro detekci kolize spritů existuje v MakeCode Arcade speciální blok, který vlastně představuje handler události typu „kolize spritů“. Akce definované v tomto bloku budou zavolány po kolizi. My přidáme jedinou akci, a to konkrétně akci pro ukončení hry, takže výsledek bude vypadat následovně:
Obrázek 34: Blok, v němž lze reagovat na událost vzniklou ve chvíli, kdy dojde k detekci kolize spritů.
A takto se bude chovat výsledná hra v emulátoru herní konzole:
Obrázek 35: Po srážce spritů se zobrazí informace o konci hry.
17. Přidání počitadla životů a změna podmínky pro ukončení hry
Pojďme dále. Upravíme program tak, aby po kolizi spritů došlo ke snížení počtu zbývajících životů hráče a hra byla ukončena skutečně až po dosažení nuly. Počitadlo životů je v MakeCode Arcade realizováno několika bloky, které použijeme nyní. Především v inicializační části doplníme inicializaci počtu životů (poslední blok):
Obrázek 36: Modifikace hlavního bloku hry – nastavení počtu životů.
Dále upravíme handler události typu „kolize spritů“. Počitadlo životů zde snížíme o jedničku, ovšem navíc posuneme oba sprity (hráče i NPC) na výchozí pozice (jinak by se tento blok ihned zavolal podruhé atd.):
Obrázek 37: Po kolizi spritů se nejenom sníží počet životů, ale sprity se posunou do výchozí pozice.
Přidáme handler další události, tentokrát události typu „dosaženo 0 životů“. Zde je situace jednoduchá – hra končí prohrou hráče:
Obrázek 38: Blok, v němž lze reagovat na událost vzniklou ve chvíli, kdy se dosáhne nulového počtu životů.
Samotné počitadlo životů se zobrazuje jako série srdíček v levém horním rohu obrazovky emulátoru herní konzole:
Obrázek 39: Počitadlo životů je zobrazené v levém horním rohu.
18. Přidání počitadla skóre
A konečně ještě do hry přidáme počitadlo skóre. Skóre se bude zvyšovat postupně každých 100ms, což znamená, že skóre bude tím vyšší, čím déle se hráč dokáže vyhnout NPC (což není příliš zajímavá hra, uznávám). Do kódu hry přidáme ještě jeden speciální blok, tentokrát se jedná o handler události typu „uběhlo dalších 100ms“. Zde budeme skóre zvyšovat:
Obrázek 40: Další speciální blok, který je spuštěný každých 100ms.
Po spuštění hry v emulátoru herní konzole se skóre bude zobrazovat v pravém horním rohu:
Obrázek 41: Skóre je zobrazeno v pravém horním rohu.
19. „Kód“ výsledné hry
Hra představená v rámci předchozích kapitol by například při použití PyGame či PyGame Zero nebo LÖVE měla přibližně 60–80 řádků. Při použití nízkoúrovňovější knihovny typu SDL je nutné počítat spíše se stovkami řádků. V MakeCode Arcade se vše vejde na jedinou obrazovku:
Obrázek 42: Takto vypadá kód výsledné hry v „blokové“ podobě.
Úplný zdrojový kód hry v Pythonu je dostupný na adrese https://github.com/tisnik/8bit-fame/blob/master/MakeCode%20Arcade/game.py. Zkrácený kód (mez dat o spritech) vypadá následovně:
def on_life_zero():
game.game_over(False)
info.on_life_zero(on_life_zero)
def on_on_overlap(sprite, otherSprite):
info.change_life_by(-1)
enemy1.set_position(20, 10)
player1.set_position(153, 92)
sprites.on_overlap(SpriteKind.player, SpriteKind.enemy, on_on_overlap)
enemy1: Sprite = None
player1: Sprite = None
scene.set_background_image(img("""
"""))
player1 = sprites.create(img("""
. . . . . . f f f f . . . . . .
. . . . f f f 2 2 f f f . . . .
. . . f f f 2 2 2 2 f f f . . .
. . f f f e e e e e e f f f . .
. . f f e 2 2 2 2 2 2 e e f . .
. . f e 2 f f f f f f 2 e f . .
. . f f f f e e e e f f f f . .
. f f e f b f 4 4 f b f e f f .
. f e e 4 1 f d d f 1 4 e e f .
. . f e e d d d d d d e e f . .
. . . f e e 4 4 4 4 e e f . . .
. . e 4 f 2 2 2 2 2 2 f 4 e . .
. . 4 d f 2 2 2 2 2 2 f d 4 . .
. . 4 4 f 4 4 5 5 4 4 f 4 4 . .
. . . . . f f f f f f . . . . .
. . . . . f f . . f f . . . . .
"""),
SpriteKind.player)
controller.player1.move_sprite(player1)
enemy1 = sprites.create(img("""
. . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . .
. . . . . . . . . b 5 5 b . . .
. . . . . . b b b b b b . . . .
. . . . . b b 5 5 5 5 5 b . . .
. b b b b b 5 5 5 5 5 5 5 b . .
. b d 5 b 5 5 5 5 5 5 5 5 b . .
. . b 5 5 b 5 d 1 f 5 d 4 f . .
. . b d 5 5 b 1 f f 5 4 4 c . .
b b d b 5 5 5 d f b 4 4 4 4 b .
b d d c d 5 5 b 5 4 4 4 4 4 4 b
c d d d c c b 5 5 5 5 5 5 5 b .
c b d d d d d 5 5 5 5 5 5 5 b .
. c d d d d d d 5 5 5 5 5 d b .
. . c b d d d d d 5 5 5 b b . .
. . . c c c c c c c c b b . . .
"""),
SpriteKind.enemy)
player1.set_position(153, 92)
enemy1.set_position(20, 10)
enemy1.follow(player1, 59)
info.set_life(3)
info.set_score(0)
def on_update_interval():
info.change_score_by(1)
game.on_update_interval(100, on_update_interval)
Podobně se můžeme podívat na kód transformovaný do JavaScriptu. Jeho plná verze je dostupná na adrese https://github.com/tisnik/8bit-fame/blob/master/MakeCode%20Arcade/game.js. Zkrácená verze tohoto kódu vypadá následovně:
info.onLifeZero(function on_life_zero() {
game.gameOver(false)
})
sprites.onOverlap(SpriteKind.Player, SpriteKind.Enemy, function on_on_overlap(sprite: Sprite, otherSprite: Sprite) {
info.changeLifeBy(-1)
enemy1.setPosition(20, 10)
player1.setPosition(153, 92)
})
let enemy1 : Sprite = null
let player1 : Sprite = null
scene.setBackgroundImage(img`
`)
player1 = sprites.create(img`
. . . . . . f f f f . . . . . .
. . . . f f f 2 2 f f f . . . .
. . . f f f 2 2 2 2 f f f . . .
. . f f f e e e e e e f f f . .
. . f f e 2 2 2 2 2 2 e e f . .
. . f e 2 f f f f f f 2 e f . .
. . f f f f e e e e f f f f . .
. f f e f b f 4 4 f b f e f f .
. f e e 4 1 f d d f 1 4 e e f .
. . f e e d d d d d d e e f . .
. . . f e e 4 4 4 4 e e f . . .
. . e 4 f 2 2 2 2 2 2 f 4 e . .
. . 4 d f 2 2 2 2 2 2 f d 4 . .
. . 4 4 f 4 4 5 5 4 4 f 4 4 . .
. . . . . f f f f f f . . . . .
. . . . . f f . . f f . . . . .
`, SpriteKind.Player)
controller.player1.moveSprite(player1)
enemy1 = sprites.create(img`
. . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . .
. . . . . . . . . b 5 5 b . . .
. . . . . . b b b b b b . . . .
. . . . . b b 5 5 5 5 5 b . . .
. b b b b b 5 5 5 5 5 5 5 b . .
. b d 5 b 5 5 5 5 5 5 5 5 b . .
. . b 5 5 b 5 d 1 f 5 d 4 f . .
. . b d 5 5 b 1 f f 5 4 4 c . .
b b d b 5 5 5 d f b 4 4 4 4 b .
b d d c d 5 5 b 5 4 4 4 4 4 4 b
c d d d c c b 5 5 5 5 5 5 5 b .
c b d d d d d 5 5 5 5 5 5 5 b .
. c d d d d d d 5 5 5 5 5 d b .
. . c b d d d d d 5 5 5 b b . .
. . . c c c c c c c c b b . . .
`, SpriteKind.Enemy)
player1.setPosition(153, 92)
enemy1.setPosition(20, 10)
enemy1.follow(player1, 59)
info.setLife(3)
info.setScore(0)
game.onUpdateInterval(100, function on_update_interval() {
info.changeScoreBy(1)
})
20. Odkazy na Internetu
- Makecode (pro Micro:bit)
https://makecode.microbit.org/ - Makecode Arcade
https://arcade.makecode.com/ - Micro Bit
https://en.wikipedia.org/wiki/Micro_Bit - MakeCode
https://www.microsoft.com/en-us/makecode - Scratch: oficiální stránka projektu
http://scratch.mit.edu/ - Scratch: galerie projektů vytvořených ve Scratchi
http://scratch.mit.edu/galleries/browse/newest - Scratch: nápověda (lokální odkaz po instalaci Scratche)
file:///usr/share/scratch/Help/en/index.html - Scratch: obrazovky nápovědy (lokální odkaz po instalaci Scratche)
file:///usr/share/scratch/Help/en/allscreens.html - Scratch (Wikipedie CZ)
http://cs.wikipedia.org/wiki/Scratch - Scratch (programming language)
http://en.wikipedia.org/wiki/Scratch_(programming_language) - Mitchel Resnick (Wikipedia EN)
http://en.wikipedia.org/wiki/Mitchel_Resnick - Domácí stránka Mitchela Resnicka
http://web.media.mit.edu/~mres/ - Stránka projektu Small Basic
https://smallbasic-publicwebsite.azurewebsites.net/ - List of Programs Made with Small Basic
https://social.technet.microsoft.com/wiki/contents/articles/14013.list-of-programs-made-with-small-basic.aspx - Expert to Expert: The Basics of SmallBasic
https://channel9.msdn.com/blogs/charles/expert-to-expert-the-basics-of-smallbasic - The Developer’s Reference Guide to Small Basic
https://social.technet.microsoft.com/wiki/contents/articles/16767.the-developers-reference-guide-to-small-basic.aspx - Small Basic – Talking to Raspberry Pi
https://techcommunity.microsoft.com/t5/small-basic-blog/small-basic-talking-to-raspberry-pi/ba-p/337844 - Small Basic – Arduino
https://techcommunity.microsoft.com/t5/small-basic-blog/small-basic-arduino/ba-p/337762 - Small Basic + micro:bit
https://techcommunity.microsoft.com/t5/small-basic-blog/small-basic-micro-bit/ba-p/1968424 - #1 Learn Small Basic Programming – Introduction
https://www.youtube.com/watch?v=e_BaEPCa8OQ - #2 Learn Small Basic Programming – Input, Output & Variables
https://www.youtube.com/watch?v=VWekYLa33OI - #3 Learn Small Basic Programming – String Concatenation
https://www.youtube.com/watch?v=iWvIaOaT474 - Small Basic – The Programmer's Guide
https://www.i-programmer.info/programming/other-languages/5196-small-basic-the-programmers-guide.html - Rosetta Code: Category:Microsoft Small Basic
https://rosettacode.org/wiki/Category:Microsoft_Small_Basic - The Top 5 Online IDEs for In-Browser Development
https://www.developer.com/cloud/top-online-ide/ - Online IDE (Beta)
https://www.online-ide.com/ - 12 Best Online IDE and Code Editors to Develop Web Applications
https://geekflare.com/online-code-editors/ - Try F#
https://try.fsharp.org/ - Fable.io
https://fable.io/repl3/ - FSBolero
https://tryfsharp.fsbolero.io/ - The Go Playground
https://go.dev/play/ - TryAPL Version 3.6.1
https://tryapl.org/ - Replit
https://replit.com/ - Ghostwriter
https://replit.com/site/ghostwriter - QBJS
https://boxgm.itch.io/qbjs - The Rust playground
https://play.rust-lang.org/ - Python playground
https://lwebapp.com/en/python-playground - Quite BASIC
http://www.quitebasic.com/prj/math/mandelbrot/ - Notebook interface
https://en.wikipedia.org/wiki/Notebook_interface
ČLÁNKY DO MAILU