Vyskúšal som si Vibe Coding: Ako som pomocou umelej inteligencie vytvoril GTA

2025-04-11

Autor: miki

Dĺžka čítania: 8:19 min

EN

DE

Ak ste sa v poslednej dobe pohybovali na platforme X, možno ste už zachytili nový trend s názvom Vibe Coding. Ide o nový prístup k vývoju softvéru, keď namiesto manuálneho písania zdrojového kódu tvorca len inštruuje umelú inteligenciu k implementácii nápadov a riešeniu problémov. Namiesto písania kódu sa rola vývojára presúva k dizajnu, plánovaniu, formulácii jasných pokynov a posudzovaniu kvality.

V tejto novej disciplíne sa nedávno konal aj vôbec prvý „Vibe Jam„, teda hackathon / game jam zameraný na tvorbu hier pomocou Vibe Coding prístupu. Keďže ku programovaniu som sa pôvodne dostal práve vďaka záujmu o tvorbu hier, s nadšením som sa do neho zapojil. V tomto článku sa chcem podeliť o svoje čerstvé skúsenosti z Vibe Jamu aj o môj osobný pohľad na fenomén Vibe Codingu—kto z neho najviac vyťaží, aké sú jeho silné a slabé stránky, a či je reálne nahradiť ním tradičný spôsob programovania.

The hottest new programming language is English

Andrej Karpathy

Moja skúsenosť s Vibe Jamom

Keďže nejaké skúsenosti s tvorbou hier som už mal, v rámci jamu som sa pustil do 3D hry vo veľkom štýle. Rozhodol som sa vytvoriť hru, ktorá mala byť poklonou hre Grand Theft Auto: Vice City na ktorej som ako dieťa vyrastal a ktorá pre mňa navždy zostane zdrojom intenzívnej nostalgie. Samozrejme, pôvodnú hru a jej herné možnosti som osekal. Vo svojej hre som sa zameral len na jednoduché taxikárske misie. Nedá sa však povedať, že by išlo o úplne banálnu záležitosť.

Samotný základ hrateľnosti—fyzikálne založený jazdný model auta hneď v úvode potrápil nielen mňa, ale aj samotnú AI. Jazykové modely už rozumejú kódu, no stále majú rezervy vo vnímaní fyzikálneho sveta, pozícií, smerov, osí a podobne. V počiatkoch vývoja som sa tak stretával s celkom vtipnými situáciami:

  • kolesá boli otočené o 90° a pri snahe odbočiť sa otáčali po nesprávnej osi
  • striedaním plynu a brzdy bolo možné auto „rozkývať“ a pri správnom načasovaní, keď bol predok auta natočený smerom nahor, bolo možné vystreliť auto „až do vesmíru“
  • karoséria „nestíhala“ za ponáhľajúcimi sa kolesami; z nejakého dôvodu bola karoséria asi 3x pomalšia než kolesá (možno za to mohla jej hmotnosť?)
  • auto sa už pri mierne vyšších rýchlostiach pri nepatrnom odbočení prevracalo na strechu (s týmto som zápasil fakt dlho 😩).

Finálny jazdný model a ovládanie som nakoniec dosiahol až na štvrtý pokus. To znamená, že 4 krát som projekt začínal úplne od nuly, v prázdnom repozitári. Aby som však voči jazykovým modelom nebol neprimerane kritický, to že som sa nakoniec dostal k výsledku, s ktorým som bol spokojný, považujem pri tak komplexnej úlohe stále za malý zázrak. A keď som mal tú najnáročnejšiu časť za sebou, vývoj ďalej napredoval už podstatne hladšie (hoci stále sa našli oblasti, ktoré si vyžadovali určitú dávku trpezlivosti).

Čo je však hlavné, všetky činnosti, ktorým som sa behom vývoja venoval, od implementácie nápadov, cez generovanie obrázkov, hudby a zvukov som si po celý čas užíval. Rýchlosť implementácie bola vďaka AI nástrojom extrémne odmeňujúca a jediné, čo ma nútilo zastaviť sa bývala len neskorá nočná hodina.

  • Hra beží v bežných webových prehliadačoch, čisto na strane klienta. Jej základ je postavený na knižnici Three.js určenej na renderovanie 3D objektov prostredníctvom JavaScriptu a na knižnici Cannon-es, ktorá Three.js rozširuje o základný fyzikálny engine. Okrem týchto dvoch knižníc projekt využíva už len Vite na buildovanie projektu. Projekt využíva modulárny, objektovo-orientovaný prístup.

  • Mapa herného sveta bola vytvorená manuálne. Najskôr som vytvoril „pôdorys“ mapy v grafickom editore Adobe Illustrator, ktorý som do hry importoval vo formáte SVG. Budovy a herné assety som potom porozmiestňoval prostredníctvom Three.js online editoru vo forme primitívnych kvádrov a cylindrov. O rozmiestnenie okien na budovách a náhodný výber textúr pre billboardy a iné objekty sa už postarala samotná hra. Množstvo času som však ešte s AIčkou musel venovať práci na scriptoch zabezpečujúcich obojsmernú konverziu dát, keďže hra a three.js editor používajú odlišnú dátovú reprezentáciu. Mapu som priebežne iteroval a dopĺňal o nové typy objektov.
  • Na deploy a hosting som využil službu Netlify, vďaka ktorej je tento proces extrémne jednoduchý a úplne zadarmo. Hudbu som sa však pre istotu rozhodol streamovať z externej služby SoundCloud, aby som predišiel zbytočne vysokému prenosu dát. AI integráciu s touto službou zvládla na jednotku.

  • Tvorbe hry som venoval dokopy 65 hodín počas obdobia cca 2 týždňov. Platby za AI služby, ktoré som behom týchto dvoch týždňov využil, sa mi nazbierali na 72€. Rozhodol som sa však nešetriť. Priplatil som si za prístup k najlepším modelom bez obmedzení, no veľmi ďaleko sa dnes dá zájsť už aj pri nulových nákladoch.

Najväčšie prekvapenia: hudba, zvuky a billboardy

Dopomáhanie si AI nástrojmi pri programovaní pre mňa nie je úplnou novinkou. Hoci prvotné verzie nástroja GitHub Copilot som považoval skôr za otravné ako užitočné, vždy som sa proaktívne snažil o zapojenie umelej inteligencie do svojej práce. V úvode najmä pri brainstormovaní nápadov, konzultáciách optimálnych riešení a učení sa nových technológií. No od čias predstavenia tzv. „AI-first“ editoru Cursor AI a LLM modelov od spoločnosti Anthropic (aktuálne je to Sonnet 3.7) vidím, že napríklad taká realizácia víkendových hobby projektov nebola ešte nikdy jednoduchšia a rýchlejšia. Najväčším novým prekvapením pre mňa tak tento krát boli iné oblasti.

  • AI nástroje použiteľné pri programovaní už dávno nie sú limitované schopnosťou automatického dokončenia aktuálneho riadku alebo jednoduchého bloku kódu.

  • Kľúčovými novinkami sú najmä chatovacie možnosti priamo v editore, schopnosť AI editovať viacero súvisiacich súborov naraz, jednoduché prehliadanie a schvaľovanie navrhovaných zmien, či pohodlné pridávanie kontextu pomocou znaku @. AI nástroje tiež zvládajú využívať kontext z IDE. Dokážu si vyhľadať tie súbory, ktoré práve potrebujú, keď sa vo vygenerovanom kóde objavia nové linting varovania, dokážu ich po sebe opraviť, a dokážu si aj sami spúšťať testy a akýkoľvek iný kód (ide o tzv „agentic behavior“).

  • Za významnú akceleráciu v tejto sfére sa zaslúžil najmä editor Cursor AI, ktorý vznikol ako fork VS Code so zámerom integrovať AI do jadra editora („AI-first“). Rýchlo po ňom začali vznikať aj ďalšie veľmi podobné editory (Windsurf, Trae a ďalšie) a aj plugin GitHub Copilot sa snaží novovzniknutú konkurenciu dobehnúť. JetBrains prostredia zatiaľ bohužiaľ stále zaostávajú.

  • Pokrok nastal aj na úrovni samotných jazykových modelov (LLM). Zásadne sa zvýšila presnosť a relevantnosť návrhov kódu vďaka novej generácii modelov ako Anthropic Sonnet (aktuálne 3.7) alebo najnovšie aj Gemini 2.5 Pro. Tieto modely lepšie chápu kontext aj komplexnejšie zadania, čo znižuje potrebu manuálnych zásahov programátora.

  • Postupne sa tiež začína presadzovať nový MCP protokol, ktorý má potenciál rozšíriť schopnosti týchto nástrojov o prístup k úplne novým dátam, službám a nástrojom. Zjednodušene si to môžeme predstaviť ako akýsi unifikovaný API štandard pre AI agentov, vďaka ktorému si budú môcť priamo z editora vyžiadať napríklad vygenerovanie grafických assetov (a čokoľvek iné čo nás napadne).

Na hernej mape som chcel porozmiestňovať billboardy humorne odkazujúce na stereotypy 80-tych rokov. Pôvodne som si myslel, že pomocou modelu Stable Diffusion si vygenerujem podklady do pozadia billboardov, ktoré následne trochu doretušujem a doplním o texty. Približne v polovici jamu však vyšiel upgrade generovania obrázkov pomocou OpenAI modelu GPT-4o (asi ste už stihli zachytiť tzv. „Ghibli“ trend). A ten tento môj plán totálne zmietol zo stola. ChatGPT si nakoniec so všetkým poradil úplne sám (vrátane nápadov na obsah billboardov). A stále som netušil, že ten najväčší šok ma ešte len čaká.

Ten som zažil pri generovaní hudby. Hudbu som vždy vnímal ako vrchol audiovizuálneho zážitku. V mojom svete neexistuje perfektný film, bez perfektnej hudby. Dokonca ani perfektná hra, bez perfektnej hudby. Hudba pre mňa predstavuje niekedy možno aj 50% z toho, či sa atmosféra nejakého filmu alebo hry podarila alebo nie. Zároveň som sa zmieril s tým (v teoretickej rovine… nie že by som mal až tak vysoké ambície), že do čohokoľvek by som sa kedy pustil, nech už by išlo o akýkoľvek kreatívny smer, nikdy nedosiahnem perfektnú atmosféru bez toho, aby som si licencoval skladby od Zimmera alebo zaplatil vokálne najlepšie obdarených spevákov a speváčky.

Po tomto jame zatiaľ tento svoj názor nemením. Nikdy som však nečakal, že nemajetný a hudobne negramotný jednotlivec bude mať možnosť sa k tejto „perfektnej atmosfére“ (čo sa hudby týka) čo len priblížiť. A to sa zmenilo. Po svojom zoznámení sa s nástrojom na generovanie hudby Suno AI som bol úplne odpálený. Na niekoľko dní som prerušil práce na hre a venoval sa len hudbe. Ak ste zvedaví, menší výber, ktorý som nakoniec aj využil v hre, si môžete vypočuť tu.

A na záver, moje očakávania boli prekonané aj v súvislosti s tvorbou zvukových efektov, na čo som využil nástroj ElevenLabs. Tie si už niekedy vyžadovali určité dodatočné úpravy, no skôr alebo neskôr sa mi podarilo dostať sa ku všetkému, čo som potreboval. Navyše pomocou nástrojov na generovanie kódu sa získané zvuky dali implementovať veľmi rýchlo, a to aj s prepracovaným programačným ovládaním (hlasitosť hlasov podľa vzdialenosti, simulovanie akcelerácie a prevodov na konštantnom zvuku motora…). Podobne ako hudba, aj zvuky majú významný dopad na atmosféru hry a to že som sa k ním dostal takto jednoducho je pre mňa podobne nepochopiteľné.

Naspäť k Vibe Codingu... takže programovať už len takto?

Moja skúsenosť s „vibe codingom“ bola počas tohto hackathonu fantastická a viem, že sa ho úspešne zúčastnili aj ľudia bez predošlých programátorských skúseností. Stále však nie sme v bode, aby neprogramátori dokázali prevziať agendy programátorských oddelení na projektoch presahujúcich víkendové hobby prototypy.

Trend Vibe Codingu so sebou priniesol aj príbehy nadšených „novo-programátorov“, ktorých prekvapili nečakané účty za externé API služby, stali sa obeťami hackerských útokov, nechtiac si premazali databázy so skutočnými platiacimi zákazníkmi, alebo sa im po novej zmene jednoducho zrútil kód (keďže nemali informáciu o existencii version control systémov).

Vibe Coding žiari najmä pri vývoji takzvaného „throwaway“ softvéru. Ide o softvér, pri ktorom nároky na kvalitu a bezpečnosť nie sú potrebné. V praxi sú to tak rôzne prototypy, proof of concepty, pomocné scripty na automatizáciu, softvér a softvérové rozšírenia vytvorené na mieru konkrétnej osoby, alebo rôzne hackathony, čo bol aj prípad mojej hry.

Video je zrýchlené, jeho pôvodná dĺžka bola 22 minút. Finálnu hru z videa si môžete vyskúšať na tomto odkaze.

Najmä v začiatkoch projektu býva Vibe Coding veľmi rýchly a odmeňujúci. Bez premysleného postupu a dôslednej kontroly kódu sa však narastajúci projekt stáva čoraz menej a menej manažovateľným (o téme udržateľného vývoja sme už písali). Jazykové modely majú tendenciu prichádzať s prvoplánovými riešeniami a namiesto opráv príčin niekedy len prekrývajú problémy záplatami na záplatách (hoci pre férovosť, od svojich počiatkov sa už výrazne zlepšili).

Z týchto dôvodov je obrovskou pridanou hodnotou, keď s týmito nástrojmi pracujú už skúsení programátori, ktorí AIčke „stíhajú“—vývojári ktorí AI dokážu upozorniť na nedostatky a nasmerovať ju na potencionálne lepšie riešenia. AI si nechá poradiť, ale musí mať pri sebe niekoho, kto to dokáže. A musí mať pri sebe aj niekoho, kto si dokáže v hlave udržať „big picture“. Niekoho, kto vidí celý kontext naraz, niekoho, kto vidí aj niekoľko krokov napred, a niekoho, kto rozumie cieľom projektu a potrebám jeho užívateľov.

Práca s nástrojmi umelej inteligencie si teda vyžaduje aj obozretnosť a seba-disciplínu (aby programátor príliš nezlenivel). To, čo za nás AIčka tak skoro zatiaľ neprevezme, je totiž zodpovednosť za výsledok. Táto zodpovednosť je zatiaľ stále na nás. Zatiaľ 😶

Ak by ste si chceli vyskúšať hru, na ktorej som na Vibe Jame pracoval, urobiť tak môžete na tomto odkaze.

A ak by ste si chceli vyskúšať sami podobný projekt, či už herný alebo neherný, zrealizovať, len smelo do toho! Nikdy to nebolo jednoduchšie. Budeme veľmi radi ak sa s nami podelíte o svoje výsledky, názory alebo otázky na sociálnych sieťach!

Tomáš Bencko

Autorom článku je Tomáš, frontend developer so zameraním na React, Vue.js a TypeScript. Jeho úlohou je vytvárať moderné a škálovateľné frontend riešenia, pričom zvláda nielen vývoj, ale aj jemné detaily dizajnu. Okrem práce pre klientov neustále hľadá spôsoby, ako zefektívniť prácu v tíme, hrá sa s AI a automatizáciou, a prináša nové nápady, ktoré posúvajú projekty aj kolegov vpred.

Ďalšie články

Coder’s Corner #5 – Marec

Aj marec priniesol množstvo zaujímavých noviniek pre vývojárov a kreatívcov. Pozreli sme sa na najnovšie vylepšenia vo frameworkoch Elementor 3.28 a Angular 19.2, nechýba ani