Stroum Honnerte vu fäerdege Fäegkeeten fir Claude, Cursor, a méi.
Skipsjúðu 3D leik á Vercel um Sunnudagskvöld: 48 klukkustunda dreifingarhandbókin
Þú getur farið frá tómu föstudagskvöldi yfir á tengilinn þinn-leikur.vercel.app fyrir sunnudagsmatinn. Stöflun er Three.js, Cursor, hæfileiki til gervigreindar frá Vibe Skills, og ókeypis þrep Vercel. Heildarkostnaður um helgina: $0. Heildar innviðir sem þú þarft að gæta: líka núll.
Þetta er ekki "smíðaðu frumgerð á fartölvunni þinni og kallaðu það búið". Þetta er opinber URL sem allir í heiminum geta opnað í vafra, með HTTPS, brúnminni, og sérsniðnu léni ef þú vilt. Gervigreindarhæfileikinn skaffar Three.js uppsetningu og virkandi vercel.json. Cursor sér um endurtekningalotuna. Vercel sér um dreifinguna. Þú sérð um hönnunina.
Þessi leiðarvísir er fyrir sjálfstæða forritara, líflegir kóðarar, þátttakendur í hakþoni og alla sem eru þreyttir á hálfbúnum localhost:5173 flipum. Við förum yfir af hverju þessi stafla virkar, 48 klukkustunda dreifingar líffærafræði, fimm 3D leikjahæfileikar smíðaðir fyrir vinnuflæðið, og föstudags- til sunnudags skref fyrir skref.
Stroum Honnerte vu fäerdege Fäegkeeten fir Claude, Cursor, a méi.
Af hverju Vercel + Three.js + Gervigreindarhæfileikar er staflan fyrir einn þróunaraðila
Vercel er mögulegasta dreifingarstaðurinn fyrir Three.js leik. Push í GitHub, Vercel tekur eftir, smíðar verkefnið og gefur þér URL innan 60 sekúndna. Enginn netþjónn til að útvega, engin Docker skrá, engin NGINX stilling, engin SSL uppsetning. Three.js pakki er bara kyrrstæð HTML, JS og WebGL efni, sem er nákvæmlega það sem Vercel brúnnetið var smíðað til að afhenda.
Ókeypis þrepið nær yfir helgar útgáfu þægilega:
- 100 GB bandbreidd á mánuði. 5 MB Three.js pakki við 10.000 spilanir er 50 GB. Þú verður uppiskroppa með helgi áður en þú verður uppiskroppa með bandbreidd.
- Ótakmarkaðar kyrrstæðar dreifingar með HTTPS og
*.vercel.appundirléni. - Sérsniðið lén stuðningur á ókeypis þrepinu - komdu með þitt eigið
nafn-leikur.comef þú átt eitt, annars er ókeypisvercel.appURL deilanlegt á öllum félagsmiðlum. - Forskoðun dreifinga fyrir hverja staðsetningu - hverri push fylgir sitt eigið URL, svo þú getur deilt útgáfu með vini og haldið áfram að endurtaka án þess að brjóta hana.
Bættu við gervigreindarhæfileika frá Vibe Skills og það hverfur líka hljóðdeyfirinn. Three.js vettvangsuppsetning, leikmaður stýring, smíðapípa, og Vercel-tilbúin vercel.json eru búin til með einni skipun. Þá breytir Cursor afgangi helgarinnar í spjall þar sem þú lýsir leiknum sem þú vilt og stillir framleiðsluna. Það er fullur staflinn: markaðshæfileiki fyrir grunninn, AI ritstjóri til að endurtaka, og Vercel fyrir dreifinguna. Einn, ókeypis og hratt.
Stroum Honnerte vu fäerdege Fäegkeeten fir Claude, Cursor, a méi.
48 klukkustundir líffærafræði: Föstudags hugmynd að sunnudags dreifingu
Hver helgar útgáfa sem fer í loftið fylgir sömu áfanga. Leyndarmálið er að skipuleggja dreifinguna á föstudag, ekki sunnudags síðdegis, svo síðustu sex klukkustundirnar fari í yfirferð í stað þess að berjast við byggingarvillu.
| Áfangi | Tímabil | Hvað þú gerir | Hvað er sent í lok áfangans |
|---|---|---|---|
| Áfangi 1: Hugmynd | Föstudagur 18:00 - 22:00 | Veldu tegund, skrifaðu 1 síðu hönnunardokument, settu upp Vibe Skills 3D leikjahæfileika, ýttu upphafi í GitHub, tengdu við Vercel | Lifandi nafn-leikur.vercel.app tengill með upphaflega vettvanginum |
| Áfangi 2: Smíði | Laugardagur 9:00 - 20:00 | Skipta út staðgengli með kjarnaaðferðinni þinni, bæta við 1 borði, fá sigur/tap ástand virkt | Spilanleg útgáfa á sama Vercel tengli, sjálfkrafa send þegar þú ýtir |
| Áfangi 3: Yfirferð | Sunnudagur 10:00 - 16:00 | Hljóð, fegurð, kennsluspjald, villuleit, frammistöðuathugun á farsíma | Útgáfa sem brotnar ekki fyrstu 60 sekúndurnar á hvaða tæki sem er |
| Áfangi 4: Útgáfa | Sunnudagur 16:00 - 20:00 | Stilla sérsniðið lén (valfrjálst), taka upp GIF, skrifa itch.io síðu, birta tengilinn | Opinber URL + itch.io síða + útgáfu færsla á samfélagsmiðlum |
Ástæðan fyrir því að þetta virkar er föstudags push í Vercel. Þegar tengillinn er til, sendir hver laugardags og sunnudags staðsetning sjálfkrafa. Það er engin "sunnudagskvöld dreifingarkvíði" því dreifingin átti sér stað á föstudag og hefur verið í sjálfstýringu alla helgina.
Hvernig "Líflegur Kóða" 3D leik á Vercel lítur út
Líflegur kóða þýðir að lýsa því sem þú vilt á einföldu ensku og láta AI ritstjóra skrifa kóðann, síðan að endurtaka úrkomuna. Fyrir Three.js leik á Vercel er lykkjan óvenju hrein: hver breyting í Cursor er pnpm dev í burtu frá staðbundinni endurgjöf, síðan git push í burtu frá lifandi forskoðunar tengli, síðan sjálfkrafa dreift í framleiðslu á main.
Helgar líflegur kóða Vercel leikur lítur svona út:
- Opna upphafsmappan í Cursor.
- Lýstu eiginleika í spjalli: "tvöfalt stökk ef bil er ýtt tvisvar innan 200ms".
- Cursor breytir stýrimöppunni. Vista.
pnpm devhleður aftur. Þú finnur stökkið í vafranum. - Ef það líður rétt,
git push. Vercel byggir forskoðunartengil. Sendu honum til vinar. - Sameinaðu í
mainþegar tilfinningin er læst. Framleiðslutengill uppfærist innan 60 sekúndna.
AI gerir leturritunina. Vercel sér um dreifinguna. Þú sérð um tilfinninguna og hönnunina.
5 Gervigreind 3D leikjahæfileikar sem gera þetta mögulegt á Vibe Skills
Þessir hæfileikar eru smíðaðir fyrir Vercel + Three.js + Cursor helgarvinnuflæðið. Hver og einn afhendir með Vite-basað Three.js verkefni, virkt vercel.json, pnpm build sem framleiðir kyrrstæðan pakka sem Vercel getur afhent frá brúninni, og prófaða dreifingarleið. Allir eru í 3D Leikja flokknum á Vibe Skills.
1. Three.js + Vercel Leik Upphafsmappa
Sjálfgefinn valkostur. Býr til Three.js vettvang með leikmannastýringu, þriðju persónu myndavél, ljósabúnaði, himnaskjá, og grunnflöt með árekstrum. Afhendir með vercel.json sem stillir rétta brúnminnis haus fyrir Three.js efnapakka. pnpm dev keyrir staðbundið; eitt smell í Vercel mælaborðinu tengir GitHub geymslu og þú hefur lifandi tengil.
Best fyrir: hvaða tegund sem er nema hreinar 2D. Notaðu þetta ef þú veist ekki enn hvað þú ert að byggja.
2. Fyrstu Persónu Vercel Göngumaður
Yfirfarin fyrstu persónu stýring (WASD + músarlæsing + þyngdarafl + skokkur + stökk) með skrefahaldara, höfuðhristing, og vercel.json sem sér um rétta CSP haus fyrir músarlæsinguna. Þetta hrasar mörg sjálfstæð forritara í framleiðslu. Hæfileikinn leysir það fyrir þig.
Best fyrir: göngusimuleringar, hryllings frumgerðir, sögulega leiki, listasafnssýningar.
3. Vafra Arenna Skotleikja Búnaður
Top-down arena (tvöföld stýring, bylgju spawna, grunn AI óvina, skotkerfi, stigamælir) með Vercel-stilltri byggingu sem zipar efni, kóðaskiptir AI og hleður tónlist seint. Margspilarahaldarar innifaldir; helgin afhendir eins spilara.
Best fyrir: spilakassaskotleikja, skothellis, keppnisgreinar sem þurfa að hlaðast hratt á farsíma.
4. Vercel Puzzle Platformer
Þriðju persónu platformer (breytilegt stökk, coyote tími, þrepaskynjun), prófunarstöðvar, þrjú stubbaborð sem þú getur breytt í Blender eða í kóða, og endurlífgunarlykkja. vercel.json er stillt fyrir tafarlausa brúnminnis endurhleðslu borða, svo prófun líður hratt á síma.
Best fyrir: puzzle platformers, parkour frumgerðir, tilraunir með borðhönnun.
5. Vercel Akstur Sandbox
Spilakassa aksturs tilfinning (hraðakúrfa, skriðuaðgerðar eðlisfræði, myndavélar tregðu, grunn landslag) með lágu pólý bíl, brautar sniðmáti, og dreifingu stilltri fyrir stóra landslags möskva. Forstilla HTTP hausar gera WebGL samhengið byrja hraðar á Safari, sögulega hægast vafra fyrir Three.js.
Best fyrir: spilakassakappakstur, utanvega akstur, bíl-tilfinning sýningar fyrir eignasafn.
Skoðaðu alla 3D leikjahæfileika á Vibe Skills →
Föstudagur til Sunnudags Skref fyrir Skref
Þetta er nákvæm dagskrá. Breyttu upphafs tímanum, en haltu röðinni. Lykiláfangi er föstudagskvölds Vercel dreifing. Allt eftir það er endurtekning.
Föstudagur 18:00 - 20:00: Veldu Hæfileika, Ýttu í GitHub, Tengdu Vercel
Skref 1: Veldu 3D leikjahæfileika á Vibe Skills. Skoðaðu 3D Leikir flokkinn, veldu þann sem passar við tegundina þína, og settu upphafið í nýja möppu. Opnaðu hana í Cursor. Þú ættir að sjá Three.js vettvang með hreyfanlegum leikmanni klukkan 19:00.
Skref 2: Búðu til GitHub geymslu og ýttu á. git init, git remote add, git push. Notaðu slug leiksins þíns sem geymsluheiti (crystal-runner, lunar-fishing, hvað sem er). Geymsluheitið verður oft URL þitt.
Skref 3: Tengdu geymsluna við Vercel. Skráðu þig inn á Vercel með GitHub (ókeypis), smelltu á "Add New Project", veldu geymsluna. Vercel greinir sjálfkrafa Vite og stillir bygginguna. Smelltu á Deploy. Innan 60 sekúndna færðu crystal-runner.vercel.app URL. Opnaðu það á farsímanum þínum. Deildu með einum vini. Dreifingarstika er nú núll fyrir afganginn af helginni.
Föstudagur 20:00 - 22:00: Skrifaðu Hönnunardokumentið
Skref 4: Svaraðu fimm spurningum á einfaldri ensku. Opnaðu Notion síðu eða markdown skrá innan í geymslunni og svaraðu:
- Hvað er leikmaðurinn að gera á 5 sekúndna fresti? (kjarnalykkjan)
- Hver er sigursskilyrði og tapsskilyrði?
- Hversu lengi er ein keyrsla eða eitt borð?
- Hver er sjónræni krókurinn? (paletta, ljós, stíltilvísun)
- Hver er sá eiginleiki sem gerir þetta eftirminnilegt á 30 sekúndum?
Skref 5: Staðfestu hönnunardokumentið. Ýttu því í geymsluna. Vercel mun dreifa aftur. Aginn við að ýta hverri marktækri breytingu heldur lifandi URL heiðarlegum.
Laugardagur 9:00 - 13:00: Smíðaðu Kjarnaaðferðina
Skref 6: Skipta út staðgengli eiginleika með þínum eina eiginleika. Þetta er eini eiginleikinn sem skiptir máli. Notaðu Cursor spjall til að lýsa honum ("þegar leikmaðurinn tekur upp kristal, frystu óvini í nágrenninu í 2 sekúndur og spilaðu hljóðmerki"). Endurtaka staðbundið með pnpm dev. Þegar það líður rétt, ýttu.
Skref 7: Vírra sigur/tap ástandið. 60 sekúndna útgáfa með alvöru endi líður eins og leikur. 60 mínútna útgáfa án endis líður eins og tæknidæmi. Alltaf vírra sigurspjaldið fyrst, síðan allt annað.
Laugardagur 13:00 - 20:00: Bættu við einu borði
Skref 8: Smíðaðu eitt yfirfarið borð. Ekki þrjú hálfgefin. Notaðu staðgengla teninga fyrir rúmfræði. Notaðu birgða persónu hæfileikans. Stilltu tilfinningu - stökk hæð, myndavélar tregðu, agna styrkleiki.
Skref 9: Bættu við kennsluyfirborði. Tveggja setninga "WASD til að hreyfa, smelltu til að skjóta" sprettigluggi við fyrstu keyrslu bjargar útgáfu þinni frá rugluðum leikurum sem gefast upp á 8 sekúndum. Cursor getur búið til React (eða venjulegt DOM) yfirborð á 30 sekúndum.
Skref 10: Ýttu á hverja klukkustund. Hver push fær Vercel forskoðunartengil. Sendu hverja þeirra til vinar. Endurgjöfalínan er leyndarvopn þessa stafla.
Sunnudagur 10:00 - 16:00: Yfirferð
Skref 11: Bættu við þremur hljóðum. Skreppandi hljóð, umhverfis hljómsveit, sigur hljóð. Jafnvel þrjú hljóð lyfta helgar frumgerð verulega. Ókeypis heimildir: freesound.org, opengameart.org.
Skref 12: Bættu við fegurð. Agnir við högg, skjáhrökkvi við árekstur, númer sprettir á stigum. Fegurð er það sem gerir 48 klukkustunda útgáfu líta út eins og 6 mánaða útgáfu í GIF. Spyrðu Cursor að bæta við "skjáhristing af styrkleika 0.3 í 150ms þegar leikmaður tekur skaða" - það mun skrifa myndavélar-hristing haldarann á fimm sekúndum.
Skref 13: Keyrðu Lighthouse próf. Opnaðu Vercel URL á farsíma og keyrðu Chrome DevTools Lighthouse. Three.js pakkar eru venjulega um 400 KB til 1.5 MB. Ef þú ert yfir 3 MB, spurðu Cursor að virkja kóðaskiptingu á þungum einingum. Vercel's gzip og brotli sér um afganginn.
Skref 14: Villuleit. Spilaðu lifandi URL þinn fimm sinnum í röð. lagaðu allt sem brotnar tvisvar. Hunsa allt sem brotnar einu sinni.
Sunnudagur 16:00 - 20:00: Útgáfa
Skref 15: (Valfrjálst) Settu sérsniðið lén. Ef þú keyptir nafn-leikur.com áður, bættu því við í Vercel verkefnastillingum. SSL er sjálfvirkt. Annars er *.vercel.app URL fínt - það hefur HTTPS, það er deilanlegt, og það hleðst alls staðar.
Skref 16: Taktu upp 15 sekúndna GIF af besta augnablikinu. Notaðu lifandi URL, ekki localhost. GIFið er það sem klikkar á Twitter, Bluesky og Reddit.
Skref 17: Búðu til itch.io síðu (valfrjálst en mikilvægt). Titill, eins setningar slagorð, þrjár skjámyndir, GIF-ið, stýringar, heiður, og innbygging á *.vercel.app iframe þínum (itch.io styður iframe innbyggingar fyrir HTML5 leiki). Nú hefur þú tvo URL - einn fyrir frjálslegar deilingar og einn fyrir leikjasamfélagið.
Skref 18: Birta tengilinn. Twitter, Bluesky, þinn þróunaraðila Discord, r/IndieDev, r/threejs, r/WebGames. Alltaf byrja með GIF-inu. Alltaf láta URL fylgja. Ef þú notaðir Vibe Skills hæfileika, nefndu það í þróunardagbókarfærslunni - aðrir þróunaraðilar sem lesa með munu vilja sama upphafsþáttinn.
Hvernig á að forðast þrjár algengustu Vercel dreifingarbilanir
Þrjú atriði brjóta næstum alla einmennska Three.js + Vercel helgi. Allir þrír eru 5 mínútna lagfæringar ef þú finnur þá á föstudagskvöld, og 5 klukkustunda kanínugöt ef þú uppgötvar þá á sunnudag klukkan 19:00.
- Rangt byggingarútgangsmappa. Vite er sjálfgefið
dist/. Vercel greinir sjálfkrafa Vite og notardist/. Ef þú sérsniðaðir útgönguna, settuoutputDirectoryívercel.jsoneða verkefnisstillingum eða dreifing þín verður 404. - Efnaleiðir sem virka staðbundið en fá 404 í framleiðslu. Notaðu hlutfallslegar leiðir eða Vite
import.meta.env.BASE_URLhjálparinn fyrir hvaða runtime-hlaðna GLB, áferð eða hljóðskrá sem er. Fastkodaðar/assets/...leiðir virka venjulega, en afritaðar og límdar Windows leiðir munu algjörlega ekki virka. - CSP hausar sem loka músarlæsingunni eða hljóðsamhengi. Fyrstu persónu leikir þurfa músarlæsinguna. Hljóð þarf notendaviðbragð virkjun. Hvaða hæfileiki frá 3D Leikir flokknum sendir með réttu
headersblokkina ívercel.jsontil að sjá um þetta. Ef þú skrifaðir þinn eigin frá grunni, afritaðu stillinguna frá geymslu hæfileikans.
Dreifingin virkar á föstudag, svo þegar þetta brotnar á sunnudag er það alltaf vegna nýlegrar breytingar. git bisect er vinur þinn. Jafnvel betra: haltu áfram að ýta á hverja 30 mínútur svo brotin staðsetning sé lítil.
Algengar spurningar
Mun Vercel ókeypis þrep duga ef leikurinn minn fær umferð?
Já fyrir helgar útgáfu og fyrstu vikurnar. Ókeypis þrep gefur þér 100 GB bandbreidd á mánuði, sem er um það bil 20.000 spilanir af 5 MB Three.js pakka. Ef þú hittir þetta þak, er Pro áætlunin $20/mánuði og eykur þig í 1 TB. Fyrir helgar útgáfu er ókeypis meira en nóg. Hæfileikar á Vibe Skills senda með byggingarstillingum sem lágmarka pakkastærð, sem lengir ókeypis þrepið lengra.
Get ég notað sérsniðið lén á Vercel ókeypis þrepinu?
Já. Ókeypis þrepið styður sérsniðin lén með sjálfvirkum HTTPS. Kaupa lén (Namecheap, Cloudflare Registrar, Porkbun), benda það á Vercel, og Vercel sér um SSL vottorðið. Uppsetning tekur um 10 mínútur. Ef þú átt ekki lén, er nafn-leikur.vercel.app tengillinn nógu stuttur til að deila á hvaða vettvang sem er.
Er þessi stafla í lagi fyrir keppnissendingu?
Já, og það er einn af bestu stöflunum fyrir keppnissendingar. Flestar keppnir (Ludum Dare, GMTK, js13k, GitHub Game Off) samþykkja hvaða vefspilanlega URL sem er. *.vercel.app tengill virkar nákvæmlega eins og itch.io URL fyrir dómara. Margir keppnis sigurvegarar senda á báða staði - itch.io fyrir leikjasamfélagið, Vercel sem hratt kanonískt URL.
Þarf ég að kunna Three.js áður en ég byrja?
Þú þarft nægilegt JavaScript til að lesa það sem Cursor skrifar og stilla gildi. Þú þarft ekki að skrifa Three.js frá grunni. Hæfileikarnir á Vibe Skills búa til vélaruppsetningu, myndavél, stýringu og byggingarstillingu. Cursor sér um leikjakóðann úr lýsingum þínum.
Hvað gerist ef Vercel byggingin mín bilar á sunnudag klukkan 19:00?
Algengasta orsökin er TypeScript villa eða vantar umhverfisbreytu. Vercel sýnir byggingarskránna með bilaða línunni auðkennda. Eitt smell í mælaborðinu skilar aftur til síðustu vinnandi dreifingar og kynnir hana í framleiðslu. Vegna þess að hver push er forskoðun dreifing, ertu aldrei meira en eina staðsetningu frá vinnandi útgáfu. Þetta er ástæðan fyrir því að ýta á hverja 30 mínútur á laugardag og sunnudag skiptir máli.
Get ég selt eða breytt kóðanum úr Vibe Skills 3D leikjahæfileika?
Já. Hæfileikar á Vibe Skills senda með viðskiptavænu leyfi sem leyfir þér að gefa út kóðann í eigin leik á Vercel, itch.io, Steam, eða hvar sem er annars staðar. Skaparar halda IP af hæfileikanum, þú heldur IP af leiknum smíðuðum ofan á.
Hvað ef ég vil ekki nota Cursor?
Hvaða AI ritstjóri sem getur breytt verkefnisskrám virkar. Claude Code, Cursor, Windsurf, GitHub Copilot Chat, Cline - hvaða sem er af þeim getur endurtekið á Three.js uppsetningu frá Vibe Skills hæfileika. Hæfileikinn sjálfur er ritstjóri-agnósti.
Skipsjúðu það þessa helgi
Ástæðan fyrir því að flestir sjálfstæðir forritarar senda aldrei 3D leik er ekki vélin, tegundin eða hæfileikastigið. Það er föstudagskvöld þar sem þeir "rannsaka bara aðeins meira" og byrja aldrei. Næstu fríu helgi sem þú hefur, fylgdu fjögurra áfanga planinu: settu upp Vibe Skills 3D leikjahæfileika, ýttu í GitHub, tengdu Vercel, sendu fyrir föstudag klukkan 20:00, síðan eyddi laugardegi og sunnudegi í að endurtaka á lifandi URL.
Eignasafn þitt af tíu helgar-skipsjóðum leikjum á Vercel er meira virði en hugsjóna sex mánaða drauma vélarverkefnið þitt. Sá sem var skipsjóðinn vinnur alltaf. Ókeypis Vercel URL er sönnunin.
Skoðaðu 3D leikjahæfileika á Vibe Skills →
Slepptu Three.js upphafsmarathoninu. Settu upp 3D leikjahæfileika á Vibe Skills, ýttu á Vercel, og hafðu lifandi URL fyrir sunnudagskvöld.