Kuinka julkaista 3D-peli Vercelissä viikonloppuna (AI-taidoilla)

Vibe Skills

Selaa satoja valmiita taitoja Claudeen, Cursoriin ja muihin.

Tutustu taitoihin

Aloita ilmaiseksi nyt

Julkaise 3D-peli Vercelissä sunnuntai-iltaan mennessä: 48 tunnin julkaisuopas

Voit siirtyä tyhjästä perjantai-illasta sinun-peli.vercel.app -linkkiin sunnuntai-illalliseen mennessä. Käytössä on Three.js, Cursor, tekoälytaito Vibe Skills -palvelusta ja Vercelin ilmainen taso. Viikonlopun kokonaiskustannukset: 0 $. Kokonaisinfra, josta sinun täytyy huolehtia: myös nolla.

Tämä ei ole "rakenna prototyyppi kannettavalle tietokoneellesi ja kutsu sitä valmiiksi". Tämä on julkinen URL, jonka kuka tahansa maailmassa voi avata selaimessa, HTTPS:llä, reunavälimuistilla ja omalla verkkotunnuksella, jos sellainen halutaan. Tekoälytaito toimittaa Three.js -rakenteen ja toimivan vercel.json-tiedoston. Cursor hoitaa iteraatiosilmukan. Vercel hoitaa julkaisun. Sinä hoidat suunnittelun.

Tämä opas on tarkoitettu itsenäisille kehittäjille, vibekoodareille, hakatoniosallistujille ja kaikille, jotka ovat kyllästyneet puolivalmiisiin localhost:5173 -välilehtiin. Käymme läpi, miksi tämä pino toimii, 48 tunnin julkaisun anatomian, viisi tekoälypeliä, jotka on rakennettu työnkulkua varten, sekä perjantaista sunnuntaihin etenevän vaiheittaisen ohjeen.

Vibe Skills

Selaa satoja valmiita taitoja Claudeen, Cursoriin ja muihin.

Tutustu taitoihin

Aloita ilmaiseksi nyt

Miksi Vercel + Three.js + Tekoälytaidot on Solo-kehittäjän pino

Vercel on laiskin mahdollinen julkaisukohde Three.js -pelille. Pushaa GitHubiin, Vercel huomaa, rakentaa projektin ja antaa sinulle URL-osoitteen 60 sekunnin kuluessa. Ei palvelinta varattavaksi, ei Docker-tiedostoa, ei NGINX-konfiguraatiota, ei SSL-asetuksia. Three.js -paketti on vain staattista HTML:ää, JS:ää ja WebGL-resursseja, mikä on juuri se, mihin Vercelin reunverkko on rakennettu.

Ilmainen taso kattaa viikonlopun lanseerauksen mukavasti:

• 100 Gt kaistanleveyttä kuukaudessa. 5 Mt:n Three.js -rakennelma 10 000 pelikerralla on 50 Gt. Lopput kaistanleveys ennen kuin kaistanleveys loppuu.
• Rajattomat staattiset julkaisut HTTPS:llä ja *.vercel.app -aliverkkotunnuksella.
• Oman verkkotunnuksen tuki ilmaisella tasolla - tuo oma nimi-peli.com, jos sinulla sellainen on, muuten ilmainen vercel.app -URL on jaettavissa kaikilla sosiaalisilla alustoilla.
• Esikatselujulkaisut jokaiselle commitille - jokainen push saa oman URL-osoitteensa, joten voit jakaa rakennelman ystävän kanssa ja jatkaa iterointia rikkomatta sitä.

Lisää tekoälytaito Vibe Skills -palvelusta, ja myös boilerplate katoaa. Three.js -kohtauksen asennus, pelaajaohjain, rakennusputki ja Vercel-valmis vercel.json luodaan yhdellä komennolla. Sitten Cursor muuttaa loppuviikonlopun keskusteluksi, jossa kuvailet haluamasi pelattavuuden ja säädät lopputulosta. Se on täysi pino: markkinapaikan taito perustaan, tekoälyeditori iteraatioon ja Vercel julkaisuun. Yksin, ilmainen ja nopea.

Vibe Skills

Selaa satoja valmiita taitoja Claudeen, Cursoriin ja muihin.

Tutustu taitoihin

Aloita ilmaiseksi nyt

48 tunnin anatomia: Perjantain konseptista sunnuntain julkaisuun

Jokainen todella julkaistava viikonloppualoitus seuraa samoja vaiheita. Tärkeintä on suunnitella julkaisu perjantaina, ei sunnuntain iltapäivällä, jotta viimeiset kuusi tuntia käytetään viimeistelyyn rakennusvirheen kanssa taistelemisen sijaan.

Syynä tähän toimivuuteen on perjantain push Verceliin. Kun URL on olemassa, jokainen lauantain ja sunnuntain commit julkaistaan automaattisesti. Ei ole "sunnuntai-illan julkaisuhätää", koska julkaisu on jo tapahtunut perjantaina ja on ollut automaattiohjauksella koko viikonlopun.

Miltä 3D-pelin "Vibekoodaus" Vercelissä näyttää

Vibekoodaus tarkoittaa, että kuvailet englanniksi, mitä haluat, ja annat tekoälyeditorin kirjoittaa koodin, ja sitten iteroit lopputulosta. Three.js -pelille Vercelissä työnkulku on epätavallisen selkeä: jokainen muutos Cursorissa on pnpm dev etäisyydellä paikallisesta palautteesta, sitten git push etäisyydellä live-esikatselu-URL:stä, sitten automaattisesti julkaistu tuotantoon main-haaran kautta.

Vibekoodattu Vercel-peli viikonloppu näyttää tältä:

1. Avaa taidon aloituslatauskansio Cursorissa.
2. Kuvaile ominaisuus chatissa: "kaksoishyppy, jos välilyönti painetaan kahdesti 200 ms sisällä".
3. Cursor muokkaa ohjaintiedostoa. Tallenna. pnpm dev lataa uudelleen. Tunnet hypyn selaimessa.
4. Jos se tuntuu oikealta, git push. Vercel rakentaa esikatselu-URL:n. Lähetä se ystävälle.
5. Yhdistä main-haaraan, kun tuntuma on lukittu. Tuotanto-URL päivittyy 60 sekunnin kuluessa.

Tekoäly tekee kirjoittamisen. Vercel tekee julkaisun. Sinä hoidat tuntuman ja suunnittelun.

5 tekoälypeliä, jotka mahdollistavat tämän Vibe Skillsissä

Nämä taidot on rakennettu Vercel + Three.js + Cursor -viikonlopun työnkulkua varten. Jokainen niistä toimittaa Vite-pohjaisen Three.js -projektin, toimivan vercel.json:n, pnpm build -komennon, joka tuottaa staattisen paketin, jonka Vercel voi tarjoilla reunasta, ja testatun julkaisupolun. Kaikki löytyvät 3D Games -kategoriasta Vibe Skills -palvelussa.

1. Three.js + Vercel Game Starter

Oletusvalinta. Luo Three.js -kohtaus pelaajaohjaimella, kolmannen persoonan kameralla, valaistusrigillä, taivaslaatikolla ja törmäyksillä varustetulla maatasolla. Mukana toimitetaan vercel.json, joka asettaa oikeat välimuistipäätekentät Three.js -resurssipaketeille. pnpm dev käynnistyy paikallisesti; yhden klikkauksen Vercel-kojelaudassa yhdistät GitHub-repon ja sinulla on live-URL.

Parhaat: mille tahansa genrelle paitsi puhtaasti 2D:lle. Käytä tätä, jos et vielä tiedä, mitä olet rakentamassa.

2. First-Person Vercel Walker

Viimeistelty ensimmäisen persoonan ohjain (WASD + hiiren osoittimen lukitus + painovoima + sprintti + hyppy) askeläänien koukuilla, pään huojumisella ja vercel.json-tiedostolla, joka käsittelee osoittimen lukituksen CSP-päätekentät oikein. Tämä kompastuttaa monia yksinpuolustajia tuotannossa. Taito ratkaisee sen puolestasi.

Parhaat: kävelysimulaattorit, kauhuprototyypit, tarinalliset pelit, museonäyttelyt.

3. Browser Arena Shooter Kit

Ylhäältä alas -areena (kaksitankkiohjain, aaltojen generaattori, perusvihollis-AI, ammussysteemi, pisteytys HUD) Vercel-viritetyllä rakennelmalla, joka pakkaa resurssit gzip-muotoon, koodaa AI:n osiin ja lataa musiikkia viiveellä. Moninpelin koukut mukana; viikonloppuna julkaistaan yksinpeli.

Parhaat: arcade-räiskintäpelit, luotihell, jam-sisäänpääsy, jotka tarvitsevat nopean latautumisen mobiililaitteilla.

4. Vercel Puzzle Platformer

Kolmannen persoonan tasohyppely (muuttuva hyppy, coyote-aika, reunantunnistus), tarkistuspisteet, kolme valmiiksi syötettyä tasoa, jotka voit muokata Blenderissä tai koodina, ja uudelleensyntymäsilmukka. vercel.json on konfiguroitu välittömään reunavälimuistissa tapahtuvaan tason lataukseen, joten pelitestaus tuntuu napakalta puhelimella.

Parhaat: pulmatasohyppelyt, parkour-prototyypit, tasosuunnittelukokeilut.

5. Vercel Driving Sandbox

Arcade-ajotuntuma (kiihtyvyyskäyrä, driftafysiikka, kameran viive, perusterassi) matalapolygoni-autolla, radan mallilla ja julkaisu viritetty suuremmille maastoverkkoille. Esiasetetut HTTP-päätekentät saavat WebGL-kontekstin käynnistymään nopeammin Safarissa, joka on historiallisesti hitain selain Three.js:lle.

Parhaat: arcade-ajopelit, maastoajot, auton tuntuma-demonstraatiot portfolioon.

Selaa kaikkia 3D-pelitaitoja Vibe Skillsissä →

Perjantai-sunnuntai Vaiheittain

Tämä on tarkka aikataulu. Säädä alkamisaikaa, mutta pidä järjestys. Tärkein virstanpylväs on perjantai-illan Vercel-julkaisu. Kaikki sen jälkeen on iteraatiota.

Perjantai klo 18 - 20: Valitse taito, Pushaa GitHubiin, Yhdistä Verceliin

Vaihe 1: Valitse 3D-pelitaito Vibe Skillsistä. Selaa 3D Games -kategoriaa, valitse genresiäsi vastaava ja asenna aloitusohjelma uuteen kansioon. Avaa se Cursorissa. Sinun pitäisi nähdä Three.js -kohtaus liikkuvalla pelaajalla klo 19 mennessä.

Vaihe 2: Luo GitHub-repo ja pushaa. git init, git remote add, git push. Käytä pelisi tunnusta repostunnuksena (crystal-runner, lunar-fishing, mitä tahansa). Repon nimi tulee usein olemaan URL-osoitteesi.

Vaihe 3: Yhdistä repo Verceliin. Kirjaudu Verceliin GitHubilla (ilmainen), klikkaa "Add New Project", valitse repo. Vercel tunnistaa Vite automaattisesti ja konfiguroi rakennuksen. Klikkaa Deploy. 60 sekunnin kuluessa sinulla on crystal-runner.vercel.app -URL. Avaa se puhelimellasi. Jaa se yhden ystävän kanssa. Julkaisupalkki on nyt nolla loppuviikonlopun ajan.

Perjantai klo 20 - 22: Kirjoita suunnitteludokumentti

Vaihe 4: Vastaa viiteen kysymykseen selkokielellä. Avaa Notion-sivu tai markdown-tiedosto repostasi ja vastaa:

• Mitä pelaaja tekee 5 sekunnin välein? (ydinsilmukka)
• Mikä on voittoehhto ja häviöehhto?
• Kuinka pitkä on yksi kierros tai yksi taso?
• Mikä on visuaalinen koukku? (väripaletti, valaistus, tyyliviite)
• Mikä on se yksi ominaisuus, joka tekee tästä unohtumattoman 30 sekunnissa?

Vaihe 5: Committoi suunnitteludokumentti. Pushaa se repostaan. Vercel julkaisee uudelleen. Jokaisen merkittävän muutoksen pushauksen kuri pitää live-URL:n rehellisenä.

Lauantai klo 9 - 13: Rakenna ydinmekaniikka

Vaihe 6: Korvaa paikkamerkkimekaniikka yhdellä ominaisuudellasi. Tämä on ainoa ominaisuus, jolla on väliä. Käytä Cursor-chatia kuvailemaan sitä ("kun pelaaja kerää kristallin, jäädytä lähellä olevat viholliset 2 sekunniksi ja soita sävel"). Iteroi paikallisesti pnpm dev -komennolla. Kun se tuntuu oikealta, pushaa.

Vaihe 7: Kytke voitto/häviötila. 60 sekunnin rakennelma todellisella lopulla tuntuu peliltä. 60 minuutin rakennelma ilman loppua tuntuu tekniseltä demolta. Johda aina voittonäyttö ensin, sitten kaikki muu.

Lauantai klo 13 - 20: Lisää yksi taso

Vaihe 8: Rakenna yksi viimeistelty taso. Ei kolmea puolivalmista. Käytä paikkamerkkineliöitä geometriana. Käytä taidon vakiohahmoa. Hienosäädä tuntumaa - hypyn korkeus, kameran viive, hiukkasten intensiteetti.

Vaihe 9: Lisää opastuskerros. Kaksilauseinen "WASD liikkumiseen, klikkaa ampumiseen" -popup ensimmäisellä käynnistyksellä säästää lanseerauksesi hämmentyneiltä pelaajilta, jotka luovuttavat 8 sekunnissa. Cursor voi luoda React (tai tavallisen DOM) -kerroksen 30 sekunnissa.

Vaihe 10: Pushaa tunnin välein. Jokainen push saa Vercel-esikatselu-URL:n. Lähetä jokainen ystävälle. Palautesilmukka on tämän pinon salainen ase.

Sunnuntai klo 10 - 16: Viimeistely

Vaihe 11: Lisää kolme ääntä. Askellussilmukka, ambientti matto, voittojuttu. Jopa kolme ääntä nostaa viikonlopun prototyypin dramaattisesti. Ilmaiset lähteet: freesound.org, opengameart.org.

Vaihe 12: Lisää mehua. Hiukkasia osumasta, ruudun tärinää iskusta, numeropoppauksia pisteistä. Mehu on se, mikä saa 48 tunnin rakennelman näyttämään 6 kuukauden rakennelmalta GIF-tiedostossa. Kysy Cursorilta "lisää ruudun tärinää intensiteetillä 0.3 150 ms ajan, kun pelaaja ottaa vahinkoa" - se kirjoittaa kameran tärinäkoukun viidessä sekunnissa.

Vaihe 13: Suorita Lighthouse-ajo. Avaa Vercel-URL puhelimella ja suorita Chrome DevTools Lighthouse. Three.js -paketit ovat yleensä noin 400 Kt - 1,5 Mt. Jos olet yli 3 Mt, pyydä Cursoria ottamaan käyttöön koodin jakaminen painavilla moduuleilla. Vercelin gzip ja brotli hoitavat loput.

Vaihe 14: Virhekorjaus. Pelaa live-URL:ääsi viisi kertaa peräkkäin. Korjaa kaikki, mikä rikkoutuu kahdesti. Jätä huomiotta kaikki, mikä rikkoutuu kerran.

Sunnuntai klo 16 - 20: Julkaisu

Vaihe 15: (Valinnainen) Aseta oma verkkotunnus. Jos ostit nimi-peli.com etukäteen, lisää se Vercelin projektiasetuksiin. SSL on automaattinen. Muuten *.vercel.app -URL on hyvä - siinä on HTTPS, se on jaettavissa ja se latautuu kaikkialla.

Vaihe 16: Tallenna 15 sekunnin GIF parhaasta hetkestä. Käytä live-URL:ää, älä localhostia. GIF on se, joka klikataan Twitterissä, Blueskyllä ja Redditissä.

Vaihe 17: Luo itch.io-sivu (valinnainen, mutta erittäin hyödyllinen). Otsikko, yhden rivin slogan, kolme kuvakaappausta, GIF, ohjaimet, krediitit ja upotettu *.vercel.app -iframe (itch.io tukee iframe-upotuksia HTML5-peleille). Nyt sinulla on kaksi URL:ää - yksi satunnaiseen jakamiseen ja toinen pelialle.

Vaihe 18: Julkaise linkki. Twitter, Bluesky, kehittäjäyhteisösi Discord, r/IndieDev, r/threejs, r/WebGames. Aloita aina GIF:llä. Sisällytä aina URL. Jos käytit Vibe Skills -taitoa, mainitse se kehitysblogikirjoituksessa - muut kehittäjät, jotka lukevat, haluavat saman aloitusohjelman.

Miten välttää kolme yleisintä Vercel-julkaisun virhettä

Kolme asiaa rikkovat melkein jokaisen Three.js + Vercel -yksinpeliviikonlopun. Kaikki kolme ovat 5 minuutin korjauksia, jos huomaat ne perjantai-iltana, ja 5 tunnin kaninkoloja, jos löydät ne sunnuntaina klo 19.

• Väärä rakennuksen tulostuskansio. Vite käyttää oletuksena dist/. Vercel tunnistaa Vite automaattisesti ja käyttää dist/. Jos olet muokannut tulostetta, aseta outputDirectory vercel.json-tiedostoon, projektiasetuksiin tai julkaisusi on 404.
• Resurssipolkujen, jotka toimivat paikallisesti, mutta tuottavat 404:n tuotannossa. Käytä suhteellisia polkuja tai Vite import.meta.env.BASE_URL -apuohjelmaa kaikille ajon aikana ladatuille GLB-, tekstuuri- tai äänitiedostoille. Kovan koodin /assets/... polut yleensä toimivat, mutta kopioidut absoluuttiset Windows-polut eivät ehdottomasti toimi.
• CSP-päätekentät, jotka estävät osoittimen lukituksen tai äänikontekstin. Ensimmäisen persoonan pelit vaativat osoittimen lukituksen. Ääni vaatii käyttäjän eleen aktivoinnin. Jokainen taito 3D Games -kategoriasta toimitetaan oikealla headers -lohkolla vercel.json-tiedostossa tämän käsittelemiseksi. Jos kirjoitit oman tyhjästä, kopioi konfiguraatio taidon repostasta.

Julkaisu toimii perjantaina, joten kun nämä rikkoutuvat sunnuntaina, syynä on aina viimeaikainen muutos. git bisect on ystäväsi. Vielä parempi: jatka pushaamista 30 minuutin välein, jotta virheellinen commit on pieni.

Usein kysytyt kysymykset

Pitääkö Vercelin ilmainen taso todella pintansa, jos pelini saa liikennettä?

Kyllä, viikonlopun julkaisuun ja ensimmäisiin viikkoihin. Ilmainen taso antaa sinulle 100 Gt kaistanleveyttä kuukaudessa, mikä vastaa noin 20 000 pelikertaa 5 Mt:n Three.js -rakennelmalle. Jos saavutat tuon rajan, Pro-paketti maksaa 20 $/kk ja nostaa sen 1 Tt:iin. Viikonlopun julkaisuun ilmainen on enemmän kuin tarpeeksi. Vibe Skillsin taidot toimitetaan pakettikonfiguraatioilla, jotka minimoivat paketin koon, mikä venyttää ilmaisesta tasosta enemmän.

Voinko käyttää omaa verkkotunnusta Vercelin ilmaisella tasolla?

Kyllä. Ilmainen taso tukee omia verkkotunnuksia automaattisella HTTPS:llä. Osta verkkotunnus (Namecheap, Cloudflare Registrar, Porkbun), osoita se Verceliin, ja Vercel hoitaa SSL-varmenteen. Asetus vie noin 10 minuuttia. Jos sinulla ei ole verkkotunnusta, nimi-peli.vercel.app -URL on riittävän lyhyt jaettavaksi millä tahansa alustalla.

Onko tämä pino hyvä pelijamiin?

Kyllä, ja se on yksi parhaista pinoista jam-julkaisuihin. Useimmat jamit (Ludum Dare, GMTK, js13k, GitHub Game Off) hyväksyvät minkä tahansa verkossa pelattavan URL-osoitteen. *.vercel.app -linkki toimii tuomareille täsmälleen samalla tavalla kuin itch.io-URL. Monet jam-voittajat julkaisevat molempiin - itch.io pelialle, Vercel nopeana kanonisena URL:nä.

Tarvitseeko minun osata Three.js ennen aloittamista?

Tarvitset riittävästi JavaScriptiä lukeaksesi, mitä Cursor kirjoittaa, ja säätääksesi arvoja. Sinun ei tarvitse kirjoittaa Three.js:ää tyhjästä. Vibe Skills -palvelun taidot luovat moottorin asennuksen, kameran, ohjaimen ja rakennuskonfiguraation. Cursor hoitaa pelikoodin kuvauksesi perusteella.

Mitä tapahtuu, jos Vercel-rakennukseni epäonnistuu sunnuntaina klo 19?

Yleisin syy on TypeScript-virhe tai puuttuva ympäristömuuttuja. Vercel näyttää rakennuslokit virheellisen rivin korostettuna. Yksi klikkaus kojelaudassa palauttaa viimeksi toimineen julkaisun ja promooi sen tuotantoon. Koska jokainen push on esikatselujulkaisu, olet aina vain yhden commitin päässä toimivasta rakennelmasta. Siksi 30 minuutin pushaus lauantaina ja sunnuntaina on tärkeää.

Voinko myydä tai muokata Vibe Skillsin 3D-pelitaidon koodia?

Kyllä. Vibe Skillsin taidot toimitetaan kaupallisesti ystävällisellä lisenssillä, joka sallii sinun julkaista koodin omassa pelissäsi Vercelissä, itch.io:ssa, Steamissä tai missä tahansa muualla. Luojat pitävät taidon IP-oikeudet, sinä pidät siihen rakennetun pelin IP-oikeudet.

Mitä jos en halua käyttää Cursor-ohjelmaa?

Mikä tahansa tekoälyeditori, joka pystyy muokkaamaan projektitiedostoja, toimii. Claude Code, Cursor, Windsurf, GitHub Copilot Chat, Cline - mikä tahansa niistä voi iteroida Vibe Skillsin taidon Three.js -rakenteella. Taito itsessään on editorista riippumaton.

Julkaise se tänä viikonloppuna

Syynä siihen, miksi useimmat yksinpuolustajat eivät koskaan julkaise 3D-peliä, ei ole moottori, genre tai taitokatto. Se on perjantai-ilta, jolloin he "tutkivat vain vähän lisää" eivätkä koskaan aloita. Seuraavana vapaana viikonloppunasi, seuraa nelivaiheista suunnitelmaa: asenna Vibe Skills 3D-pelitaito, pushaa GitHubiin, yhdistä Verceliin, julkaise perjantaihin klo 20 mennessä, ja vietä sitten lauantai ja sunnuntai iteroimalla live-URL:ää.

Portfolioosi kymmenestä viikonlopun aikana julkaistusta pelistä Vercelissä on arvokkaampi kuin hypoteettinen kuuden kuukauden unelmaprojektisi. Julkaistu voittaa aina. Ilmainen Vercel-URL on todiste.

Selaa 3D-pelitaitoja Vibe Skillsissä →

Ohita Three.js -boilerplate-maraton. Asenna 3D-pelitaito Vibe Skillsissä, pushaa Verceliin ja hanki live-URL sunnuntai-iltaan mennessä.