Vytlačiť celú knihuVytlačiť celú knihu

MakeCode Arcade Kniha

Portál: Virtuálna Univerzita Mateja Bela
Kurz: Zábavné programovanie
Kniha: MakeCode Arcade Kniha
Vytlačil(a): Hosťovský používateľ
Dátum: piatok, 5 júna 2026, 13:17

Obsah

1. Opis prostredia

MakeCode Arcade je online platforma, ktorá umožňuje vývoj hier priamo v internetovom prehliadači. Po prihlásení sa môžete začať s tvorbou hier pomocou intuitívneho blokového rozhrania, ktoré nevyžaduje predchádzajúce skúsenosti s programovaním. Všetky projekty sa vytvárajú priamo v prehliadači, takže nie je potrebné sťahovať žiadny ďalší softvér, pokiaľ neplánujete exportovať hru na zariadenie.

Rozhranie:

  • Panel blokov: Na ľavej strane sa nachádzajú bloky pre programovanie logiky a správania hry.
  • Nástroje na tvorbu spriteov a tilemap: Vľavo je editor pre tvorbu grafiky, kde môžete vytvárať postavy a prostredie vašich hier.
  • Simulátor: Umožňuje okamžité testovanie hier, ktoré vytvárate, bez potreby exportovania alebo inštalácie.

 

Kde nájdem MakeCode Arcade :

Čo môžeme robiť v tomto prostredí?

  • Tvorba hier: Vytvárajte 2D arkádové hry, ako sú skákačky, akčné hry a ďalšie.
  • Prototypy: Rýchlo vytvorte prototypy hier a experimentujte s rôznymi hernými mechanizmami.
  • Aplikácie: Môžete vytvárať plnohodnotné herné aplikácie, ktoré sú exportovateľné na rôzne zariadenia alebo môžu bežať priamo v prehliadači.

Podporované programovacie jazyky:

  • Blokové programovanie(skratch): Primárny spôsob programovania v MakeCode Arcade.
  • JavaScript/TypeScript: Pre pokročilých používateľov, ktorí chcú písať kód priamo.

2. História vývoja MakeCode Arcade

 

  1. Začiatky v Microsoft MakeCode (2017):
    • V roku 2017 Microsoft spustil MakeCode, platformu na učenie programovania, ktorá využívala interaktívne projekty.
    • Pôvodne sa zameriavala na podporu zariadení ako micro:bit alebo Circuit Playground, pričom cieľom bolo naučiť používateľov základom programovania a práce s fyzickými zariadeniami.
  2. Vznik MakeCode Arcade (2019):
    • V roku 2019 Microsoft predstavil MakeCode Arcade, ktorý sa zameriaval na tvorbu hier inšpirovaných klasickými arkádovými hrami.
    • Platforma umožnila používateľom vytvárať 2D pixelové hry s jednoduchým ovládaním, ktoré využívajú blokové programovanie, ale neskôr sa pridala aj podpora pre JavaScript a TypeScript pre pokročilých programátorov.
  3. Podpora komunity a hardvéru:
    • MakeCode Arcade sa rýchlo stalo obľúbeným nástrojom, pretože je veľmi prístupné, a to nielen pre začínajúcich programátorov, ale aj pre tých, ktorí sa zaujímajú o vývoj hier na rôznych hardvérových platformách (napríklad Adafruit a iné vývojové dosky).
    • Tvorcovia hier mohli svoje projekty exportovať na rôzne zariadenia alebo jednoducho zdieľať svoje hry online.
  4. Súčasnosť

    MakeCode Arcade naďalej existuje ako skvelý nástroj pre začínajúcich vývojárov hier, pričom umožňuje vytvárať všetky typy arkádových hier, od jednoduchých platformoviek až po zložité akčné hry. Je to veľmi obľúbený nástroj v školách a medzi mladými ľuďmi, ktorí sa chcú naučiť programovať zábavným spôsobom.

3. Popis kategórií blokov a ich funkcií

 

1. Sprites (Postavy a objekty)

Bloky na prácu s hernými postavami a objektmi. Objekty sa delia na Singleplayer a Multiplayer a teda hry sa dajú vytvárať aj pre viac hráčov.

  • Set mySprite to [kind] of sprite: Vytvorí postavu (sprite) a umožní jej priradiť grafiku a vlastnosti.
  • Set position to [x, y]: Nastaví konkrétnu pozíciu postavy na obrazovke.
  • Set velocity to [vx, vy]: Určuje rýchlosť a smer pohybu postavy.
  • Set mySprite to stay in screen: Nedovolí objektu prejsť mimo obrazovky.
  • Set Projectile to Projectile...: Vytvára objekt inej skupiny ako mySprite
  • Overlap events (on sprite of kind overlaps other sprite): Detekuje, keď sa dve postavy dotknú – ideálne na zber bodov alebo zneškodnenie nepriateľov.

2. Controller (Ovládanie)

Bloky na spracovanie vstupov od hráča (klávesnica, tlačidlá).

  • Move mySprite with buttons: Umožňuje hráčovi ovládať postavu pomocou šípok.
  • On A button pressed: Spustí akciu, keď hráč stlačí tlačidlo A. Možnosť zmeniť na tlačidlo B (napr. výstrel, skok)

3. Game (Hra)

Bloky na ovládanie celkového priebehu hry.

  • Game update: slúžia ako nekonečná slučka obnovovania nejakého javu.
  • Splash a ask: slúžia na krátku komunikáciu s hráčom.
  • Set long text: slúžia na dlhšiu komunikáciu s hráčom (dej).
  • Game over: Ukončí hru a zobrazí správy ako „Game Over“ alebo „Victory!“.

4. Info (Informácie a skóre)

Bloky na správu herných ukazovateľov, ako sú skóre alebo životy.

  • Set score to [value]: Nastaví počiatočné skóre hráča.
  • Change life by [value]: Pridáva alebo odoberá životy hráča.
  • Change score by [value]: Pridáva alebo odoberá skore hráča.

5. Scene (Prostredie hry)

Bloky na úpravu pozadia a prostredia hry.

  • Set background color to: Nastaví farbu pozadia.
  • Set background imagine to : Nastaví obrazok pozadia.
  • Camera: Nastaví cameru podľa výberu.
  • Set tilemap to: Umožňuje vytvoriť prostredie hry pomocou dlaždíc (tilemapy).
  • Place sprite on tile: Umiestni postavu na konkrétnu dlaždicu.
  • Locations: Upravuje možnosti umiestnenia objektov.

6. Loops (Cyklus)

Bloky na opakovanie určitých činností.

  • Forever: Opakovane neustále vykonáva všetko, čo je umiestnené vnútri bloku.
  • Repeat [x] times: Vykoná príkazy určitý počet opakovaní.
  • While [condition]: Opakuje činnosť, kým je splnená podmienka.
  • Pause a Break: Pozastavenie alebo ukončenie cyklusu 

7. Logic (Riadenie)

Bloky na podmienky a riadenie toku programu.

  • If...then: Vykoná príkazy, ak je podmienka pravdivá.
  • If...then...else: Vykoná jednu akciu, ak je podmienka pravdivá, a inú akciu, ak nie je.

8. Math (Matematika)

Bloky na prácu s číslami a výpočtami.

  • [value] + [value]: Sčíta dve hodnoty.
  • Pick random [min] to [max]: Generuje náhodné číslo v zadanom rozsahu – ideálne na náhodné umiestňovanie objektov.

9. Music (Hudba a zvuky)

Bloky na pridanie zvukových efektov a hudby.

  • Play sound [effect]: Prehrá vybraný zvuk (napr. výbuch, bodovanie).
  • Start melody [melody]: Spustí melódiu na pozadí.

10. Variables (Premenné)

Bloky na vytváranie a používanie premenných. Po vytvorení premennej nám vyskočia možnosti

  • Set [variable] to [value]: Nastaví hodnotu premennej.
  • Change [variable] by [value]: Zmení hodnotu premennej o zadanú hodnotu.

11. Functions (Funkcie)

Bloky na vytváranie vlastných funkcií, ktoré môžu obsahovať súbor príkazov. Po vytvorení funkcie sa ti vytvorí možnosť pracovať s funkciami

  • Function [name]: Vytvorí funkciu s názvom a príkazmi, ktoré môžete volať opakovane.

Viac informácií o týchto blokoch nájdete na stránke Control Blocks.

 

4. Extensions

V Microsoft MakeCode Arcade znamenajú "Extensions" (rozšírenia) dodatočné balíčky kódu alebo nástroje, ktoré rozširujú možnosti prostredia. Sú to doplnky, ktoré môžete pridať do svojho projektu, aby ste získali nové bloky, funkcie alebo možnosti, ktoré v základnej verzii MakeCode Arcade nie sú dostupné.

Ako fungujú Extensions v MakeCode Arcade
  • Rozšírenia sú balíčky vytvorené buď komunitou, alebo tímom MakeCode.
  • Môžu pridávať špecializované funkcie, ako napríklad fyziku, podporu pre externé zariadenia, nové typy animácií alebo pokročilé efekty.
  • Rozšírenia fungujú na pozadí ako knižnice napísané v TypeScripte (variant JavaScriptu).
Prečo používať Extensions?

  1. Pridanie nových funkcií:

    • Rozšírenia umožňujú pridávať funkcie, ktoré by inak bolo komplikované alebo nemožné implementovať pomocou základných blokov alebo kódu.

  2. Pripojenie externých zariadení:

    • Niektoré rozšírenia umožňujú interakciu s hardvérom, ako sú micro:bity, Adafruit zariadenia, ovládače alebo senzory.

  3. Jednoduchosť a rýchlosť:

    • Namiesto manuálneho programovania pokročilých funkcií môžete použiť už hotové bloky z rozšírení.

  4. Rozširujúca komunita:

    • Komunita MakeCode neustále vyvíja nové rozšírenia, takže máte prístup k širokej škále nástrojov.
Príklady populárnych Extensions

  1. Arcade Physics:

    • Pridáva realistickú fyziku pre objekty, ako je gravitácia, kolízie a hybnosť.

  2. Tilemaps and Tiling:

    • Rozšírenia na pokročilú prácu s mapami dlaždíc, umožňujúce komplikovanejšie úrovne a prostredia.

  3. Controller Extensions:

    • Pridávajú podporu pre externé ovládače, ako sú Bluetooth gamepady.

  4. Custom Effects:

    • Umožňujú vytváranie vlastných vizuálnych efektov, napríklad dynamických časticových systémov.

  5. External Hardware:

    • Rozšírenia na podporu zariadení ako micro:bit, Adafruit PyBadge alebo Kitronik Game ZIP 64.

5. Jednoduché hry na MakeCode Arcade

Jednoduché hry sú skvelým spôsobom, ako sa naučiť základy programovania a tvorby hier. V prostredí MakeCode Arcade sa hry vytvárajú pomocou intuitívneho blokového rozhrania, ktoré je vhodné aj pre úplných začiatočníkov. Tento proces podporuje kreatívne myslenie, riešenie problémov a poskytuje okamžitú spätnú väzbu prostredníctvom simulátora.

Hry, ktoré vytvoríte, môžu byť jednoduché, napríklad pohyb postavy alebo zbieranie bodov, ale môžu sa postupne rozširovať o nové funkcie a zložitejšie herné mechanizmy. MakeCode Arcade ponúka širokú škálu nástrojov na kreslenie postáv (spriteov), vytváranie herného prostredia a pridávanie logiky, čo robí z tejto platformy ideálne prostredie pre učenie a experimentovanie.

Cieľom tejto sekcie je poskytnúť vám návod na vytvorenie prvých hier, ktoré sú jednoduché na pochopenie a zároveň zábavné na tvorbu. Každá hra bude využívať základné bloky a koncepty, ako sú pohyb, skórovanie, kolízie a ovládanie postáv. Tieto úlohy sú navrhnuté tak, aby ste si osvojili základné princípy tvorby hier a mohli ich postupne rozvíjať podľa vlastnej fantázie.

Počas vypracovania budete mat komentáre na tomto mieste v kóde

5.1. Úloha 1: Pohyb postavy po obrazovke

Cieľ: Naučiť sa ovládať postavu pomocou šípok na klávesnici.

Zadanie:

  1. Vytvorte novú hru.
  2. Nakreslite jednoduchú postavu (napr. smajlíka alebo štvorec).
  3. Použite bloky na to, aby sa postava pohybovala po obrazovke pomocou šípok na klávesnici.

Nápoveda:

  • Použite blok "on start" na vytvorenie sprite postavy.
  • Použite blok "set sprite to sprite ..... of kind Player" z kategórie Sprites.
  • Použite blok "set sprite to move with buttons" z kategórie Sprites.
  • Otestujte pohyb v simulátore.

Rozšírenie:

  • Pridajte jednoduchú prekážku, ktorú treba obísť (napr. statickú kocku).

odpoveď aj s rozšírením tu.

5.2. Úloha 2: Zber bodov

Cieľ: Vytvoriť hru, kde hráč zbiera objekty a získava body.

Zadanie:

  1. Vytvorte postavu, ktorú bude hráč ovládať.
  2. Na obrazovke sa bude objavovať náhodný objekt (napr. hviezda).
  3. Hráč získa bod, keď sa dotkne hviezdy.
  4. Po dotyku sa hviezda premiestni na nové náhodné miesto.

Postup (nápoveda):

  • Použite blok "on sprite of kind overlaps other sprite" na detekciu kontaktu postavy s hviezdou.
  • Použite blok "change score by 1" na zvýšenie skóre.
  • Na presunutie hviezdy použite blok "set position" a nastavte náhodné súradnice.

Rozšírenie:

  • Nastavte časovač (napr. 30 sekúnd) a spočítajte skóre na konci hry.

odpoveď aj s rozšírením tu.

5.3. Úloha 3: Jednoduchá bitka s nepriateľom

Cieľ: Naučiť sa interakciu medzi dvoma postavami.

Zadanie:

  1. Vytvorte postavu hráča (napr. rytiera).
  2. Vytvorte nepriateľa (napr. draka), ktorý sa pohybuje po obrazovke a prichádza vždy oproti hráčovi 
  3. Hráč môže strieľať strely (napr. šípy) a zneškodniť draka.

Postup (nápoveda):

  • Použite blok "on A button pressed" na vytvorenie strely, ktorá sa pohybuje smerom dopredu.
  • Nastavte nepriateľa, aby sa pohyboval pomocou "set velocity".
  • Použite blok "on sprite of kind projectile overlaps other sprite" na detekciu zásahu nepriateľa a jeho odstránenie.

Rozšírenie:

  • Pridajte viac nepriateľov, ktorí sa objavujú náhodne.
  • Znížte život hráča, ak sa ho nepriateľ dotkne.

odpoveď aj s rozšírením tu.

6. Projekty a zadania

Pri zadaniach, ktoré sme odovzdali v rámci projektu, sme vytvárali hry pomocou blokového programovania. Tieto projekty zahŕňali úpravu existujúcich hier alebo tvorbu nových s rôznymi hernými mechanizmami, ako sú:

  • Závodná hra: Vytvorenie jednoduchého závodu s prekážkami, ktoré hráči musia obchádzať

hru aj s možnosťou nakuknúť do hry nájdete tu 

https://arcade.makecode.com/S74031-89859-90815-80506

  • Výpočtová hra:

hru aj s možnosťou nakuknúť do hry nájdete tu

https://arcade.makecode.com/S06282-88473-89568-39214

 

7. MakeCode a HTML

Ako exportovať HTML kód z MakeCode Arcade

  1. Vytvorenie hry:

    • Najprv vytvorte svoju hru pomocou blokov alebo JavaScriptového režimu v MakeCode Arcade.

  2. Export projektu ako HTML:

    • Kliknite na tlačidlo "Publish project".
    • Po publikovaní získate odkaz a možnosť stiahnuť súbor vo formáte .html.

  3. Úprava HTML:

    • Otvorte stiahnutý súbor v ľubovoľnom textovom editore (napríklad Visual Studio Code alebo Notepad++).

Hotové HTML súbory môžete nahrať na svoj web alebo ich poskytnúť na stiahnutie ostatným. Takáto hra bude spustiteľná priamo v prehliadači bez potreby ďalšieho softvéru.

v tomto kroku si môžeme vybrať CODE/EDITING/SIMULATOR, kde code vloží interaktívny obrázok kódu, Editing vloží interaktívne okno, ktoré je ako zmenšenina stránky a simulator vytvorí iba hernú konzolu kde wsa dá daná hra zahrať  

tu môžeme vidieť ukážku CODE

tu môžeme vidieť ukážku EDITING

tu môžeme vidieť ukážku SIMULATOR

8. Tutorialy

Ak hľadáte tutoriály pre MakeCode Arcade, môžete navštíviť oficiálnu stránku s tutoriálmi:Microsoft MakeCode ArcadeNájdete tam rôzne návody, ako napríklad "Chase the Pizza" alebo "Collect the Clovers", ktoré vás krok za krokom prevedú tvorbou jednoduchých hier. Okrem toho je k dispozícii video tutoriál "Getting Started with Microsoft MakeCode Arcade" na YouTube:YouTube.

Toto video vám ukáže, ako začať s MakeCode Arcade a vytvoriť svoju prvú hru. Tieto zdroje sú skvelým spôsobom, ako sa naučiť základy a začať tvoriť vlastné hry v MakeCode Arcade.
Tutoriály si rýchlo dokážete vyskúšať, po prihlásení v MakeCode Arcade a krátkym scrollovaním najdete sekciu Tutorial:

Potom si vyberiete spôsob kódovania.

Následne vám na ľavej strane bude vyskakovať Tréner ktorý vám bude radiť čo a ako máte robiť.

Z vlastnej skúsenosti viem že návody sú funkčne a veľmi nápomocné.

9. Konzoly

Herný ovládač pre MakeCode Arcade je zariadenie, ktoré umožňuje hráčovi pohodlne ovládať hry vytvorené v tomto prostredí. Je prispôsobiteľný a môže byť vyrobený z rôznych komponentov, od jednoduchých tlačidiel až po profesionálne joystickové moduly.

Hlavné časti ovládača:
Tlačidlá:
      • Pohybové tlačidlá (hore, dole, vľavo, vpravo) alebo joystick.
      • Akčné tlačidlá (A, B,) na vykonávanie špecifických úkonov v hre, napr. skok, útok, výber položku.
      • Konzolové tlačidla tlačidla on/off, reset, menu.

LCD Displej- Displej na ktorom môžete vidieť hru.  

Micro usb port-  port na prenos údajov hier a napájania. 

Kitronik ARCADE for MakeCode Arcade | Buy in Australia | CE06778 | 5311 | Core Electronics

9.1. Ako stiahnuť hru do konzoly

Pripojte konzolu k počítaču

  1. Pripojte mikrokontrolér/konzolu k počítaču pomocou USB kábla.
  2. Ak konzola podporuje MakeCode Arcade, po pripojení sa zobrazí ako USB disk (napr. „ARCADE“ alebo „CIRCUITPY“).

Stiahnite hru ako binárny súbor

  1. Kliknite na tlačidlo Download (Stiahnuť) v MakeCode Arcade.
  2. Vyberte správnu možnosť pre svoj mikrokontrolér alebo konzolu:
    • Napríklad Adafruit PyBadge alebo PyGamer.
  3. Editor vygeneruje binárny súbor (napr. arcade.uf2).

Nahrajte súbor na konzolu

  1. Skopírujte alebo presuňte vygenerovaný súbor (.uf2) do USB disku konzoly.
  2. Konzola sa automaticky reštartuje a načíta vašu hru.

Testujte hru

Po nahraní sa hra spustí na konzole. Použite tlačidlá na hranie.

9.2. Kúpa konzoly

kúpu konzoly môžeme realizovať na niekoľkých stránkach:

ruzovka.cz- 47,42€ (17.1.2024)

Kitronik Arcade konzole pre MakeCode

rpishop.cz-1 079 Kč (17.1.2024)

Kitronik Arcade pro MakeCode - RPishop.cz

puhy.cz-1484 Kč (17.1.2024)

Kitronik ARCADE for MakeCode Arcade : Půhy.cz

kitronik.co.uk-£40.80 (17.1.2024)

Kitronik ARCADE for MakeCode Arcade – Kitronik Ltd

9.3. Možnosť vlastného ovládača

Vytvorenie vlastného herného ovládača pre MakeCode Arcade môže byť zábavným projektom, ktorý kombinuje kódovanie a prácu s elektronikou. Tu je návod, ako postupovať:

1. Výber správneho mikrokontroléra

Pre pripojenie vlastného ovládača budete potrebovať mikrokontrolér, ktorý je kompatibilný s MakeCode Arcade. Najpopulárnejšie možnosti sú:

  • Adafruit PyBadge alebo PyGamer
  • Kitronik Arcade ZIP 64
  • Raspberry Pi Pico
  • Arduino Leonardo alebo iné zariadenia s podporou HID (Human Interface Device).
2. Potrebné komponenty

Na vytvorenie ovládača budete potrebovať:

  • Tlačidlá (napríklad spínače typu "push button").
  • Joystick (voliteľné, na ovládanie pohybu).
  • Káble a konektory (na prepojenie súčiastok).
  • Doska plošných spojov (PCB) alebo nepájivé pole.
  • Mikrokontrolér.
  • Box alebo kryt (3D tlač alebo vlastná výroba na zakrytie súčiastok).
  • Napájanie (ak je potrebné).
3. Pripojenie súčiastok

  1. Joystick a tlačidlá:

    • Pripojte joystick k analógovým vstupom na mikrokontroléri (napr. X a Y osi).
    • Tlačidlá pripojte na digitálne piny mikrokontroléra.

  2. Zapojenie obvodov:

    • Na pripojenie tlačidiel použite rezistory (obvykle 10k ohmov) na nastavenie "pull-up" alebo "pull-down" logiky.
    • Každé tlačidlo alebo pohyb joysticku by malo byť spojené s jedným pinom mikrokontroléra.

  3. Programovanie mikrokontroléra:

    • Použite MakeCode Arcade alebo Arduino IDE na naprogramovanie správania ovládača.
    • Napríklad:
      • Keď je tlačidlo stlačené, mikrokontrolér odošle príkaz na ovládanie hry.

4. Programovanie ovládača v MakeCode

  • V MakeCode Arcade môžete priamo využiť bloky na priradenie akcií tlačidlám a joysticku:
    1. Prejdite na MakeCode Arcade.
    2. Použite rozšírenia (Extensions), napríklad rozšírenie pre konkrétny mikrokontrolér (napr. Adafruit PyBadge).
    3. Vytvorte udalosť, ktorá reaguje na stlačenie tlačidla 

 ARCADE Gamepad - Kitronik | DigiKey