Vibe Skills

Prebrskajte na stotine pripravljenih veščin za Claude, Cursor in drugo.

Oddajte 3D igro na Vercel do nedeljske noči: Priročnik za 48-urni prevzem

Od praznega petkovega večera lahko do povezave your-game.vercel.app pridete do nedeljske večerje. Sklad je Three.js, Cursor, spretnost umetne inteligence iz Vibe Skills in brezplačni nivo Vercel. Skupni stroški za vikend: 0 $. Skupna infrastruktura, ki jo morate nadzorovati: tudi nič.

To ni "zgradite prototip na svojem prenosniku in ga imejte za končanega". To je javna povezava, ki jo lahko vsak na svetu odpre v brskalniku, s HTTPS, obrobno predpomnilnico in domeno po meri, če jo želite. Spretost umetne inteligence zagotavlja Three.js ogrodje in delujoč vercel.json. Cursor skrbi za zanko iteracij. Vercel skrbi za prevzem. Vi skrbite za dizajn.

Ta vodnik je namenjen neodvisnim razvijalcem, ustvarjalcem vibe kode, udeležencem hackathonov in vsem, ki so naveličani polovično dokončanih zavihkov localhost:5173. Pokrivamo, zakaj ta sklad deluje, anatomijo 48-urnega prevzema, pet spretnosti 3D iger, zgrajenih za potek dela, in korak za korakom od petka do nedelje.

Vibe Skills

Prebrskajte na stotine pripravljenih veščin za Claude, Cursor in drugo.

Raziščite Veščine

Začnite zdaj brezplačno

Zakaj je Vercel + Three.js + Spretosti umetne inteligence sklad za samostojne razvijalce

Vercel je najlažja možna tarča za prevzem igre Three.js. Potisnite v GitHub, Vercel opazi, zgradi projekt in vam v 60 sekundah vrne URL. 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 Vercelovo obrobno omrežje zgrajeno.

Brezplačni nivo udobno pokriva lansiranje za vikend:

100 GB pasovne širine na mesec. 5 MB paket Three.js pri 10.000 igranjih je 50 GB. Prej boste ostali brez vikenda, kot pa brez pasovne širine.
Neomejeni statični prevzemi s HTTPS in poddomeno *.vercel.app.
Podpora za domeno po meri na brezplačnem nivoju - prinesite svojo name-game.com, če jo imate, sicer je brezplačni URL vercel.app deljen na vseh platformah družbenih omrežij.
Prevzemi za predogled za vsak potrditveni poziv - vsak potisk dobi svoj URL, tako da lahko delite paket s prijateljem in še naprej iterirate, ne da bi ga pokvarili.

Dodajte spretnost umetne inteligence iz Vibe Skills in predloge izginejo prav tako. Nastavitev scene Three.js, krmilnik igralca, gradbeni cevovod in vercel.json pripravljen za Vercel, se ustvarijo z enim ukazom. Nato Cursor pretvori preostanek vikenda v klepet, kjer opisujete igranje, ki ga želite, in prilagajate izhod. To je celoten sklad: spretnost s tržnice za temelj, urejevalnik umetne inteligence za iteracijo in Vercel za prevzem. Samostojno, brezplačno in hitro.

Vibe Skills

Prebrskajte na stotine pripravljenih veščin za Claude, Cursor in drugo.

Raziščite Veščine

Začnite zdaj brezplačno

Anatomija 48-urnega prevzema: Od petkovega koncepta do nedeljskega prevzema

Vsak prevzem vikenda, ki dejansko zaživi, sledi istim korakom. Trikano je načrtovati prevzem v petek, ne v nedeljo popoldne, tako da zadnjih šest ur gre za poliranje, ne za boj z napako pri gradnji.

Faza	Časovni blok	Kaj naredite	Kaj je dostavljeno do konca faze
Faza 1: Koncept	Petek 18:00 - 22:00	Izberite žanr, napišite 1-stransko dokumentacijo o dizajnu, namestite spretnost 3D igre Vibe Skills, potisnite zaganjalnik v GitHub, povežite z Vercel	Živa povezava `name-game.vercel.app` z predlogovnim prizorom
Faza 2: Gradnja	Sobota 9:00 - 20:00	Zamenjajte nadomestni element s svojo osnovno mehaniko, dodajte 1 stopnjo, poskrbite, da delujeta stanje zmage/poraza	Predvajani paket na isti povezavi Vercel, samodejno prevzet ob vsakem potisu
Faza 3: Poliranje	Nedelja 10:00 - 16:00	Zvok, sočnost, pojavno okno z navodili, prehod skozi napake, preverjanje delovanja na mobilnih napravah	Paket, ki se ne pokvari v prvih 60 sekundah na nobeni napravi
Faza 4: Lansiranje	Nedelja 16:00 - 20:00	Nastavite domeno po meri (neobvezno), posnemite GIF, napišite stran itch.io, objavite povezavo	Javna povezava + stran itch.io + objava lansiranja na družbenih omrežjih

Razlog, zakaj to deluje, je petkov potisk v Vercel. Ko povezava obstaja, se vsak sobotni in nedeljski potrditveni poziv samodejno prevzameta. Ni "panike ob nedeljski noči pri prevzemu", ker se je prevzem že zgodil v petek in je deloval samodejno ves vikend.

Kako izgleda "Vibe kodiranje" 3D igre na Vercel

Vibe kodiranje pomeni opisovanje tega, kar želite, v navadnem angleščini in dovoliti urejevalniku umetne inteligence, da napiše kodo, nato pa iteriranje na izhodu. Za igro Three.js na Vercel je zanka nenavadno čista: vsaka sprememba v Cursorju je oddaljena za pnpm dev od lokalne povratne informacije, nato git push oddaljen od žive povezave za predogled, nato samodejno prevzeta v produkcijo na main.

Vikend vibe kodiranja igre Vercel izgleda takole:

Odprite zaganjalno mapo spretnosti v Cursorju.
Opisite funkcijo v klepetu: "dvojni skok, če je presledek dvakrat pritisnjen v 200 ms".
Cursor uredi datoteko krmilnika. Shranite. pnpm dev se ponovno naloži. Občutite skok v brskalniku.
Če se počuti prav, git push. Vercel zgradi predogledno povezavo. Pošljite jo prijatelju.
Združite v main, ko je občutek zaklenjen. Produkcijska povezava se posodobi v 60 sekundah.

Umetna inteligenca dela tipkanje. Vercel dela prevzem. Vi delate občutek in dizajn.

5 spretnosti 3D iger z umetno inteligenco, ki to omogočajo na Vibe Skills

Te spretnosti so zgrajene za delovni tok vikenda Vercel + Three.js + Cursor. Vsaka od njih prinaša projekt Three.js, ki temelji na Viteju, delujoč vercel.json, pnpm build, ki ustvari statični paket, ki ga Vercel lahko streže iz obrobja, in preizkušeno pot prevzema. Vse so v kategoriji 3D iger na Vibe Skills.

1. Zaganjalnik iger Three.js + Vercel

Privzeta izbira. Ustvari sceno Three.js z krmilnikom igralca, kamero tretje osebe, sklopom osvetlitve, nebesno kocko in zemeljsko ravnino s trki. Dobavlja z vercel.json, ki nastavi pravilne predpomnilniške glave za pakete sredstev Three.js. pnpm dev se zažene lokalno; en klik v nadzorni plošči Vercel poveže repozitorij GitHub in dobite živo povezavo.

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

2. Pešec prve osebe Vercel

Izpopolnjen krmilnik prve osebe (WASD + zaklepanje kazalca miške + gravitacija + sprint + skok) z zvočnimi kljukicami za korake, nagibanjem glave in vercel.json, ki pravilno obravnava CSP glave za zaklepanje kazalca. To marsikaterega samostojnega razvijalca spravi v težave v produkciji. Spretost vam to reši.

Najboljše za: simulacije hoje, prototipe hororja, narativne igre, muzejske eksponate.

3. Komplet strelskih aren za brskalnike

Arena od zgoraj (dvojni krmilnik s palico, izvajalnik valov, osnovna umetna inteligenca sovražnika, sistem projektilov, HUD z rezultatom) s prevzemom, prilagojenim za Vercel, ki stisne sredstva, razdeli kodo umetne inteligence in nalaga glasbo ob potrebi. Vključene so kljukice za večigralstvo; vikend dostavi enoigralstvo.

Najboljše za: arkadne strelce, bullet hell, vnose v igre, ki se morajo hitro naložiti na mobilnih napravah.

4. Vercel Puzzle Platformer

Platformer tretje osebe (spremenljiv skok, čas odrivanja, zaznavanje robov), kontrolne točke, tri nadomestne stopnje, ki jih lahko uredite v Blenderju ali v kodi, in zanka za ponovni pojav. vercel.json je konfiguriran za takojšnje ponovno nalaganje stopenj, predpomnjenih na obrobju, tako da je testiranje občutka na telefonu odzivno.

Najboljše za: puzzle platformerje, prototipe parkourja, eksperimente z oblikovanjem stopenj.

5. Vercel Driving Sandbox

Arkada občutek vožnje (krivulja pospeševanja, fizika zdrsa, zamik kamere, osnovni teren) z nizko poligonskim avtomobilom, predlogo proge in prevzemom, prilagojenim za velike mrežne terene. Prednastavljene HTTP glave omogočajo, da se kontekst WebGL hitreje zažene v Safariju, zgodovinsko najpočasnejšem brskalniku za Three.js.

Najboljše za: arkadne dirke, vožnjo po terenu, predstavitve občutka avtomobila za portfelj.

Brskaj po vseh spretnostih 3D iger na Vibe Skills →

Korak za korakom od petka do nedelje

To je natančen urnik. Prilagodite začetni čas, vendar ohranite vrstni red. Ključna mejnik je petkov večerni prevzem Vercel. Vse, kar sledi, je iteracija.

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

1. korak: Izberite spretnost 3D igre na Vibe Skills. Brskajte po kategoriji 3D iger, izberite tisto, ki ustreza vašemu žanru, in namestite zaganjalnik v novo mapo. Odprite ga v Cursorju. Do 19:00 bi morali videti sceno Three.js s premikajočim se igralcem.

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

3. korak: Povežite repozitorij z Vercel. Prijavite se v Vercel z GitHub (brezplačno), kliknite "Dodaj nov projekt", izberite repozitorij. Vercel samodejno zazna Vite in konfigurira gradnjo. Kliknite Prevzem. V 60 sekundah dobite povezavo crystal-runner.vercel.app. Odprite jo na svojem telefonu. Delite z enim prijateljem. Vrstica prevzema je zdaj nič za preostanek vikenda.

Petek 20:00 - 22:00: Napišite dokumentacijo o dizajnu

4. korak: Odgovorite na pet vprašanj v navadnem angleščini. Odprite stran Notion ali datoteko markdown v repozitoriju in odgovorite:

Kaj igralec počne vsakih 5 sekund? (osnovna zanka)
Kakšen je pogoj za zmago in kakšen pogoj za poraz?
Kako dolg je en tek ali ena stopnja?
Kakšen je vizualni kavelj? (paleta, osvetlitev, referenca stila)
Kakšna je ena funkcija, ki naredi to nepozabno v 30 sekundah?

5. korak: Potrdite dokumentacijo o dizajnu. Potisnite jo v repozitorij. Vercel se bo ponovno prevzel. Disciplina potiskanja vsake pomembne spremembe ohranja živo povezavo pošteno.

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

6. korak: Zamenjajte nadomestno mehaniko s svojo 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 zvonjenje"). Iterirajte lokalno z pnpm dev. Ko se počuti pravilno, potisnite.

7. korak: Povežite stanje zmage/poraza. 60-sekundna gradnja s pravim koncem se počuti kot igra. 60-minutna gradnja brez konca se počuti kot tehnična predstavitev. Vedno najprej povežite zaslon zmage, nato vse drugo.

Sobota 13:00 - 20:00: Dodajte eno stopnjo

8. korak: Zgradite eno polirano stopnjo. Ne tri polovično pečene. Uporabite nadomestne kocke za geometrijo. Uporabite standardni lik spretnosti. Občutek za nastavitev - višina skoka, zamik kamere, intenzivnost delcev.

9. korak: Dodajte plast z navodili. Dve povedi "WASD za premikanje, klik za streljanje" pojavno okno ob prvem zagonu reši vaše lansiranje pred zmedenimi igralci, ki obupajo v 8 sekundah. Cursor lahko ustvari plast React (ali navadni DOM) v 30 sekundah.

10. korak: Potiskajte vsako uro. Vsak potisk dobi predogledno povezavo Vercel. Pošljite vsako prijatelju. Zanka povratnih informacij je skrito orožje tega sklada.

Nedelja 10:00 - 16:00: Poliranje

11. korak: Dodajte tri zvoke. Zanka stopal, ambientalni bas, zvonjenje zmage. Tudi trije zvoki bistveno izboljšajo prototip vikenda. Brezplačni viri: freesound.org, opengameart.org.

12. korak: Dodajte sočnost. Delci ob udarcu, stresanje zaslona ob trku, pojavna okna z številkami ob točkovanju. Sočnost je tisto, zaradi česar se gradnja za 48 ur v GIF-u vidi kot šestmesečna. Vprašajte Cursor, naj doda "stresanje zaslona z intenzivnostjo 0,3 za 150 ms, ko igralec prejme škodo" - v petih sekundah bo napisal kljukico za stresanje kamere.

13. korak: Zaženite prehod Lighthouse. Odprite povezavo Vercel na telefonu in zaženite Chrome DevTools Lighthouse. Paketi Three.js so običajno veliki od 400 KB do 1,5 MB. Če ste nad 3 MB, prosite Cursor, naj omogoči delitev kode na težkih modulih. Vercelovi gzip in brotli bosta poskrbela za ostalo.

14. korak: Prehod skozi napake. Petkrat zapored zaigrajte svojo živo povezavo. Popravite vse, kar se pokvari dvakrat. Ignorirajte vse, kar se pokvari enkrat.

Nedelja 16:00 - 20:00: Lansiranje

15. korak: (Neobvezno) Nastavite domeno po meri. Če ste si vnaprej kupili name-game.com, jo dodajte v nastavitve projekta Vercel. SSL je samodejen. Sicer je povezava *.vercel.app v redu - ima HTTPS, je deljena in se nalaga povsod.

16. korak: Posnemite 15-sekundni GIF najboljšega trenutka. Uporabite živo povezavo, ne localhost. GIF je tisto, kar dobi klike na Twitterju, Blueskyju in Redditu.

17. korak: Ustvarite stran itch.io (neobvezno, a zelo učinkovito). Naslov, enovrstični podnaslov, tri posnetke zaslona, GIF, kontrolniki, zasluge in vdelava vašega okvirja *.vercel.app (itch.io podpira vdelave okvirjev za HTML5 igre). Zdaj imate dve povezavi - eno za priložnostno deljenje in drugo za igralčevo publiko.

18. korak: Objavite povezavo. Twitter, Bluesky, vaš Discord razvojne skupnosti, r/IndieDev, r/threejs, r/WebGames. Vedno začnite z GIF-om. Vedno vključite povezavo. Če ste uporabili spretnost Vibe Skills, jo omenite v objavi razvojnega dnevnika - drugi razvijalci, ki berejo, bodo želeli isti zaganjalnik.

Kako se izogniti trem najpogostejšim napakam pri prevzemu Vercel

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

Napačen izhodni direktorij gradnje. 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š prevzem 404.
Poti do sredstev, ki delujejo lokalno, vendar v produkciji vrnejo 404. Uporabite relativne poti ali pripomoček Vite import.meta.env.BASE_URL za katero koli sredstvo GLB, teksturo ali zvok, naloženo med izvajanjem. Potrjene poti /assets/... običajno delujejo, absolutne poti iz sistema Windows, kopirane in nalepljene, zagotovo ne bodo.
CSP glave, ki blokirajo zaklepanje kazalca ali zvočni kontekst. Igre prve osebe potrebujejo zaklepanje kazalca. Zvok potrebuje aktivacijo z gestami uporabnika. Vsaka spretnost iz kategorije 3D iger prinaša pravilen blok headers v vercel.json za obravnavo tega. Če ste ga napisali sami od začetka, kopirajte konfiguracijo iz repozitorija spretnosti.

Prevzem deluje v petek, zato ko se te stvari pokvarijo v nedeljo, je to vedno zaradi nedavne spremembe. git bisect je vaš prijatelj. Še bolje: potiskajte vsakih 30 minut, tako da je pokvarjeni potrditveni poziv majhen.

Pogosto zastavljena vprašanja

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

Da, za lansiranje vikenda in prve tedne. Brezplačni nivo vam daje 100 GB pasovne širine na mesec, kar je približno 20.000 igranj paketa Three.js velikosti 5 MB. Če dosežete to mejo, je Pro načrt 20 $ / mesec in vas dvigne na 1 TB. Za lansiranje vikenda je brezplačno več kot dovolj. Spretosti na Vibe Skills prinašajo konfiguracije gradnje, ki zmanjšujejo velikost paketa, kar še dodatno razširi 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), jo usmerite na Vercel in Vercel bo poskrbel za SSL certifikat. Nastavitev traja približno 10 minut. Če nimate domene, je povezava name-game.vercel.app dovolj kratka, da jo lahko delite na kateri koli platformi.

Je ta sklad v redu za oddajo na igralni jam?

Da, in je eden najboljših skladov za oddaje na jamih. Večina jamov (Ludum Dare, GMTK, js13k, GitHub Game Off) sprejema katero koli spletno predvajalno povezavo. Povezava *.vercel.app deluje za sodnike natanko tako kot povezava itch.io. Mnogi zmagovalci jamov se lansirajo na obeh - itch.io za igralčevo publiko, Vercel kot hitra kanonična povezava.

Ali moram poznati Three.js pred začetkom?

Potrebujete dovolj JavaScripta, da preberete, kar Cursor piše, in prilagajate vrednosti. Ni vam treba pisati Three.js od začetka. Spretosti na Vibe Skills ustvarijo nastavitev motorja, kamero, krmilnik in konfiguracijo gradnje. Cursor obravnava kodo igranja iz vaših opisov.

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

Najpogostejši vzrok je napaka TypeScript ali manjkajoča spremenljivka okolja. Vercel prikaže dnevnik gradnje z poudarjeno vrstico, ki povzroča napako. En klik v nadzorni plošči vrne zadnjo delujočo gradnjo in jo promovira v produkcijo. Ker je vsak potisk predogledna gradnja, ste vedno le en potrditveni poziv oddaljeni od delujoče gradnje. Zato je potiskanje vsakih 30 minut v soboto in nedeljo pomembno.

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

Da. Spretosti na Vibe Skills prinašajo komercialno prijazno licenco, ki vam omogoča, da kodo objavite v svoji igri na Vercelu, itch.io, Steamu ali kjer koli drugje. Ustvarjalci obdržijo intelektualno lastnino spretnosti, vi obdržite intelektualno lastnino igre, zgrajene na vrhu.

Kaj če ne želim uporabljati Cursorja?

Kateri koli urejevalnik umetne inteligence, ki lahko ureja projektne datoteke, deluje. Claude Code, Cursor, Windsurf, GitHub Copilot Chat, Cline - kateri koli od njih lahko iterira na ogrodju Three.js iz spretnosti Vibe Skills. Sama spretnost je neodvisna od urejevalnika.

Odpošljite to ta vikend

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

Vaš portfelj desetih iger, odposlanih čez vikend na Vercelu, je vreden več kot vaš hipotetični sanjski projekt motorja za šest mesecev. Odposlana igra vedno zmaga. Brezplačna povezava Vercel je dokaz.

Brskaj po spretnostih 3D iger na Vibe Skills →

Preskočite maraton predlog Three.js. Namestite spretnost 3D igre na Vibe Skills, potisnite v Vercel in imejte živo povezavo do nedeljske noči.