Kaip šį savaitgalį paleisti 3D žaidimą „Vercel“ (su DI įgūdžiais)

Vibe Skills

Naršykite šimtus paruoštų įgūdžių, skirtų Claude, Cursor ir kitiems.

Naršyti įgūdžius

Pradėti dabar nemokamai

Atidavimas 3D žaidimo į Vercel iki sekmadienio vakaro: 48 valandų paleidimo vadovas

Jūs galite pereiti nuo tuščio penktadienio vakaro iki jūsų-žaidimo.vercel.app nuorodos iki sekmadienio vakarienės. Technologijų rinkinys yra Three.js, Cursor, AI įgūdis iš Vibe Skills ir nemokamas Vercel lygis. Bendra savaitgalio kaina: 0 USD. Bendra infrastruktūra, kurią turite prižiūrėti: taip pat nulis.

Tai ne "sukurkite prototipą savo nešiojamame kompiuteryje ir vadinkite jį baigtu". Tai vieša URL, kurią bet kas pasaulyje gali atidaryti naršyklėje, su HTTPS, kraštiniu spartinimu atmintyje ir pasirinktiniu domenu, jei jo norite. AI įgūdis pristato Three.js pagrindą ir veikiantį vercel.json. Cursor valdo iteracijos ciklą. Vercel valdo paleidimą. Jūs valdote dizainą.

Šis vadovas skirtas nepriklausomiems kūrėjams, "vibe" programuotojams, "hackathon" dalyviams ir visiems, kam pabodo pusiau baigti localhost:5173 skirtukai. Apžvelgsime, kodėl šis technologijų rinkinys veikia, 48 valandų paleidimo anatomiją, penkis 3D žaidimų įgūdžius, sukurtus darbo eigai, ir žingsnis po žingsnio nuo penktadienio iki sekmadienio.

Vibe Skills

Naršykite šimtus paruoštų įgūdžių, skirtų Claude, Cursor ir kitiems.

Naršyti įgūdžius

Pradėti dabar nemokamai

Kodėl Vercel + Three.js + AI įgūdžiai yra Solo Kūrėjo Technologijų Rinkinys

Vercel yra lengviausias galimas Three.js žaidimo paleidimo tikslas. Paspauskite "GitHub", Vercel pastebi, sukuria projektą ir per 60 sekundžių grąžina jums URL. Nėra serverio, kurį reikia parūpinti, nėra "Docker" failo, nėra NGINX konfigūracijos, nėra SSL sąrankos. Three.js paketas yra tik statinis HTML, JS ir "WebGL" turinys, o tai yra būtent tai, kam Vercel kraštinis tinklas buvo sukurtas.

Nemokamas lygis patogiai padengia savaitgalio paleidimą:

• 100 GB pralaidumo per mėnesį. 5 MB Three.js paketas su 10 000 paleidimų yra 50 GB. Jums pritrūks savaitgalio anksčiau, nei pritrūks pralaidumo.
• Neriboti statiniai paleidimai su HTTPS ir *.vercel.app subdomenu.
• Pasirinktinių domenų palaikymas nemokamu lygiu - atsineškite savo vardas-zaidimas.com, jei turite, kitaip nemokamas vercel.app URL yra dalijamas visose socialinėse platformose.
• Peržiūros paleidimai kiekvienam pakeitimui - kiekvienas paspaudimas gauna savo URL, todėl galite pasidalinti paketu su draugu ir tęsti iteraciją jo nesulaužydami.

Pridėkite AI įgūdį iš Vibe Skills ir standartinis kodas taip pat išnyksta. Three.js scenos sąranka, žaidėjo valdiklis, kūrimo sistema ir "Vercel" paruoštas vercel.json generuojami vienu komandų. Tada "Cursor" paverčia likusį savaitgalį pokalbiu, kuriame apibūdinamas norimas žaidimo eigą ir derinamas rezultatas. Tai yra visas technologijų rinkinys: prekyvietės įgūdis pamatu, AI redaktorius iteracijai, o Vercel - paleidimui. Solo, nemokamai ir greitai.

Vibe Skills

Naršykite šimtus paruoštų įgūdžių, skirtų Claude, Cursor ir kitiems.

Naršyti įgūdžius

Pradėti dabar nemokamai

48 Valandų Anatomija: Penktadienio Koncepcija iki Sekmadienio Paleidimo

Kiekvienas savaitgalio paleidimas, kuris iš tikrųjų įvyksta, seka tuos pačius etapus. Svarbiausia yra suplanuoti paleidimą penktadienį, o ne sekmadienio popietę, kad paskutinės šešios valandos būtų skirtos šlifavimui, o ne kovai su klaida.

Priežastis, kodėl tai veikia, yra penktadienio paspaudimas į Vercel. Kai URL egzistuoja, kiekvienas šeštadienio ir sekmadienio pakeitimas automatiškai paleidžiamas. Nėra "sekmadienio vakaro paleidimo panikos", nes paleidimas jau įvyko penktadienį ir veikė autopiloto režimu visą savaitgalį.

Kaip atrodo "Vibe" Kodavimas 3D Žaidimo Vercel

"Vibe" kodavimas reiškia apibūdinti, ko norite, paprasta anglų kalba ir leisti dirbtinio intelekto redaktoriui rašyti kodą, tada tobulinti rezultatą. Three.js žaidimui "Vercel" ciklą yra neįprastai švarus: kiekvienas pakeitimas "Cursor" yra pnpm dev toli nuo vietinio grįžtamojo ryšio, tada git push toli nuo gyvo peržiūros URL, tada automatiškai paleidžiamas į produkciją main faile.

"Vibe" koduotas "Vercel" žaidimo savaitgalis atrodo taip:

1. Atidarykite įgūdžio pradinį aplanką "Cursor".
2. Apibūdinkite funkciją pokalbyje: "dvigubas šuolis, jei paspaudžiama tarpas du kartus per 200 ms".
3. "Cursor" redaguoja valdiklio failą. Išsaugoti. pnpm dev persikrauna. Jūs jaučiate šuolį naršyklėje.
4. Jei jaučiasi gerai, git push. Vercel sukuria peržiūros URL. Siųskite jį draugui.
5. Sujunkite į main, kai jausmas bus užfiksuotas. Gamybos URL atnaujinamas per 60 sekundžių.

Dirbtinis intelektas atlieka rašymą. Vercel atlieka paleidimą. Jūs atliekate jausmą ir dizainą.

5 AI 3D Žaidimų Įgūdžiai, Kurie Tai Padaro Įmanomais Vibe Skills

Šie įgūdžiai yra sukurti "Vercel + Three.js + Cursor" savaitgalio darbo eigai. Kiekvienas iš jų pristato "Vite" pagrįstą "Three.js" projektą, veikiantį vercel.json, pnpm build, kuris sukuria statinį paketą, kurį "Vercel" gali tiekti iš krašto, ir išbandytą paleidimo kelią. Visi jie yra 3D žaidimų kategorijoje "Vibe Skills".

1. Three.js + Vercel Žaidimo Pradžia

Numatytasis pasirinkimas. Generuoja "Three.js" sceną su žaidėjo valdikliu, trečiojo asmens kamera, apšvietimo sistema, dangaus dėže ir žemės plokštuma su susidūrimais. Pristato su vercel.json, kuris nustato tinkamas "Three.js" turinio paketų spartinimo atmintyje antraštes. pnpm dev veikia lokaliai; vienas paspaudimas "Vercel" valdymo skydelyje prijungia "GitHub" saugyklą ir turite gyvą URL.

Geriausiai tinka: bet kokiam žanrui, išskyrus grynai 2D. Naudokite šį, jei dar nežinote, ką kuriate.

2. Pirmojo Asmens Vercel Walker

Tobulas pirmojo asmens valdiklis (WASD + pelės užraktas + gravitacija + bėgimas + šuolis) su pėdų garsų jungtimis, galvos drebėjimu ir vercel.json, kuris tinkamai tvarko "pointer-lock" CSP antraštes. Tai dažnai suklaidina solo kūrėjus gamyboje. Įgūdis išsprendžia tai už jus.

Geriausiai tinka: ėjimo simuliatoriams, siaubo prototipams, pasakojimo žaidimams, muziejų parodoms.

3. Naršyklės Arena Šaudyklės Rinkinys

Viršutinio vaizdo arena (dvigubo strypo valdiklis, bangų generavimas, pagrindinis priešo AI, projektilių sistema, rezultatų HUD) su "Vercel" suderintu paketu, kuris suspaudžia turinį, suskirsto AI į dalis ir atideda muzikos įkėlimą. Daugialypio ryšio jungtys įtrauktos; savaitgalį pristatomas vieno žaidėjo režimas.

Geriausiai tinka: arkadiniams šaudyklėms, kulkų pragaro žaidimams, "jam" įrašams, kuriems reikia greito įkėlimo mobiliajame telefone.

4. Vercel Dėlionės Platformeris

Trečiojo asmens platformeris (kintamas šuolis, "coyote time", atpažinimas nuo krašto), kontrolės punktai, trys laikini lygiai, kuriuos galite redaguoti "Blender" arba kode, ir persikrovimo ciklas. vercel.json sukonfigūruotas momentiniam kraštinio spartinimo atmintyje lygių perkrovimui, todėl žaidimo testavimas telefone jaučiasi greitas.

Geriausiai tinka: dėlionės platformeriams, parkūro prototipams, lygių dizaino eksperimentams.

5. Vercel Vairavimo Smėlio Dėžė

Arkadinio vairavimo pojūtis (pagreičio kreivė, slydimo fizika, kameros vėlavimas, pagrindinis reljefas) su mažai poligoniu automobiliu, trasos šablonu ir paleidimu, suderintu dideliems reljefo tinkleliniams elementams. Iš anksto nustatytos HTTP antraštės leidžia "WebGL" kontekstui greičiau pradėti veikti "Safari", istoriškai lėčiausioje naršyklėje "Three.js".

Geriausiai tinka: arkadinėms lenktynėms, bekelės vairavimui, automobilio pojūčio demonstracijoms portfeliui.

Naršyti visus 3D žaidimų įgūdžius Vibe Skills →

Penktadienis - Sekmadienis Žingsnis Po Žingsnio

Tai yra tikslus tvarkaraštis. Sureguliuokite pradžios laiką, bet išlaikykite tvarką. Pagrindinis tikslas yra penktadienio vakaro "Vercel" paleidimas. Viskas po to yra iteracija.

Penktadienis 18:00 - 20:00: Pasirinkite Įgūdį, Paspauskite į GitHub, Prijunkite Vercel

1 žingsnis: Pasirinkite 3D žaidimo įgūdį Vibe Skills. Naršykite 3D žaidimų kategorijoje, pasirinkite tą, kuris atitinka jūsų žanrą, ir įdiekite pradinį kodą į naują aplanką. Atidarykite jį "Cursor". Iki 19:00 val. turėtumėte matyti "Three.js" sceną su judančiu žaidėju.

2 žingsnis: Sukurkite "GitHub" saugyklą ir paspauskite. git init, git remote add, git push. Naudokite savo žaidimo slengą kaip saugyklos pavadinimą (crystal-runner, lunar-fishing, bet ką). Saugyklos pavadinimas dažnai tampa jūsų URL.

3 žingsnis: Prijunkite saugyklą prie Vercel. Prisijunkite prie "Vercel" su "GitHub" (nemokamai), spustelėkite "Add New Project", pasirinkite saugyklą. "Vercel" automatiškai atpažįsta "Vite" ir sukonfigūruoja kūrimą. Spustelėkite "Deploy". Per 60 sekundžių turėsite crystal-runner.vercel.app URL. Atidarykite jį savo telefone. Pasidalinkite su vienu draugu. Paleidimo juosta dabar yra nulis visam likusiam savaitgaliui.

Penktadienis 20:00 - 22:00: Parašykite Dizaino Dokumentą

4 žingsnis: Atsakykite į penkis klausimus paprasta anglų kalba. Atidarykite "Notion" puslapį arba "markdown" failą saugykloje ir atsakykite:

• Ką žaidėjas daro kas 5 sekundes? (pagrindinis ciklas)
• Kokia yra laimėjimo sąlyga ir pralaimėjimo sąlyga?
• Kiek laiko trunka vienas bėgimas ar vienas lygis?
• Koks yra vizualinis kabliukas? (paletė, apšvietimas, stiliaus nuoroda)
• Kokia yra viena funkcija, kuri daro šį žaidimą įsimintinu per 30 sekundžių?

5 žingsnis: Užfiksuokite dizaino dokumentą. Paspauskite jį į saugyklą. "Vercel" vėl paleis. Disciplina, paspaudžiant kiekvieną reikšmingą pakeitimą, išlaiko gyvą URL sąžiningą.

Šeštadienis 9:00 - 13:00: Sukurkite Pagrindinį Mechanizmą

6 žingsnis: Pakeiskite laikinojo mechanizmo funkcija savo viena funkcija. Tai vienintelė svarbi funkcija. Naudokite "Cursor" pokalbį, kad ją apibūdintumėte ("kai žaidėjas paima kristalą, užšaldyk netoliese esančius priešus 2 sekundėms ir grok čimbalais"). Iteruokite lokaliai su pnpm dev. Kai jaučiasi gerai, paspauskite.

7 žingsnis: Vielos laimėjimo/pralaimėjimo būsena. 60 sekundžių paketas su tikra pabaiga jaučiasi kaip žaidimas. 60 minučių paketas be pabaigos jaučiasi kaip techninis demonstracinis. Visada pirmiausia vielos laimėjimo ekranas, tada viskas kita.

Šeštadienis 13:00 - 20:00: Pridėkite Vieną Lygį

8 žingsnis: Sukurkite vieną poliruotą lygį. Ne tris pusiau sukeptas. Naudokite laikinius kubelius geometrijai. Naudokite įgūdžio standartinį personažą. Derinkite pojūtį - šuolio aukštį, kameros vėlavimą, dalelių intensyvumą.

9 žingsnis: Pridėkite mokymo programos perdangą. Dviem sakiniais "WASD judėti, spustelėkite, kad šaudytumėte" iššokantis langas pirmą kartą paleidus taupo jūsų paleidimą nuo pasimetusių žaidėjų, kurie pasiduoda per 8 sekundes. "Cursor" gali sugeneruoti "React" (arba paprastą DOM) perdangą per 30 sekundžių.

10 žingsnis: Paspauskite kas valandą. Kiekvienas paspaudimas gauna "Vercel" peržiūros URL. Siųskite kiekvieną draugui. Grįžtamasis ryšys yra šio technologijų rinkinio paslėptas ginklas.

Sekmadienis 10:00 - 16:00: Šlifavimas

11 žingsnis: Pridėkite tris garsus. Pėdų garsų kilpa, aplinkos garsas, laimėjimo skambėjimas. Net trys garsai žymiai pakelia savaitgalio prototipą. Nemokami šaltiniai: freesound.org, opengameart.org.

12 žingsnis: Pridėkite patobulinimų. Dalelės pataikius, ekrano drebėjimas susidūrus, skaičių iššokantys langai ant rezultato. Patobulinimai yra tai, kas daro 48 valandų paketą panašų į 6 mėnesių paketą GIF formatu. Paprašykite "Cursor" pridėti "ekrano drebėjimą intensyvumu 0,3 150 ms, kai žaidėjas patiria žalą" - jis parašys kameros drebėjimo jungiklį per penkias sekundes.

13 žingsnis: Paleiskite "Lighthouse" testą. Atidarykite "Vercel" URL mobiliajame telefone ir paleiskite "Chrome DevTools Lighthouse". "Three.js" paketai paprastai yra nuo 400 KB iki 1,5 MB. Jei viršijate 3 MB, paprašykite "Cursor" įjungti didelių modulių suskirstymą į dalis. "Vercel" gzip ir brotli pasirūpins likusiu.

14 žingsnis: Klaidos apžvalga. Žaiskite savo gyvą URL penkis kartus iš eilės. Pataisykite viską, kas sugenda du kartus. Ignoruokite viską, kas sugenda kartą.

Sekmadienis 16:00 - 20:00: Paleidimas

15 žingsnis: (Pasirinktinai) Nustatykite pasirinktinį domeną. Jei anksčiau įsigijote vardas-zaidimas.com, pridėkite jį "Vercel" projekto nustatymuose. SSL yra automatinis. Kitu atveju *.vercel.app URL yra tinkamas - jis turi HTTPS, yra dalijamas ir įkeliamas visur.

16 žingsnis: Įrašykite 15 sekundžių GIF iš geriausios akimirkos. Naudokite gyvą URL, ne localhost. GIF yra tai, kas gauna paspaudimus "Twitter", "Bluesky" ir "Reddit".

17 žingsnis: Sukurkite "itch.io" puslapį (pasirinktinai, bet labai naudinga). Pavadinimas, vienos eilutės šūkis, trys ekrano nuotraukos, GIF, valdikliai, kreditai ir jūsų *.vercel.app iframe įterpimas ("itch.io" palaiko iframų įterpimus HTML5 žaidimams). Dabar turite du URL - vieną atsitiktiniam dalijimuisi ir vieną žaidėjų auditorijai.

18 žingsnis: Paskelbkite nuorodą. "Twitter", "Bluesky", jūsų kūrėjų bendruomenės "Discord", r/IndieDev, r/threejs, r/WebGames. Visada pradėkite su GIF. Visada įtraukite URL. Jei naudojote "Vibe Skills" įgūdį, paminėkite jį kūrimo dienoraštyje - kiti kūrėjai, skaitantys toliau, norės to paties pradinio kodo.

Kaip Vengti Trijų Dažniausių Vercel Paleidimo Klaidų

Trys dalykai sulaužo beveik kiekvieną solo "Three.js + Vercel" savaitgalį. Visos trys yra 5 minučių pataisymai, jei juos pagausite penktadienio vakarą, ir 5 valandų triušių urvai, jei juos atrasite sekmadienį 19:00.

• Netinkamas kūrimo išvesties katalogas. "Vite" numatytasis yra dist/. "Vercel" automatiškai atpažįsta "Vite" ir naudoja dist/. Jei pritaikėte išvestį, nustatykite outputDirectory vercel.json arba projekto nustatymuose, kitaip jūsų paleidimas bus 404.
• Turinio keliai, kurie veikia lokaliai, bet 404 gamyboje. Naudokite santykinius kelius arba "Vite" import.meta.env.BASE_URL pagalbininką bet kokiems vykdymo metu įkeliamiems GLB, tekstūros ar garso failams. Kietai užkoduoti /assets/... keliai paprastai veikia, bet nukopijuoti absoliutūs "Windows" keliai tikrai neveiks.
• CSP antraštės, blokuojančios "pointer lock" arba garso kontekstą. Pirmojo asmens žaidimams reikia "pointer lock". Garsui reikia vartotojo gestų aktyvacijos. Bet koks įgūdis iš 3D žaidimų kategorijos pristato tinkamą headers bloką vercel.json, kad tai tvarkytų. Jei rašėte savo nuo nulio, nukopijuokite konfigūraciją iš įgūdžio saugyklos.

Paleidimas veikia penktadienį, todėl kai sekmadienį 19:00 viskas sugenda, tai visada dėl neseniai atlikto pakeitimo. git bisect yra jūsų draugas. Dar geriau: paspauskite kas 30 minučių, kad sugadintas pakeitimas būtų mažas.

Dažnai Užduodami Klausimai

Ar Vercel nemokamas lygis tikrai atlaikys, jei mano žaidimas sulauks srauto?

Taip, savaitgalio paleidimui ir pirmosioms savaitėms. Nemokamas lygis suteikia 100 GB pralaidumo per mėnesį, o tai yra maždaug 20 000 5 MB "Three.js" paketo paleidimų. Jei pasieksite šią ribą, "Pro" planas kainuoja 20 USD per mėnesį ir padidina jus iki 1 TB. Savaitgalio paleidimui nemokamai yra daugiau nei pakankamai. "Vibe Skills" įgūdžiai pristatomi su kūrimo konfigūracijomis, kurios sumažina paketo dydį, todėl nemokamas lygis tęsiasi ilgiau.

Ar galiu naudoti pasirinktinį domeną nemokamame Vercel lygyje?

Taip. Nemokamas lygis palaiko pasirinktinius domenus su automatiniu HTTPS. Įsigykite domeną (Namecheap, Cloudflare Registrar, Porkbun), nukreipkite jį į Vercel, o Vercel pasirūpins SSL sertifikatu. Sąranka užtrunka apie 10 minučių. Jei neturite domeno, vardas-zaidimas.vercel.app URL yra pakankamai trumpas, kad būtų galima dalintis bet kurioje platformoje.

Ar šis technologijų rinkinys tinka žaidimų šventės pateikimui?

Taip, ir tai yra vienas geriausių technologijų rinkinių žaidimų šventėms pateikti. Dauguma švenčių (Ludum Dare, GMTK, js13k, GitHub Game Off) priima bet kokį žaidžiamą žiniatinklio URL. *.vercel.app nuoroda veikia lygiai taip pat kaip "itch.io" URL teisėjams. Daugelis švenčių nugalėtojų pateikia į abu - "itch.io" žaidėjų auditorijai, Vercel kaip greitas kanoninis URL.

Ar man reikia žinoti Three.js prieš pradedant?

Jums reikia pakankamai "JavaScript", kad galėtumėte skaityti, ką rašo "Cursor", ir koreguoti vertes. Jums nereikia rašyti "Three.js" nuo nulio. Vibe Skills įgūdžiai sukuria variklio sąranką, kamerą, valdiklį ir kūrimo konfigūraciją. "Cursor" valdo žaidimo kodą pagal jūsų aprašymus.

Ką daryti, jei mano Vercel kūrimas nepavyksta sekmadienį 19:00?

Dažniausia priežastis yra "TypeScript" klaida arba trūkstama aplinkos kintamoji. "Vercel" rodo kūrimo žurnalą su klaidinga eilute. Vienas paspaudimas valdymo skydelyje grąžina paskutinį veikiantį paleidimą ir paaukština jį į gamybą. Kadangi kiekvienas paspaudimas yra peržiūros paleidimas, jūs niekada nesate toliau nei vienas pakeitimas nuo veikiančio paleidimo. Štai kodėl svarbu paspausti kas 30 minučių šeštadienį ir sekmadienį.

Ar galiu parduoti arba modifikuoti kodą iš Vibe Skills 3D žaidimo įgūdžio?

Taip. "Vibe Skills" įgūdžiai pristatomi su komerciškai draugiška licencija, leidžiančia jums išleisti kodą savo žaidime "Vercel", "itch.io", "Steam" ar bet kur kitur. Kūrėjai pasilieka įgūdžio intelektinę nuosavybę, jūs pasiliekate ant jo pastatyto žaidimo intelektinę nuosavybę.

Ką daryti, jei nenoriu naudoti Cursor?

Bet koks AI redaktorius, galintis redaguoti projekto failus, veikia. Claude Code, Cursor, Windsurf, GitHub Copilot Chat, Cline - bet kuris iš jų gali atlikti "Three.js" pagrindų iteraciją iš "Vibe Skills" įgūdžio. Pats įgūdis yra nepriklausomas nuo redaktoriaus.

Pristatykite Jį Šį Savaitgalį

Priežastis, kodėl dauguma solo kūrėjų niekada nepateikia 3D žaidimo, yra ne variklis, žanras ar įgūdžių riba. Tai penktadienio vakaras, kai jie "tiesiog dar šiek tiek paforsiruos" ir niekada nepradeda. Kitą laisvą savaitgalį, vadovaukitės keturių etapų planu: įdiekite "Vibe Skills" 3D žaidimo įgūdį, paspauskite į "GitHub", prijunkite "Vercel", paleiskite iki penktadienio 20:00, tada praleiskite šeštadienį ir sekmadienį iteruojant gyvame URL.

Jūsų dešimties savaitgalio pristatytų žaidimų portfelis "Vercel" yra vertingesnis nei jūsų hipotetinis šešių mėnesių svajonių variklio projektas. Pristatytas visada laimi. Nemokamas "Vercel" URL yra įrodymas.

Naršyti 3D žaidimų įgūdžius Vibe Skills →

Praleiskite "Three.js" standartinio kodo maratoną. Įdiekite 3D žaidimo įgūdį Vibe Skills, paspauskite į Vercel ir turėkite gyvą URL iki sekmadienio vakaro.