Igricu možeš napraviti uz pomoć AI-ja bez ijednog napisanog retka koda: Gemini nacrta slike, ti ih daš Claudeu da od njih složi igru, a igraš je u pregledniku. Prva igriva verzija igrice ispod bila je gotova za manje od 10 minuta. Nešto ovakvo nekad je trebalo par tjedana.
Ovo je igra o kojoj pričam. Klikni na nju jednom pa igraj: lijevi klik puca, desni klik baca granatu. U gornjoj traci je gumb za cijeli zaslon.
Ideja: jedan AI crta, drugi AI gradi
AI za razgovor odlično piše kod male igre, ali ti ne može nacrtati mračni porušeni grad, čopor zombija i laserski top u istom stilu. AI za slike to sve nacrta, ali ne može natjerati slike da se pomiču. Zato sam uzeo dva alata i svakom dao posao koji mu najbolje ide.
- Gemini je nacrtao slike: pozadinu, zombije i oružje.
- Claude je uzeo te slike, izrezao ih na odvojene komadiće, složio scenu i napravio levele.
Nisi vezan uz ova dva alata. Crtati može bilo koji AI za slike, a graditi bilo koji AI za razgovor koji piše kod. ChatGPT i Gemini mogu napisati i dio s kodom, i sasvim su dobri za jednostavnije igre od običnih oblika i boja. Slike su ono zbog čega igra izgleda kao prava igra.
Što ti treba
- AI koji pravi slike. Ja sam koristio Gemini.
- AI za razgovor koji piše kod. Ja sam koristio Claude, a rade i ChatGPT i Gemini.
- Chrome preglednik. Ne moraš instalirati nikakve programe.
Možeš početi besplatno, ali besplatni planovi imaju dnevna ograničenja na slike i poruke, a pravila se razlikuju od plana do plana. Mnogi alati za slike dopuštaju komercijalno korištenje slika samo na plaćenom planu, pa pročitaj što piše za tvoj plan ako igru želiš dijeliti ili prodavati. Ovaj post govori o tome kako brzo napraviti igricu uz AI, a nije pravni savjet.
Za hosting, mjesto na internetu na kojem je igra spremljena da je svatko može otvoriti, koristio sam vlastitu web stranicu, ovu na kojoj ovo čitaš. Isto možeš i ti sa svojom stranicom, a postoje i druge opcije, koje objašnjavam malo niže.
Ako još nemaš web stranicu, prvo ti treba hosting. Jedan jednostavan način je Bluehost. To je hosting tvrtka čiji AI builder uz hosting daje i početnu web stranicu, pa preskačeš prazan papir, a većina hosting planova dopušta da uploadaš vlastite datoteke, na primjer jednu datoteku igre. Prije odluke pogledaj kod njih trenutne planove i cijene, jer se ponude mijenjaju.
1. korak: Odluči kakvu igru želiš, pa zatraži slike od AI-ja za slike
Prije nego išta nacrtaš, razmisli kakvu igru želiš. Obranu kule u kojoj braniš zid od neprijatelja, svemirsku pucačinu, labirint, kartašku igru? I kako bi trebala izgledati: mračan porušeni grad, svijetla šuma, svemir? Koji su ti likovi potrebni: junak, nekoliko neprijatelja, šef? Ne moraš to sve odlučiti sam. Prvo od AI-ja zatraži ideje i dobit ćeš ih nekoliko za par sekundi.
Možeš krenuti ovakvim zahtjevom: “Želim napraviti jednostavnu igru koja radi u pregledniku, u jednoj HTML datoteci. Daj mi pet ideja za igre koje se lako naprave. Za svaku u jednoj rečenici reci što igrač radi, kako bi izgledala pozadina i od kojih likova ili predmeta bi mi trebale slike.”
Odaberi ideju koja ti se najviše sviđa, promijeni što želiš i sad točno znaš koje slike tražiti. Jednostavnoj igri trebaju tri vrste: pozadina, neprijatelji i oružje. Traži svaku posebno i uvijek traži isti stil, da sve izgleda kao da pripada zajedno. Evo kakav upit radi.
Za pozadinu sam zatražio otprilike ovo: “Nacrtaj pozadinu igre gledanu odozgo za igru obrane baze: napukla porušena cesta pri vrhu i čvrst metalni zid s vratima pri dnu. Mračan, prljav pixel-art stil, široka slika 16:9, bez teksta i bez likova.”
Za neprijatelje: “Nacrtaj sprite list jednog zelenog cyber-zombija u šest poza: dva koraka hodanja, jedna poza s ispruženim rukama, jedna napada i još dvije. Isti lik i ista veličina u svakoj pozi, gledan sprijeda, s jasnim razmakom među pozama, na običnoj jednobojnoj sivoj pozadini. Isti pixel-art stil kao pozadina.”
A za oružje i efekte: “Nacrtaj sci-fi top u šest kadrova, dok miruje i dok puca, svjetleća laserska vrata, eksploziju u četiri kadra i plavi energetski metak. Isti pixel-art stil, na običnoj jednobojnoj sivoj pozadini.”
Nešto što sam naučio: ako zatražiš “prozirnu pozadinu”, mnogi alati za slike u sliku nacrtaju lažnu sivo-bijelu šahovnicu, kao da je dio crteža. Bolje radi obična jednobojna boja. Claude je poslije može ukloniti.
2. korak: Daj slike AI-ju za razgovor
Otvori Claude, priloži slike i opiši igru jednostavnim riječima. Ne moraš znati kako igra radi. Reci što želiš vidjeti i raditi, a kod prepusti AI-ju. Na primjer:
“Evo tri slike: pozadina, sprite list zombija i list topa. Sam izreži listove na zasebne slike i napravi igru za preglednik u jednoj datoteci. Top na dnu brani zid od zombija koji dolaze u 10 valova. Top cilja mišem i puca lijevom tipkom, a desna tipka baca granatu. Svaki zombi daje kredite za kupnju nadogradnji. Dodaj zvukove i šefa u 5. i 10. valu. Napravi početni zaslon i zaslon pobjede ili kraja igre.”
U mom slučaju Claude je izrezao listove na komadiće, postavio pozadinu, složio scenu i napisao levele. Nekoliko minuta kasnije prva verzija već se mogla igrati. Poslije sam potrošio još vremena na dodatke, a o tome je 4. korak.
3. korak: Igraj je, bez spremanja ičega
Claude mnoge odgovore prikaže u pregledu odmah u razgovoru. Ako je tvoj kod došao iz ChatGPT-a ili Geminija, postoji još brži način: AI Code Harvester, naša besplatna Chrome ekstenzija, pronađe kod u odgovoru, a gumb Prikaži ga pokrene uživo u novoj kartici. Ne spremaš datoteku i ništa ne kopiraš i lijepiš.
Zato je Harvester moćan dodatak za sve što se može pokrenuti u pregledniku bez spremanja datoteka: igru, mali alat, dizajn stranice. Pitaš, pritisneš Prikaži, pogledaš rezultat, zatražiš promjenu i opet pogledaš. Radi na stranicama ChatGPT-a i Geminija, a naš vodič Kako pokrenuti HTML kod iz ChatGPT-a ili Geminija i uživo pogledati stranicu objašnjava ga korak po korak.
4. korak: Dotjeruj je jedan po jedan zahtjev
Prva verzija nikad nije konačna, i u tome je zabava. Nakon prve verzije mijenjao sam igru običnim zahtjevima, jedan po jedan. Neki od njih:
- “Prikaži mala slova tipki na rubu ekrana, s kratkim tekstom, da igrač zna koja tipka što kupuje.”
- “Dodaj vojnika koji sam baca granate na najbližeg zombija.” Za njega sam Claudeu dao nove slike iz Geminija.
- “Dodaj automatski top koji sam cilja i puca, ali sporije od glavnog.”
- “Zombiji trebaju gubiti energiju samo kad ih pogodim u tijelo ili glavu, ne u noge.”
- “Dodaj gumb za pauzu u gornji lijevi kut i gumb za cijeli zaslon.”
- “Neka zadnji val bude puno veći.”
Pravilo koje najviše štedi vrijeme: zatraži jednu promjenu, isprobaj je, pa traži sljedeću. Ako se nešto pokvari, reci “poništi zadnju promjenu”. AI pamti što je napravio i može to popraviti.
Isprobaj je na svom računalu prije nego je staviš online
Prije nego igru podijeliš, isprobaj je kod kuće, gdje nitko ne vidi greške. Ovakva igra je web stranica, a tvoje računalo je može otvoriti bez ikakvog poslužitelja.
- Spremi kod kao jednu datoteku, na primjer
game.html. Ako igra koristi slike iz mape, drži mapu uz datoteku. Ili zamoli AI: “Stavi slike unutar datoteke, neka bude samo jedna datoteka.” Tako nema što izgubiti. - Dvaput klikni na datoteku. Otvorit će se u pregledniku.
- Jednom klikni na igru, pa koristi tipke. Preglednik treba taj prvi klik prije nego igra može čuti tipkovnicu.
- Provjeri sve: miš i tipke, zvuk, cijeli zaslon, pauzu i može li se igra odigrati do kraja.
- Popravi što ne valja tako da AI-ju točno opišeš što si vidio.
Kad radi, stavi je online da i drugi mogu igrati. Za to ti treba web hosting, a to je jednostavno mjesto na internetu koje čuva tvoje datoteke i daje im adresu. Jedna datoteka igre radi na gotovo svakom hostu, pa i na besplatnima. Naš vodič Gdje objaviti web stranicu koju je napravio AI jednostavnim riječima prolazi kroz opcije. Na našoj stranici koristimo Firebase Hosting.
Da igru prikažeš unutar stranice na svojoj web stranici, dodaj je ovako:
<iframe src="https://yoursite.com/game.html" width="1024" height="572" allow="fullscreen"></iframe>Dio allow="fullscreen" omogućuje igračima da koriste gumb za cijeli zaslon. Ako uploadaš novu verziju, a i dalje vidiš staru, pritisni Ctrl+F5 da je preglednik učita ispočetka.
Granice nema
Kad je temelj gotov, sve ostalo je samo jedan zahtjev dalje: novi neprijatelj, nova pozadina za sljedeći level, teži šef, drugo oružje, nova vrsta igre. Za novi izgled zatraži od AI-ja za slike još jedan komplet slika i daj ih AI-ju za razgovor. Ono za što je nekad trebao tim i tjedni rada, danas traži jednu večer i malo mašte.
Dobro je znati prije nego počneš
- AI griješi. Nešto neće proraditi iz prvog puta. Opiši što vidiš i pitaj ponovo, to je normalno.
- Prva verzija je brza, dotjerivanje traje duže. Prva igriva verzija moje igre bila je gotova za manje od 10 minuta. Dodaci su došli poslije.
- Ovakve igre su napravljene za miš i tipkovnicu. Za mobitel zamoli AI da doda kontrole na dodir.
- Pravila za slike se razlikuju. Prije nego igru prodaš ili reklamiraš, provjeri što dopuštaju tvoj alat za slike i tvoj plan.
Što ćeš s igrom, odlučuješ ti
Kad je igra gotova, sam odlučuješ što dalje. Podijeli je na društvenim mrežama, pošalji link prijateljima, stavi je na svoju web stranicu ili je zadrži samo za sebe. Nema pravog odgovora, a draž je u tome što si je napravio ti.
FAQ
Možeš. Igru opišeš jednostavnim riječima, AI napiše kod, a ti isprobaš rezultat i tražiš promjene. Ne moraš razumjeti kod, samo reći što želiš vidjeti.
Možeš početi besplatno, ali besplatni planovi imaju dnevna ograničenja na slike i poruke, a veća igra na besplatnom planu može potrajati više od jednog dana. Mnogi alati za slike komercijalno korištenje slika također dopuštaju samo na plaćenom planu, pa provjeri svoj plan.
Slike može nacrtati bilo koji AI za slike, a igru može izgraditi bilo koji AI za razgovor koji piše kod. Ja sam za slike koristio Gemini, a za igru Claude. ChatGPT i Gemini također mogu napisati kod.
Za jednostavnu igru od oblika i boja, mogu. Za igru s pravom grafikom trebaju ti slike od AI-ja za slike, koje onda daš AI-ju za razgovor da ih ugradi u igru.
Možeš. Ovakva igra je obično jedna HTML datoteka, koja radi na gotovo svakom web hostu, pa i na besplatnima. Možeš je prikazati i unutar stranice pomoću iframea.
Ovako napravljene igre rade za miš i tipkovnicu. Ako je želiš na mobitelu, zamoli AI da doda kontrole na dodir.
To ovisi o pravilima alata koje si koristio za slike i kod, a ona se razlikuju po planu. Ovaj post ne daje pravne savjete, pa prije prodaje ili reklamiranja igre pročitaj uvjete svojih alata.
AI Code Harvester — besplatno, lokalno, bez računa
Izradio GetPlugzz. Samo lokalna obrada: ništa se ne šalje, ništa se ne prati.
