Kako objaviti 3D igru na Vercel ovog vikenda (s vještinama umjetne inteligencije)

Vibe Skills

Pretražite stotine gotovih veština za Claude, Cursor i više.

Istražite veštine

Započnite besplatno

Otpremite 3D igru na Vercel do nedjelje navečer: Priručnik za 48-satnu implementaciju

Možete od petka navečer do linka your-game.vercel.app do nedjeljnog ručka. Stog tehnologija je Three.js, Cursor, AI vještina sa Vibe Skills i besplatni nivo Vercela. Ukupni trošak za vikend: 0 dolara. Ukupna infrastruktura kojom morate upravljati: također nula.

Ovo nije "napravi prototip na svom laptopu i nazovi ga gotovim". Ovo je javni URL koji bilo ko na svijetu može otvoriti u pregledniku, sa HTTPS-om, keširanjem na ivici mreže i prilagođenim domenom ako ga želite. AI vještina isporučuje Three.js skel (scaffolding) i funkcionalan vercel.json. Cursor upravlja petljom iteracija. Vercel upravlja implementacijom. Vi upravljate dizajnom.

Ovaj vodič je za nezavisne programere, "vibe" kodere, učesnike hakatura i svakoga ko je umoran od nedovršenih kartica localhost:5173. Pokrivamo zašto ovaj stog tehnologija funkcionira, anatomiju 48-satne implementacije, pet AI vještina za 3D igre izgrađenih za radni tok i korak po korak od petka do nedjelje.

Vibe Skills

Pretražite stotine gotovih veština za Claude, Cursor i više.

Istražite veštine

Započnite besplatno

Zašto je Vercel + Three.js + AI vještine stog tehnologija za solo programere

Vercel je najlakši mogući cilj za implementaciju Three.js igre. Gurnite na GitHub, Vercel primijeti, izgradi projekat i vrati vam URL u roku od 60 sekundi. Nema servera za obezbjeđivanje, nema Docker datoteke, nema NGINX konfiguracije, nema SSL podešavanja. Three.js paket je samo statički HTML, JS i WebGL resursi, što je upravo ono za šta je Vercelova mreža na ivici izgrađena.

Besplatni nivo udobno pokriva lansiranje vikendom:

• 100 GB propusnog opsega mjesečno. Three.js paket od 5 MB pri 10.000 igranja je 50 GB. Ponestat će vam vikenda prije nego vam ponestane propusnog opsega.
• Neograničene statičke implementacije sa HTTPS-om i poddomenom *.vercel.app.
• Podrška za prilagođene domene na besplatnom nivou - donesite svoj name-game.com ako ga imate, inače je besplatni vercel.app URL koji se može dijeliti na svim platformama društvenih mreža.
• Pregled implementacija za svaki commit - svako guranje dobija svoj URL, tako da možete podijeliti build sa prijateljem i nastaviti sa iteracijom bez kvarenja.

Dodajte AI vještinu sa Vibe Skills i osnovni kod također nestaje. Three.js podešavanje scene, kontroler igrača, pipeline izgradnje i vercel.json spreman za Vercel generiraju se jednom komandom. Zatim Cursor pretvara ostatak vikenda u razgovor gdje opisujete željeni gameplay i podešavate izlaz. To je puni stog tehnologija: vještina sa tržišta za temelj, AI editor za iteraciju i Vercel za implementaciju. Solo, besplatno i brzo.

Vibe Skills

Pretražite stotine gotovih veština za Claude, Cursor i više.

Istražite veštine

Započnite besplatno

Anatomija 48-satnog perioda: Od koncepta u petak do implementacije u nedjelju

Svaki brod za vikend koji se zapravo pokrene slijedi iste korake. Trik je planirati implementaciju u petak, a ne u nedjelju popodne, tako da se posljednjih šest sati posveti poliranju umjesto borbe sa greškom izgradnje.

Razlog zašto ovo funkcionira je petkovo guranje na Vercel. Kada URL postoji, svaka subotnja i nedjeljna promjena se automatski implementira. Nema "panike zbog implementacije u nedjelju navečer" jer se implementacija već dogodila u petak i radila je na autopilotu cijeli vikend.

Kako izgleda "Vibe kodiranje" 3D igre na Vercelu

Vibe kodiranje znači opisivanje onoga što želite jednostavnim engleskim jezikom i prepuštanje AI editoru da napiše kod, a zatim iteraciju na izlazu. Za Three.js igru na Vercelu, petlja je neobično čista: svaka promjena u Cursoru je udaljena pnpm dev od lokalnog povratnog djelovanja, zatim git push udaljen od live URL-a za pregled, a zatim automatski implementirana u produkciju na main.

Vikend igre kodirane "vibe" stilom na Vercelu izgleda ovako:

1. Otvorite početnu fasciklu vještine u Cursoru.
2. Opišite funkciju u chatu: "dvostruki skok ako se razmak pritisne dvaput u roku od 200 ms".
3. Cursor uređuje datoteku kontrolera. Sačuvajte. pnpm dev se ponovo učitava. Osjetite skok u pregledniku.
4. Ako se osjeća ispravno, git push. Vercel gradi URL za pregled. Pošaljite ga prijatelju.
5. Spojite u main kada je osjećaj zaključan. Produkcijski URL se ažurira u roku od 60 sekundi.

AI radi tipkanje. Vercel radi implementaciju. Vi radite osjećaj i dizajn.

5 AI vještina za 3D igre koje to omogućavaju na Vibe Skills

Ove vještine su izgrađene za workflow vikenda Vercel + Three.js + Cursor. Svaka od njih isporučuje Three.js projekat baziran na Vite-u, funkcionalan vercel.json, pnpm build koji proizvodi statički paket koji Vercel može poslužiti sa ivice mreže i testiran put implementacije. Sve su u kategoriji 3D igre na Vibe Skills.

1. Three.js + Vercel Game Starter

Podrazumevani izbor. Generira Three.js scenu sa kontrolerom igrača, kamerom iz trećeg lica, setom osvjetljenja, nebeskom kutijom i ravnom površinom sa sudarima. Isporučuje se sa vercel.json koji postavlja ispravne zaglavlja keširanja za Three.js pakete resursa. pnpm dev se pokreće lokalno; jednim klikom u Vercel kontrolnoj tabli povezujete GitHub repozitorij i dobijate live URL.

Najbolje za: bilo koji žanr osim čistog 2D. Koristite ovo ako još ne znate šta gradite.

2. First-Person Vercel Walker

Poliran kontroler iz prvog lica (WASD + zaključavanje pokazivača miša + gravitacija + sprint + skok) sa kukama za korake, ljuljanjem glave i vercel.json koji ispravno obrađuje CSP zaglavlja za zaključavanje pokazivača. Ovo zbunjuje mnoge solo programere u produkciji. Vještina to rješava za vas.

Najbolje za: simulacije hodanja, horor prototipove, narativne igre, muzejske izložbe.

3. Browser Arena Shooter Kit

Top-down arena (twin-stick kontroler, generator talasa, osnovna AI neprijatelja, sistem projektila, HUD za rezultat) sa buildom podešenim za Vercel koji kompresuje resurse, dijeli AI kod i učitava muziku sa zakašnjenjem. Uključene su kuke za multiplayer; vikend isporučuje singl plejer.

Najbolje za: arkadne pucačine, bullet hell, jam unose koji moraju da se brzo učitavaju na mobilnom uređaju.

4. Vercel Puzzle Platformer

Platformer iz trećeg lica (promjenjiv skok, "coyote time", detekcija ivice), kontrolni punktovi, tri probna nivoa koje možete urediti u Blenderu ili u kodu, i petlja za ponovno pojavljivanje. vercel.json je konfigurisan za trenutno ponovno učitavanje nivoa keširanih na ivici mreže, tako da testiranje igre djeluje brzo na telefonu.

Najbolje za: puzzle platformere, prototipove parkura, eksperimente dizajna nivoa.

5. Vercel Driving Sandbox

Arkada vozački osjećaj (krivulja ubrzanja, fizika proklizavanja, kašnjenje kamere, osnovni teren) sa nisko-poligonskim automobilom, predloškom staze i implementacijom podešenom za velike mrežaste terene. Predinstalirani HTTP zaglavlja čine da se WebGL kontekst brže pokreće na Safariju, istorijski najsporijem pregledaču za Three.js.

Najbolje za: arkadne trke, off-road vožnju, demo snimke osjećaja automobila za portfolio.

Pregledajte sve AI vještine za 3D igre na Vibe Skills →

Od petka do nedjelje korak po korak

Ovo je tačan raspored. Prilagodite početno vrijeme, ali zadržite redoslijed. Ključna prekretnica je Vercel implementacija u petak navečer. Sve nakon toga je iteracija.

Petak 18:00 - 20:00: Odaberite vještinu, gurnite na GitHub, povežite Vercel

Korak 1: Odaberite AI vještinu za 3D igre na Vibe Skills. Pregledajte kategoriju 3D igre, odaberite onu koja odgovara vašem žanru i instalirajte početni kod u novu fasciklu. Otvorite je u Cursoru. Do 19:00 biste trebali vidjeti Three.js scenu sa pokretnim igračem.

Korak 2: Kreirajte GitHub repozitorij i gurnite. git init, git remote add, git push. Koristite slug svoje igre kao ime repozitorija (crystal-runner, lunar-fishing, šta god). Ime repozitorija često postaje vaš URL.

Korak 3: Povežite repozitorij sa Vercelom. Prijavite se na Vercel sa GitHub-om (besplatno), kliknite "Add New Project", odaberite repozitorij. Vercel automatski detektuje Vite i konfigurira build. Kliknite Deploy. U roku od 60 sekundi imate crystal-runner.vercel.app URL. Otvorite ga na svom telefonu. Podijelite ga sa jednim prijateljem. Traka za implementaciju je sada nula do kraja vikenda.

Petak 20:00 - 22:00: Napišite dizajnerski dokument

Korak 4: Odgovorite na pet pitanja jednostavnim engleskim jezikom. Otvorite Notion stranicu ili markdown datoteku unutar repozitorija i odgovorite:

• Šta igrač radi svakih 5 sekundi? (osnovna petlja)
• Koji je uslov za pobjedu i uslov za poraz?
• Koliko traje jedan prolaz ili jedan nivo?
• Koji je vizuelni element? (paleta, osvjetljenje, referenca stila)
• Koja je jedna karakteristika koja ovo čini nezaboravnim za 30 sekundi?

Korak 5: Committujte dizajnerski dokument. Gurnite ga u repozitorij. Vercel će se ponovo implementirati. Disciplina guranja svake značajne promjene održava live URL poštenim.

Subota 9:00 - 13:00: Izgradite osnovnu mehaniku

Korak 6: Zamijenite privremenu mehaniku svojom jednom karakteristikom. Ovo je jedina karakteristika koja je bitna. Koristite Cursor chat da je opišete ("kada igrač pokupi kristal, zamrznite obližnje neprijatelje na 2 sekunde i pustite zvuk"). Iterirajte lokalno sa pnpm dev. Kada se osjeti ispravno, gurnite.

Korak 7: Povežite stanje pobjede/poraza. Build od 60 sekundi sa pravim krajem osjeća se kao igra. Build od 60 minuta bez kraja osjeća se kao tehnički demo. Uvijek prvo povežite ekran pobjede, a zatim sve ostalo.

Subota 13:00 - 20:00: Dodajte jedan nivo

Korak 8: Izgradite jedan poliran nivo. Ne tri polu-pečena. Koristite privremene kocke za geometriju. Koristite standardni lik iz vještine. Podesite osjećaj - visinu skoka, kašnjenje kamere, intenzitet čestica.

Korak 9: Dodajte overlay sa tutorijalom. Dvije rečenice "WASD za kretanje, kliknite za pucanje" iskačući prozor pri prvom pokretanju spašava vaše lansiranje od zbunjenih igrača koji odustanu za 8 sekundi. Cursor može generirati React (ili vanilla DOM) overlay za 30 sekundi.

Korak 10: Gurnite svakih sat vremena. Svako guranje dobija Vercel preview URL. Pošaljite svako prijatelju. Povratna sprega je tajno oružje ovog steka tehnologija.

Nedjelja 10:00 - 16:00: Poliranje

Korak 11: Dodajte tri zvuka. Petlja koraka, ambijentalni pad, pobjednička fanfara. Čak i tri zvuka značajno poboljšavaju prototip napravljen za vikend. Besplatni izvori: freesound.org, opengameart.org.

Korak 12: Dodajte "juice". Čestice pri udaru, podrhtavanje ekrana pri sudaru, iskačući brojevi na rezultatu. "Juice" je ono što čini da build od 48 sati izgleda kao onaj od 6 mjeseci na GIF-u. Zamolite Cursor da doda "podrhtavanje ekrana intenziteta 0.3 na 150 ms kada igrač zadobije povredu" - on će napisati kuku za podrhtavanje kamere za pet sekundi.

Korak 13: Pokrenite Lighthouse prolaz. Otvorite Vercel URL na telefonu i pokrenite Chrome DevTools Lighthouse. Three.js paketi su obično oko 400 KB do 1.5 MB. Ako ste preko 3 MB, zamolite Cursor da omogući podjelu koda na teškim modulima. Vercel-ovi gzip i brotli će se pobrinuti za ostalo.

Korak 14: Prolaz kroz greške. Igrajte svoj live URL pet puta zaredom. Ispravite sve što se pokvari dvaput. Zanemarite sve što se pokvari jednom.

Nedjelja 16:00 - 20:00: Lansiranje

Korak 15: (Opcionalno) Postavite prilagođeni domen. Ako ste kupili name-game.com unaprijed, dodajte ga u Vercel postavke projekta. SSL je automatski. Inače, *.vercel.app URL je u redu - ima HTTPS, može se dijeliti i učitava se svuda.

Korak 16: Snimite 15-sekundni GIF najboljeg trenutka. Koristite live URL, ne localhost. GIF je ono što se klika na Twitteru, Blueskyu i Redditu.

Korak 17: Kreirajte itch.io stranicu (opcionalno, ali visoko uticajno). Naslov, jednolinijski slogan, tri snimka ekrana, GIF, kontrole, zasluge i ugrađeni *.vercel.app iframe (itch.io podržava ugrađivanje iframa za HTML5 igre). Sada imate dva URL-a - jedan za neobavezno dijeljenje i jedan za publiku igrača.

Korak 18: Objavite link. Twitter, Bluesky, vaš Discord razvojni krug, r/IndieDev, r/threejs, r/WebGames. Uvijek počnite sa GIF-om. Uvijek uključite URL. Ako ste koristili Vibe Skills vještinu, spomenite je u postu o razvojnom dnevniku - drugi programeri koji čitaju će želeti isti početni kod.

Kako izbjeći tri najčešća kvara Vercel implementacije

Tri stvari kvare skoro svaki solo Three.js + Vercel vikend. Sve tri su popravke od 5 minuta ako ih uhvatite u petak navečer, i rupe od 5 sati ako ih otkrijete u nedjelju u 19:00.

• Pogrešan izlazni direktorij za build. Vite podrazumevano koristi dist/. Vercel automatski detektuje Vite i koristi dist/. Ako ste prilagodili izlaz, postavite outputDirectory u vercel.json ili postavke projekta ili će vaša implementacija biti 404.
• Putanja do resursa koje rade lokalno, ali daju 404 u produkciji. Koristite relativne putanje ili Vite-ov pomoćnik import.meta.env.BASE_URL za bilo koju GLB, teksturu ili audio datoteku učitanu u vremenu izvođenja. Putanje sa hardkodiranim /assets/... obično rade, ali kopirane apsolutne Windows putanje sigurno neće.
• CSP zaglavlja koja blokiraju zaključavanje pokazivača ili audio kontekst. Igre iz prvog lica zahtijevaju zaključavanje pokazivača. Audio zahtijeva aktivaciju korisničkog gesta. Svaka vještina iz kategorije 3D igre isporučuje se sa ispravnim blokom headers u vercel.json za rukovanje ovim. Ako ste sami pisali od nule, kopirajte konfiguraciju iz repozitorija vještine.

Implementacija radi u petak, tako da kada se ove stvari pokvare u nedjelju, to je uvijek zbog nedavne promjene. git bisect je vaš prijatelj. Još bolje: nastavite da gurate svakih 30 minuta tako da je pokvareni commit mali.

Često postavljana pitanja

Hoće li besplatni nivo Vercela zaista izdržati ako moja igra dobije saobraćaj?

Da, za lansiranje vikendom i prve nedjelje. Besplatni nivo vam daje 100 GB propusnog opsega mjesečno, što je otprilike 20.000 igranja Three.js builda od 5 MB. Ako dostignete taj plafon, Pro plan košta 20 USD/mjesečno i povećava vam se na 1 TB. Za lansiranje vikendom, besplatno je više nego dovoljno. Vještine na Vibe Skills isporučuju se sa konfiguracijom builda koja minimizira veličinu paketa, što dodatno produžava besplatni nivo.

Mogu li koristiti prilagođeni domen na besplatnom Vercel nivou?

Da. Besplatni nivo podržava prilagođene domene sa automatskim HTTPS-om. Kupite domen (Namecheap, Cloudflare Registrar, Porkbun), usmjerite ga na Vercel, a Vercel će upravljati SSL certifikatom. Postavka traje oko 10 minuta. Ako nemate domen, name-game.vercel.app URL je dovoljno kratak da se dijeli na bilo kojoj platformi.

Da li je ovaj stog tehnologija u redu za slanje na takmičenje u igrama (game jam)?

Da, i to je jedan od najboljih stogova tehnologija za slanje na takmičenja. Većina takmičenja (Ludum Dare, GMTK, js13k, GitHub Game Off) prihvata bilo koji web-URL koji se može igrati. Link *.vercel.app funkcioniše isto kao i itch.io URL za sudije. Mnogi pobjednici takmičenja šalju na oba - itch.io za publiku igrača, Vercel kao brzi kanonski URL.

Da li moram da znam Three.js prije početka?

Potrebno vam je dovoljno JavaScripta da pročitate ono što Cursor piše i podesite vrijednosti. Ne morate da pišete Three.js od nule. Vještine na Vibe Skills generišu podešavanje motora, kameru, kontroler i konfiguraciju builda. Cursor upravlja kodom gameplaya iz vaših opisa.

Šta se dešava ako moj Vercel build propadne u nedjelju u 19:00?

Najčešći uzrok je greška u TypeScript-u ili nedostajuća env varijabla. Vercel prikazuje dnevnik builda sa istaknutom linijom greške. Jedan klik u kontrolnoj tabli vraća posljednji uspješni build i promoviše ga u produkciju. Budući da je svako guranje preview implementacija, nikada niste više od jednog commita udaljeni od funkcionalnog builda. Zato je guranje svakih 30 minuta u subotu i nedjelju važno.

Mogu li prodati ili modificirati kod iz Vibe Skills AI vještine za 3D igre?

Da. Vještine na Vibe Skills isporučuju se sa komercijalno-prijateljskom licencom koja vam omogućava da objavite kod u svojoj igri na Vercelu, itch.io, Steam-u ili bilo gdje drugdje. Kreatori zadržavaju intelektualnu svojinu vještine, vi zadržavate intelektualnu svojinu igre izgrađene na vrhu.

Šta ako ne želim da koristim Cursor?

Bilo koji AI editor koji može uređivati datoteke projekta radi. Claude Code, Cursor, Windsurf, GitHub Copilot Chat, Cline - bilo koji od njih može iterirati na Three.js skelu iz Vibe Skills vještine. Sama vještina je nezavisna od editora.

Otpremite ove vikende

Razlog zašto većina solo programera nikada ne otpremi 3D igru nije motor, žanr ili nivo vještine. To je petak navečer kada "samo malo više istražuju" i nikada ne počnu. Sledeći slobodni vikend koji imate, pratite četvorofazni plan: instalirajte Vibe Skills AI vještinu za 3D igre, gurnite na GitHub, povežite Vercel, implementirajte do petka 20:00, a zatim provedite subotu i nedjelju iterirajući na live URL-u.

Vaš portfolio od deset igara otpremljenih vikendom na Vercel vrijedi više od vašeg hipotetičkog projekta od šest mjeseci sa sanjanim motorom. Otpremljena igra uvijek pobjeđuje. Besplatni Vercel URL je dokaz.

Pregledajte AI vještine za 3D igre na Vibe Skills →

Preskočite maraton Three.js osnovnog koda. Instalirajte AI vještinu za 3D igre na Vibe Skills, gurnite na Vercel i imajte live URL do nedjelje navečer.