Kako v tem vikendu objaviti 3D-igro na Vercel (z veščinami umetne inteligence)

Vibe Skills

Claude, Cursor සහ තවත් දේ සඳහා සූදානම් කරන ලද සිය ගණනක් කුසලතා බ්‍රවුස් කරන්න.

කුසලතා ගවේෂණය කරන්න

දැන්ම නොමිලේ ආරම්භ කරන්න

Pošlji 3D igro na Vercel do nedeljske noči: 48-urni priročnik za namestitev

Od praznega petkovega večera do povezave tvoja-igra.vercel.app do nedeljske večerje. Sklad je Three.js, Cursor, AI spretnost iz Vibe Skills in brezplačni nivo Vercel. Skupni stroški za konec tedna: 0 $. Skupna infrastruktura, ki ji morate biti pozorni: prav tako nič.

To ni "zgradite prototip na svojem prenosniku in ga poimenujte končan". To je javni URL, ki ga lahko vsak na svetu odpre v brskalniku, s HTTPS, robnim predpomnilnikom in domeno po meri, če jo želite. AI spretnost dostavi Three.js okostje in delujočo vercel.json. Cursor skrbi za zanko iteracij. Vercel skrbi za namestitev. Vi skrbite za dizajn.

Ta vodnik je namenjen neodvisnim razvijalcem, kodarjem z vibrom, udeležencem hackathonov in vsem, ki so naveličani polovično končanih zavihkov localhost:5173. Pokrivamo, zakaj ta sklad deluje, anatomijo 48-urnega namestitve, pet AI spretnosti za 3D igre, ustvarjenih za delovni proces, in korake od petka do nedelje.

Vibe Skills

Claude, Cursor සහ තවත් දේ සඳහා සූදානම් කරන ලද සිය ගණනක් කුසලතා බ්‍රවුස් කරන්න.

කුසලතා ගවේෂණය කරන්න

දැන්ම නොමිලේ ආරම්භ කරන්න

Zakaj je Vercel + Three.js + AI spretnosti sklad za samostojne razvijalce

Vercel je najbolj lenobna možna ciljna lokacija za namestitev igre Three.js. Potisnite v GitHub, Vercel opazi, zgradi projekt in vam vrne URL v 60 sekundah. Brez strežnika za zagotovitev, brez Docker datoteke, brez konfiguracije NGINX, brez nastavitve SSL. Paket Three.js je le statični HTML, JS in WebGL sredstva, kar je natančno tisto, za kar je bila Vercelova robna mreža zgrajena.

Brezplačni nivo udobno pokriva konec tedna:

• 100 GB pasovne širine na mesec. 5 MB zgradba Three.js pri 10.000 predvajanjih je 50 GB. Zmanjkalo vam bo vikenda, preden vam bo zmanjkalo pasovne širine.
• Neomejene statične namestitve s HTTPS in poddomeno *.vercel.app.
• Podpora za domene po meri na brezplačnem nivoju - prinesite svojo ime-igre.com, če jo imate, sicer je brezplačni URL vercel.app deljiv na vseh družbenih platformah.
• Predogledi namestitev za vsak potrditev - vsako potiskanje dobi svoj URL, tako da lahko delite zgradbo s prijateljem in nadaljujete z iteracijami, ne da bi jo pokvarili.

Dodajte AI spretnost iz Vibe Skills in izgine tudi osnovno gradivo. Nastavitev scene Three.js, kontrolnik igralca, gradbeni cevovod in vercel.json, pripravljen za Vercel, se ustvarijo z enim ukazom. Nato Cursor spremeni preostanek vikenda v klepet, kjer opišete želeno igranje in prilagodite izhod. To je celoten sklad: spretnost tržnice za temelj, AI urejevalnik za iteracijo in Vercel za namestitev. Samostojno, brezplačno in hitro.

Vibe Skills

Claude, Cursor සහ තවත් දේ සඳහා සූදානම් කරන ලද සිය ගණනක් කුසලතා බ්‍රවුස් කරන්න.

කුසලතා ගවේෂණය කරන්න

දැන්ම නොමිලේ ආරම්භ කරන්න

Anatomija 48 ur: Petkov koncept do nedeljske namestitve

Vsak vikend, ki dejansko zaživi, sledi istim korakom. Trija je v tem, da načrtujete namestitev v petek, ne v nedeljo popoldne, tako da zadnjih šest ur namenjenih poliranju, namesto da se borite z napako pri zgradbi.

Razlog, zakaj to deluje, je petkov potisk na Vercel. Ko URL obstaja, se vsaka sobotna in nedeljska potrditev samodejno namesti. Ni "panike ob nedeljski noči" ker se je namestitev zgodila že v petek in je ves konec tedna delovala samodejno.

Kako izgleda "Vibe kodiranje" 3D igre na Vercel

Vibe kodiranje pomeni opisovanje tega, kar želite, v običajnem angleškem jeziku in dovolite AI urejevalniku, da napiše kodo, nato pa iterirate na izhodu. Za 3D igro na Vercel je zanka nenavadno čista: vsaka sprememba v Cursorju je oddaljena za pnpm dev od lokalne povratne informacije, nato pa za git push od živega URL-ja za predogled, nato samodejno nameščena v produkcijo na main.

Vikend vibe kodiranja igre na Vercel izgleda takole:

1. Odprite začetno mapo spretnosti v Cursorju.
2. Opišite funkcijo v klepetu: "dvojni skok, če je prostor dvakrat pritisnjen v 200 ms".
3. Cursor uredi datoteko kontrolnika. Shranite. pnpm dev ponovno naloži. Občutite skok v brskalniku.
4. Če se pravilno počuti, git push. Vercel zgradi URL za predogled. Pošljite ga prijatelju.
5. Združite v main, ko je občutek zaklenjen. Produkcijski URL se posodobi v 60 sekundah.

AI opravi tipkanje. Vercel opravi namestitev. Vi opravite občutek in dizajn.

5 AI spretnosti za 3D igre, ki omogočajo to na Vibe Skills

Te spretnosti so ustvarjene za vikend delovni proces Vercel + Three.js + Cursor. Vsaka dostavi projekt Vite-based Three.js, delujočo vercel.json, pnpm build, ki ustvari statični paket, ki ga lahko Vercel servira iz roba, in preizkušeno pot namestitve. Vse so v kategoriji 3D igre na Vibe Skills.

1. Začetna koda za igre Three.js + Vercel

Privzeta izbira. Ustvari Three.js sceno s kontrolnikom igralca, kamero iz tretje osebe, osvetlitveno napravo, nebesno kocko in ravnino s trki. Dostavi z vercel.json, ki nastavi pravilne glave za predpomnjenje za pakete sredstev Three.js. pnpm dev deluje lokalno; en klik v nadzorni plošči Vercel poveže GitHub repozitorij in imate živo URL.

Najboljše za: kateri koli žanr, razen čiste 2D. Uporabite to, če še ne veste, kaj gradite.

2. Prvoosebni sprehajalec za Vercel

Izpopolnjen prvoosebni kontrolnik (WASD + zaklepanje kazalca miške + gravitacija + sprint + skok) s kljukicami za korake, nagibanjem glave in vercel.json, ki pravilno obravnava glave CSP za zaklepanje kazalca. To pogosto povzroči težave samostojnim razvijalcem v produkciji. Spretost vam jo reši.

Najboljše za: sprehajalne simulacije, prototipe grozljivk, narativne igre, muzejske razstave.

3. Komplet za arenske strelske igre v brskalniku

Top-down arena (twin-stick kontrolnik, spawner valov, osnovni AI sovražnikov, sistem projektilov, HUD za rezultat) s Tvercelom prilagojeno zgradbo, ki stisne sredstva, deli AI in nalaga glasbo na zahtevo. Vključene so kljukice za večigralstvo; konec tedna dostavi enoigralski način.

Najboljše za: arkadne strelske igre, bullet hell, jam vnose, ki morajo hitro delovati na mobilnih napravah.

4. Vercel Puzzle Platformer

Tretjeosebni platformer (spremenljiv skok, kotejni čas, zaznavanje robov), kontrolne točke, tri nadomestne nivoje, ki jih lahko uredite v Blenderju ali v kodi, in zanka ponovnega rojstva. vercel.json je konfiguriran za takojšnje ponovno nalaganje nivojev z robnim predpomnilnikom, tako da se igranje na telefonu počuti hitro.

Najboljše za: puzzle platformerje, parkour prototipe, poskuse oblikovanja nivojev.

5. Vercel Driving Sandbox

Arkaden občutek vožnje (krivulja pospeška, fizika zdrsa, zakasnitev kamere, osnovni teren) z nizko poligonskim avtomobilom, predlogo proge in namestitvijo, optimizirano za velike mrežne terene. Prednastavljene HTTP glave omogočajo hitrejše zaganjanje WebGL konteksta na Safariju, zgodovinsko najpočasnejšem brskalniku za Three.js.

Najboljše za: arkadne dirke, terenske vožnje, predstavitve občutka avtomobila za portfelj.

Ogledate si vse AI spretnosti za 3D igre na Vibe Skills →

Korak za korakom od petka do nedelje

To je natančen urnik. Prilagodite začetni čas, vendar ohranite vrstni red. Ključni mejnik je petkov večerni Vercel namestitev. Vse po tem je iteracija.

Petek 18:00 - 20:00: Izberite spretnost, potisnite v GitHub, povežite Vercel

Korak 1: Izberite AI spretnost za 3D igre na Vibe Skills. Brskajte po kategoriji 3D igre, izberite tisto, ki ustreza vašemu žanru, in namestite začetno kodo v svežo mapo. Odprite jo v Cursorju. Do 19:00 bi morali videti Three.js sceno s premikajočim se igralcem.

Korak 2: Ustvarite GitHub repozitorij in potisnite. git init, git remote add, git push. Uporabite okrajšavo vaše igre kot ime repozitorija (crystal-runner, lunar-fishing, kar koli). Ime repozitorija pogosto postane vaš URL.

Korak 3: Povežite repozitorij z Vercel. Prijavite se v Vercel z GitHubom (brezplačno), kliknite "Add New Project", izberite repozitorij. Vercel samodejno zazna Vite in konfigurira zgradbo. Kliknite Deploy. V 60 sekundah imate URL crystal-runner.vercel.app. Odprite ga na telefonu. Delite z enim prijateljem. Vendar namestitve je zdaj nič za preostanek vikenda.

Petek 20:00 - 22:00: Napišite zasnovo

Korak 4: Odgovorite na pet vprašanj v običajnem angleškem jeziku. Odprite stran Notion ali datoteko markdown znotraj repozitorija in odgovorite:

• Kaj igralec počne vsakih 5 sekund? (osnovna zanka)
• Kakšen je pogoj za zmago in pogoj za poraz?
• Kako dolga je ena vožnja ali en nivo?
• Kakšen je vizualni element? (paleta, osvetlitev, referenca sloga)
• Kakšna je ena funkcija, ki to naredi nepozabno v 30 sekundah?

Korak 5: Potrdite zasnovo. Potisnite jo v repozitorij. Vercel se bo ponovno namestil. Disciplina potiskanja vsake pomembne spremembe ohranja živi URL pošten.

Sobota 9:00 - 13:00: Zgradite glavno mehaniko

Korak 6: Zamenjajte nadomestno mehaniko z vašo edino funkcijo. To je edina funkcija, ki je pomembna. Uporabite klepet Cursorja, da jo opišete ("ko igralec pobere kristal, zamrznite bližnje sovražnike za 2 sekundi in predvajajte zvok"). Iterirajte lokalno z pnpm dev. Ko se počuti pravilno, potisnite.

Korak 7: Povežite stanje zmage/poraza. Zgradba, ki traja 60 sekund in ima pravi konec, se počuti kot igra. Zgradba, ki traja 60 minut in nima konca, se počuti kot tehnična predstavitev. Vedno najprej povežite zaslon zmage, nato vse ostalo.

Sobota 13:00 - 20:00: Dodajte en nivo

Korak 8: Zgradite en izpopolnjen nivo. Ne tri polovično pečene. Uporabite nadomestne kocke za geometrijo. Uporabite osnovni lik spretnosti. Prilagodite občutek - višina skoka, zakasnitev kamere, intenzivnost delcev.

Korak 9: Dodajte prekrivni sloj z navodili. Dve-stavčni poziv "WASD za premikanje, klik za streljanje" ob prvem zagonu reši vaš zagon pred zmedenimi igralci, ki obupajo v 8 sekundah. Cursor lahko ustvari pojavni sloj React (ali navadni DOM) v 30 sekundah.

Korak 10: Potiskajte vsako uro. Vsak potisk dobi Vercel URL za predogled. Pošljite vsakega prijatelju. Povratna zanka je skrivno orožje tega sklada.

Nedelja 10:00 - 16:00: Poliranje

Korak 11: Dodajte tri zvoke. Zanka korakov, ambijentalni zvok, zmagovalni signal. Celo trije zvoki močno dvignejo vikend prototip. Brezplačni viri: freesound.org, opengameart.org.

Korak 12: Dodajte dodelavo. Delci ob zadetku, tresenje zaslona ob udarcu, pojavna števila ob rezultatu. Dodela je tisto, zaradi česar se zgrada 48 ur v GIF-u zdi kot 6-mesečna. Vprašajte Cursor, ali naj doda "tresenje zaslona z intenzivnostjo 0.3 za 150ms, ko igralec utrpi škodo" - v petih sekundah bo napisal kljukico za tresenje kamere.

Korak 13: Zaženite prehod Lighthouse. Odprite URL Vercel na telefonu in zaženite Chrome DevTools Lighthouse. Paketi Three.js so običajno okoli 400 KB do 1.5 MB. Če ste nad 3 MB, vprašajte Cursor, ali naj omogoči deljenje kode na težkih modulih. Vercelovi gzip in brotli bodo poskrbeli za ostalo.

Korak 14: Prehod čez napake. Petkrat zaporedoma igrajte svoj živi URL. Popravite vse, kar se pokvari dvakrat. Ignorirajte vse, kar se pokvari enkrat.

Nedelja 16:00 - 20:00: Zagon

Korak 15: (Neobvezno) Nastavite domeno po meri. Če ste predhodno kupili ime-igre.com, jo dodajte v nastavitve projekta Vercel. SSL je samodejen. Sicer je URL *.vercel.app v redu - ima HTTPS, je deljiv in se nalaga povsod.

Korak 16: Posnemite 15-sekundni GIF najboljšega trenutka. Uporabite živi URL, ne localhost. GIF je tisto, kar se klika na Twitterju, Blueskyju in Redditu.

Korak 17: Ustvarite stran itch.io (neobvezno, a z veliko prednostjo). Naslov, enovrstični podnaslov, tri slike, GIF, kontrolniki, zasluge in vdelava vašega *.vercel.app iframe-a (itch.io podpira vdelave iframe-ov za HTML5 igre). Zdaj imate dva URL-ja - enega za priložnostno deljenje in enega za igralčevo občinstvo.

Korak 18: Objavite povezavo. Twitter, Bluesky, vaš Discord za razvojno skupnost, r/IndieDev, r/threejs, r/WebGames. Vedno začnite z GIF-om. Vedno vključite URL. Če ste uporabili AI spretnost Vibe Skills, jo omenite v objavi dnevnika razvoja - drugi razvijalci, ki bodo brali, bodo želeli isto začetno kodo.

Kako se izogniti trem najpogostejšim napakam pri namestitvi Vercel

Tri stvari pokvari skoraj vsak vikend Three.js + Vercel. Vse tri so 5-minutne popravke, če jih ujamete v petek zvečer, in 5-urne luknje, če jih odkrijete v nedeljo ob 19:00.

• Napačna izhodna mapa zgradbe. Vite privzeto uporablja dist/. Vercel samodejno zazna Vite in uporablja dist/. Če ste prilagodili izhod, nastavite outputDirectory v vercel.json ali nastavitvah projekta, sicer bo vaša namestitev 404.
• Poti do sredstev, ki delujejo lokalno, vendar v produkciji povzročijo 404. Uporabite relativne poti ali pripomoček Vite import.meta.env.BASE_URL za katero koli GLB, teksturo ali zvočno datoteko, naloženo med izvajanjem. Potrjene poti /assets/... običajno delujejo, vendar absolutne poti Windows, kopirane in prilepljene, zagotovo ne bodo.
• CSP glave, ki blokirajo zaklepanje kazalca ali zvočni kontekst. Prvoosebne igre potrebujejo zaklepanje kazalca. Zvok potrebuje aktivacijo z uporabniško gesto. Vsaka spretnost iz kategorije 3D igre dostavi pravilni blok headers v vercel.json za obravnavo tega. Če ste svojo napisali od začetka, kopirajte konfiguracijo iz repozitorija spretnosti.

Namestitev deluje v petek, tako da, ko se v nedeljo pokvari, je to vedno zaradi nedavne spremembe. git bisect je vaš prijatelj. Še bolje: vsakih 30 minut potiskajte, tako da je pokvarjena potrditev majhna.

Pogosto zastavljena vprašanja

Ali bo brezplačni nivo Vercel res vzdržal, če moja igra dobi promet?

Da, za zagon ob koncu tedna in prve tedne. Brezplačni nivo vam daje 100 GB pasovne širine na mesec, kar je približno 20.000 predvajanj zgradbe Three.js velikosti 5 MB. Če dosežete to mejo, je Pro plan 20 $/mesec in vas dvigne na 1 TB. Za zagon ob koncu tedna je brezplačno več kot dovolj. AI spretnosti na Vibe Skills dostavijo konfiguracijo zgradbe, ki zmanjša velikost paketa, kar še dodatno raztegne brezplačni nivo.

Ali lahko uporabim domeno po meri na brezplačnem nivoju Vercel?

Da. Brezplačni nivo podpira domene po meri z samodejnim HTTPS. Kupite domeno (Namecheap, Cloudflare Registrar, Porkbun), usmerite jo na Vercel in Vercel bo poskrbel za SSL certifikat. Nastavitev traja približno 10 minut. Če nimate domene, je URL ime-igre.vercel.app dovolj kratek, da ga delite na kateri koli platformi.

Ali je ta sklad primeren za oddajo igre na jamu?

Da, in eden najboljših skladov za oddaje na jamih. Večina jamov (Ludum Dare, GMTK, js13k, GitHub Game Off) sprejema kateri koli URL, ki ga je mogoče igrati v spletu. Povezava *.vercel.app deluje za sodnike natanko tako kot URL itch.io. Številni zmagovalci jamov dostavijo na obe - itch.io za igralčevo občinstvo, Vercel kot hiter kanonični URL.

Ali moram pred začetkom znati Three.js?

Potrebujete dovolj JavaScripta, da preberete, kaj piše Cursor, in prilagodite vrednosti. Ne potrebujete pisati Three.js od začetka. AI spretnosti na Vibe Skills ustvarijo nastavitev motorja, kamero, kontrolnik in konfiguracijo zgradbe. Cursor obravnava kodo igranja iz vaših opisov.

Kaj se zgodi, če moja Vercel zgradba ne uspe v nedeljo ob 19:00?

Najpogostejši vzrok je napaka TypeScript ali manjkajoča spremenljivka okolja. Vercel prikaže dnevnik zgradbe z označeno vrstico, ki ne uspe. En klik v nadzorni plošči vrne zadnjo delujočo namestitev in jo promovira v produkcijo. Ker je vsaka potrditev predogled namestitve, ste le en potrditev oddaljeni od delujoče zgradbe. Zato je pomembno, da vsakih 30 minut potiskate v soboto in nedeljo.

Ali lahko prodam ali spremenim kodo iz AI spretnosti za 3D igre Vibe Skills?

Da. AI spretnosti na Vibe Skills dostavljajo z licenco, ki je prijazna do komercialne uporabe in vam omogoča, da kodo objavite v svoji igri na Vercel, itch.io, Steam ali kje drugje. Ustvarjalci obdržijo intelektualno lastnino spretnosti, vi obdržite intelektualno lastnino igre, ki je zgrajena na vrhu.

Kaj če ne želim uporabiti Cursor?

Deluje kateri koli AI urejevalnik, ki lahko ureja datoteke projekta. Claude Code, Cursor, Windsurf, GitHub Copilot Chat, Cline - kateri koli od njih lahko iterira na Three.js okostju iz AI spretnosti Vibe Skills. Sama spretnost je neodvisna od urejevalnika.

Dostavite jo ta vikend

Razlog, zakaj večina samostojnih razvijalcev nikoli ne dostavi 3D igre, ni motor, žanr ali omejitev spretnosti. To je petkov večer, ko "še malo raziskujejo" in nikoli ne začnejo. Naslednji prosti vikend sledite štirifaznemu načrtu: namestite AI spretnost za 3D igre Vibe Skills, potisnite v GitHub, povežite Vercel, namestite do petka 20:00, nato pa v soboto in nedeljo iterirajte na živem URL-ju.

Vaš portfelj desetih vikend dostavljenih iger na Vercel je vreden več kot vaš hipotetični šestmesečni sanjski projekt motorja. Dostavljena igra vedno zmaga. Brezplačni URL Vercel je dokaz.

Brskajte po AI spretnostih za 3D igre na Vibe Skills →

Preskočite maraton osnovnega gradiva Three.js. Namestite AI spretnost za 3D igre na Vibe Skills, potisnite na Vercel in imejte živi URL do nedeljske noči.