આ વીકએન્ડમાં Vercel પર 3D ગેમ કેવી રીતે શિપ કરવી (AI કુશળતા સાથે)

Vibe Skills

Claude, Cursor, અને અન્ય ઘણા લોકો માટે સેંકડો તૈયાર સ્કિલ બ્રાઉઝ કરો.

સ્કિલ શોધો

હમણાં જ શરૂ કરો

Vercel પર રવિવાર રાત્રે 3D ગેમ શીપ કરો: 48-કલાક ડિપ્લોય પ્લેબુક

તમે શુક્રવારની સાંજે ખાલીથી your-game.vercel.app લિંક સુધી રવિવારના ભોજન સુધી પહોંચી શકો છો. સ્ટેક Three.js, Cursor, Vibe Skills માંથી એક AI સ્કિલ, અને Vercel ફ્રી ટિયર છે. વીકએન્ડ માટે કુલ ખર્ચ: $0. ઇન્ફ્રાસ્ટ્રક્ચર જેનું તમારે ધ્યાન રાખવું પડશે: તે પણ શૂન્ય.

આ "લેપટોપ પર પ્રોટોટાઇપ બનાવો અને તેને પૂર્ણ કહો" નથી. આ એક જાહેર URL છે જે કોઈપણ વ્યક્તિ બ્રાઉઝરમાં ખોલી શકે છે, HTTPS, એજ કેશિંગ અને જો તમે ઇચ્છો તો કસ્ટમ ડોમેન સાથે. AI સ્કિલ Three.js સ્કેફોલ્ડિંગ અને કાર્યરત vercel.json શીપ કરે છે. Cursor પુનરાવર્તન લૂપ હેન્ડલ કરે છે. Vercel ડિપ્લોય હેન્ડલ કરે છે. તમે ડિઝાઇન હેન્ડલ કરો છો.

આ માર્ગદર્શિકા ઇન્ડી ડેવ્સ, વાઇબ કોડર્સ, હેકાથોન સહભાગીઓ અને localhost:5173 ટેબ્સથી કંટાળેલા કોઈપણ માટે છે. અમે શા માટે આ સ્ટેક કામ કરે છે, 48-કલાકના ડિપ્લોયનું વિશ્લેષણ, વર્કફ્લો માટે બનેલી પાંચ 3D ગેમ સ્કિલ્સ, અને શુક્રવારથી રવિવાર સુધીનું સ્ટેપ-બાય-સ્ટેપ આવરી લઈએ છીએ.

Vibe Skills

Claude, Cursor, અને અન્ય ઘણા લોકો માટે સેંકડો તૈયાર સ્કિલ બ્રાઉઝ કરો.

સ્કિલ શોધો

હમણાં જ શરૂ કરો

Vercel + Three.js + AI Skills સોલો ડેવ સ્ટેક શા માટે છે

Vercel એ Three.js ગેમ માટે સૌથી આળસુ શક્ય ડિપ્લોય ટાર્ગેટ છે. GitHub પર પુશ કરો, Vercel જુએ છે, પ્રોજેક્ટ બનાવે છે, અને 60 સેકન્ડની અંદર તમને URL પાછો આપે છે. કોઈ સર્વર પ્રોવિઝન કરવાની જરૂર નથી, કોઈ Docker ફાઇલ નથી, કોઈ NGINX રૂપરેખાંકન નથી, કોઈ SSL સેટઅપ નથી. Three.js બંડલ ફક્ત સ્ટેટિક HTML, JS અને WebGL અસ્કયામતો છે, જે Vercel નું એજ નેટવર્ક સેવા આપવા માટે બનાવવામાં આવ્યું છે.

ફ્રી ટિયર વીકએન્ડ લોન્ચને આરામથી આવરી લે છે:

• દર મહિને 100 GB બેન્ડવિડ્થ. 10,000 પ્લેઝ સાથે 5 MB Three.js બિલ્ડ 50 GB છે. તમે બેન્ડવિડ્થ સમાપ્ત થાય તે પહેલાં વીકએન્ડ સમાપ્ત કરશો.
• HTTPS અને *.vercel.app સબડોમેન સાથે અનલિમિટેડ સ્ટેટિક ડિપ્લોય.
• ફ્રી ટિયર પર કસ્ટમ ડોમેન સપોર્ટ - જો તમારી પાસે name-game.com હોય તો તેને લાવો, નહીંતર ફ્રી vercel.app URL દરેક સોશિયલ પ્લેટફોર્મ પર શેર કરી શકાય તેવો છે.
• દરેક કમિટ માટે પ્રિવ્યૂ ડિપ્લોય - દરેક પુશને તેનો પોતાનો URL મળે છે, જેથી તમે મિત્ર સાથે બિલ્ડ શેર કરી શકો અને તેને તોડ્યા વિના પુનરાવર્તન કરી શકો.

Vibe Skills માંથી AI સ્કિલ ઉમેરો અને બોઈલરપ્લેટ પણ અદૃશ્ય થઈ જાય છે. Three.js સીન સેટઅપ, પ્લેયર કંટ્રોલર, બિલ્ડ પાઇપલાઇન, અને Vercel-રેડી vercel.json એક કમાન્ડમાં જનરેટ થાય છે. પછી Cursor વીકએન્ડનો બાકીનો સમય એક ચેટમાં ફેરવે છે જ્યાં તમે ઇચ્છો છો તે ગેમપ્લેનું વર્ણન કરો છો અને આઉટપુટને ટ્યુન કરો છો. તે સંપૂર્ણ સ્ટેક છે: ફાઉન્ડેશન માટે માર્કેટપ્લેસ સ્કિલ, પુનરાવર્તન માટે AI એડિટર, અને ડિપ્લોય માટે Vercel. સોલો, ફ્રી, અને ફાસ્ટ.

Vibe Skills

Claude, Cursor, અને અન્ય ઘણા લોકો માટે સેંકડો તૈયાર સ્કિલ બ્રાઉઝ કરો.

સ્કિલ શોધો

હમણાં જ શરૂ કરો

48-કલાકનું વિશ્લેષણ: શુક્રવાર કન્સેપ્ટ થી રવિવાર ડિપ્લોય

દરેક વીકએન્ડ શિપ જે ખરેખર લાઈવ થાય છે તે સમાન બીટ્સને અનુસરે છે. યુક્તિ એ છે કે રવિવાર બપોરે નહીં, શુક્રવારે ડિપ્લોયનું આયોજન કરવું, જેથી છેલ્લા છ કલાક બિલ્ડ એરર સામે લડવાને બદલે પોલિશિંગ માટે જાય.

આ કામ કરે છે તેનું કારણ શુક્રવારે Vercel પર પુશ છે. એકવાર URL અસ્તિત્વમાં આવે, પછી દરેક શનિવાર અને રવિવારની કમિટ આપમેળે ડિપ્લોય થાય છે. "રવિવાર રાત્રે ડિપ્લોય ગભરાટ" નથી કારણ કે ડિપ્લોય શુક્રવારે થઈ ગયો છે અને સમગ્ર વીકએન્ડ ઓટોપાયલોટ પર ચાલી રહ્યો છે.

Vercel પર 3D ગેમ "વાઇબ કોડિંગ" કેવું લાગે છે

વાઇબ કોડિંગ એટલે તમે શું ઇચ્છો છો તે સાદી અંગ્રેજીમાં વર્ણવવું અને AI એડિટરને કોડ લખવા દેવો, પછી આઉટપુટ પર પુનરાવર્તન કરવું. Three.js ગેમ Vercel પર, લૂપ અસામાન્ય રીતે સ્વચ્છ છે: Cursor માં દરેક ફેરફાર સ્થાનિક પ્રતિસાદ માટે pnpm dev દૂર છે, પછી લાઇવ પ્રિવ્યૂ URL માટે git push દૂર છે, પછી main પર પ્રોડક્શનમાં આપમેળે ડિપ્લોય થાય છે.

એક વાઇબ-કોડેડ Vercel ગેમ વીકએન્ડ આના જેવું લાગે છે:

1. Cursor માં સ્કિલના સ્ટાર્ટર ફોલ્ડર ખોલો.
2. ચેટમાં એક ફીચરનું વર્ણન કરો: "200ms ની અંદર બે વાર સ્પેસ દબાવવામાં આવે તો ડબલ જમ્પ."
3. Cursor કંટ્રોલર ફાઇલ એડિટ કરે છે. સેવ કરો. pnpm dev રીલોડ થાય છે. તમને બ્રાઉઝરમાં જમ્પ અનુભવાય છે.
4. જો તે યોગ્ય લાગે, તો git push. Vercel પ્રિવ્યૂ URL બનાવે છે. તેને મિત્રને મોકલો.
5. ફીલ લોક થઈ જાય ત્યારે main માં મર્જ કરો. પ્રોડક્શન URL 60 સેકન્ડની અંદર અપડેટ થાય છે.

AI ટાઇપિંગ કરે છે. Vercel ડિપ્લોય કરે છે. તમે ફીલ અને ડિઝાઇન કરો છો.

5 AI 3D ગેમ સ્કિલ્સ જે Vibe Skills પર આ શક્ય બનાવે છે

આ સ્કિલ્સ Vercel + Three.js + Cursor વીકએન્ડ વર્કફ્લો માટે બનાવવામાં આવી છે. દરેક એક Vite-આધારિત Three.js પ્રોજેક્ટ, કાર્યરત vercel.json, pnpm build જે Vercel એજ પરથી સેવા આપી શકે તેવું સ્ટેટિક બંડલ બનાવે છે, અને પરીક્ષણ કરેલ ડિપ્લોય પાથ સાથે આવે છે. બધી 3D Games કેટેગરી માં Vibe Skills પર છે.

1. Three.js + Vercel ગેમ સ્ટાર્ટર

ડિફોલ્ટ પસંદગી. પ્લેયર કંટ્રોલર, થર્ડ-પર્સન કેમેરા, લાઇટિંગ રિગ, સ્કાયબોક્સ અને કોલિઝન સાથે ગ્રાઉન્ડ પ્લેન સાથે Three.js સીન જનરેટ કરે છે. vercel.json સાથે શીપ થાય છે જે Three.js એસેટ બંડલ્સ માટે યોગ્ય કેશિંગ હેડર્સ સેટ કરે છે. pnpm dev સ્થાનિક રીતે ચાલે છે; Vercel ડેશબોર્ડમાં એક ક્લિક GitHub રિપોને કનેક્ટ કરે છે અને તમારી પાસે લાઇવ URL છે.

શ્રેષ્ઠ છે: 2D સિવાયની કોઈપણ શૈલી માટે. જો તમને હજુ ખબર નથી કે તમે શું બનાવી રહ્યા છો તો આનો ઉપયોગ કરો.

2. ફર્સ્ટ-પર્સન Vercel વોકર

ફૂટસ્ટેપ હુક્સ, હેડ-બોબ, અને vercel.json સાથે પોલિશ્ડ ફર્સ્ટ-પર્સન કંટ્રોલર (WASD + માઉસ પોઇન્ટર લોક + ગ્રેવિટી + સ્પ્રિન્ટ + જમ્પ) જે પોઇન્ટર-લોક CSP હેડર્સને યોગ્ય રીતે હેન્ડલ કરે છે. આ એકલું ઘણા સોલો ડેવ્સને પ્રોડક્શનમાં મુશ્કેલીમાં મૂકે છે. સ્કિલ તમારા માટે તેને હલ કરે છે.

શ્રેષ્ઠ છે: વોકિંગ સિમ્સ, હોરર પ્રોટોટાઇપ્સ, નરેટિવ ગેમ્સ, મ્યુઝિયમ પ્રદર્શનો.

3. બ્રાઉઝર એરેના શૂટર કિટ

ટોપ-ડાઉન એરેના (ટ્વીન-સ્ટીક કંટ્રોલર, વેવ સ્પૉનર, બેઝિક એનિમી AI, પ્રોજેક્ટાઇલ સિસ્ટમ, સ્કોર HUD) Vercel-ટ્યુન કરેલ બિલ્ડ સાથે જે એસેટ્સને Gzip કરે છે, AI ને કોડ-સ્પ્લિટ કરે છે, અને મ્યુઝિકને લેઝી-લોડ કરે છે. મલ્ટિપ્લેયર હુક્સ શામેલ છે; વીકએન્ડ સિંગલ-પ્લેયર શીપ કરે છે.

શ્રેષ્ઠ છે: આર્કેડ શૂટર્સ, બુલેટ હેલ, મોબાઇલ પર ઝડપથી લોડ થવાની જરૂર હોય તેવી જામ એન્ટ્રીઓ.

4. Vercel પઝલ પ્લેટફોર્મર

થર્ડ-પર્સન પ્લેટફોર્મર (વેરિયેબલ જમ્પ, કોયોટ ટાઇમ, લેજ ડિટેક્શન), ચેકપોઇન્ટ્સ, ત્રણ સ્ટબ લેવલ જેને તમે Blender અથવા કોડમાં એડિટ કરી શકો છો, અને રિ-સ્પૉન લૂપ. vercel.json ને ઇન્સ્ટન્ટ એજ-કેશ્ડ લેવલ રીલોડ માટે કન્ફિગર કરવામાં આવ્યું છે, તેથી ફોન પર પ્લેટેસ્ટિંગ ઝડપી લાગે છે.

શ્રેષ્ઠ છે: પઝલ પ્લેટફોર્મર્સ, પાર્કૌર પ્રોટોટાઇપ્સ, લેવલ-ડિઝાઇન પ્રયોગો.

5. Vercel ડ્રાઇવિંગ સેન્ડબોક્સ

આર્કેડ ડ્રાઇવિંગ ફીલ (એક્સિલરેશન કર્વ, ડ્રિફ્ટ ફિઝિક્સ, કેમેરા લેગ, બેઝિક ટેરેઇન) લો-પોલી કાર, ટ્રેક ટેમ્પલેટ, અને મોટા ટેરેઇન મેશ માટે ટ્યુન કરેલ ડિપ્લોય સાથે. પ્રીસેટ HTTP હેડર્સ Safari પર WebGL કોન્ટેક્સ્ટને ઝડપથી શરૂ કરવામાં મદદ કરે છે, જે ઐતિહાસિક રીતે Three.js માટે સૌથી ધીમું બ્રાઉઝર છે.

શ્રેષ્ઠ છે: આર્કેડ રેસિંગ, ઓફ-રોડ ડ્રાઇવિંગ, પોર્ટફોલિયો માટે કાર-ફીલ ડેમો.

Vibe Skills પર બધી 3D ગેમ સ્કિલ્સ બ્રાઉઝ કરો →

શુક્રવારથી રવિવાર સ્ટેપ-બાય-સ્ટેપ

આ ચોક્કસ શેડ્યૂલ છે. પ્રારંભ સમયને સમાયોજિત કરો, પરંતુ ક્રમ જાળવો. મુખ્ય માઇલસ્ટોન શુક્રવાર-રાત્રિ Vercel ડિપ્લોય છે. તે પછી બધું પુનરાવર્તન છે.

શુક્રવાર 6pm - 8pm: સ્કિલ પસંદ કરો, GitHub પર પુશ કરો, Vercel કનેક્ટ કરો

પગલું 1: Vibe Skills પર 3D ગેમ સ્કિલ પસંદ કરો. 3D Games કેટેગરી બ્રાઉઝ કરો, તમારી શૈલી સાથે મેળ ખાતી પસંદ કરો, અને સ્ટાર્ટરને નવા ફોલ્ડરમાં ઇન્સ્ટોલ કરો. Cursor માં તેને ખોલો. 7pm સુધીમાં તમને ફરતી પ્લેયર સાથે Three.js સીન દેખાવો જોઈએ.

પગલું 2: GitHub રિપો બનાવો અને પુશ કરો. git init, git remote add, git push. તમારા ગેમના સ્લગનો રિપોના નામ તરીકે ઉપયોગ કરો (crystal-runner, lunar-fishing, જે પણ હોય). રિપોનું નામ ઘણીવાર તમારું URL બને છે.

પગલું 3: રિપોને Vercel સાથે કનેક્ટ કરો. GitHub (ફ્રી) સાથે Vercel માં સાઇન ઇન કરો, "Add New Project" પર ક્લિક કરો, રિપો પસંદ કરો. Vercel આપમેળે Vite શોધી કાઢે છે અને બિલ્ડને કન્ફિગર કરે છે. Deploy પર ક્લિક કરો. 60 સેકન્ડની અંદર તમને crystal-runner.vercel.app URL મળે છે. તેને તમારા ફોન પર ખોલો. એક મિત્ર સાથે શેર કરો. બાકીના વીકએન્ડ માટે ડિપ્લોય બાર હવે શૂન્ય છે.

શુક્રવાર 8pm - 10pm: ડિઝાઇન ડોક લખો

પગલું 4: સાદી અંગ્રેજીમાં પાંચ પ્રશ્નોના જવાબ આપો. રિપોની અંદર Notion પેજ અથવા markdown ફાઇલ ખોલો અને જવાબ આપો:

• ખેલાડી દર 5 સેકન્ડે શું કરી રહ્યો છે? (કોર લૂપ)
• જીતવાની શરત અને હારવાની શરત શું છે?
• એક રન અથવા એક લેવલ કેટલો લાંબો છે?
• વિઝ્યુઅલ હૂક શું છે? (પેલેટ, લાઇટિંગ, સ્ટાઇલ રેફરન્સ)
• 30 સેકન્ડમાં આ યાદગાર બનાવે તેવી એક ફીચર શું છે?

પગલું 5: ડિઝાઇન ડોક કમિટ કરો. તેને રિપો પર પુશ કરો. Vercel ફરીથી ડિપ્લોય કરશે. દરેક અર્થપૂર્ણ ફેરફારને પુશ કરવાની શિસ્ત લાઇવ URL ને પ્રમાણિક રાખે છે.

શનિવાર 9am - 1pm: કોર મિકેનિક બનાવો

પગલું 6: તમારા એક ફીચર સાથે પ્લેસહોલ્ડર મિકેનિકને બદલો. આ એકમાત્ર ફીચર છે જે મહત્વનું છે. તેને વર્ણવવા માટે Cursor ચેટનો ઉપયોગ કરો ("જ્યારે ખેલાડી ક્રિસ્ટલ ઉપાડે, ત્યારે નજીકના દુશ્મનોને 2 સેકન્ડ માટે થીજાવી દો અને એક ટ્યુન વગાડો"). pnpm dev સાથે સ્થાનિક રીતે પુનરાવર્તન કરો. જ્યારે તે યોગ્ય લાગે, ત્યારે પુશ કરો.

પગલું 7: વિન/લૂઝ સ્ટેટને વાયર કરો. વાસ્તવિક અંત સાથે 60-સેકન્ડનું બિલ્ડ ગેમ જેવું લાગે છે. અંત વિના 60-મિનિટનું બિલ્ડ ટેક ડેમો જેવું લાગે છે. હંમેશા પહેલા વિન સ્ક્રીન, પછી બાકી બધું વાયર કરો.

શનિવાર 1pm - 8pm: એક લેવલ ઉમેરો

પગલું 8: એક પોલિશ્ડ લેવલ બનાવો. ત્રણ અડધા-બેક કરેલા નહીં. ભૂમિતિ માટે પ્લેસહોલ્ડર ક્યુબ્સનો ઉપયોગ કરો. સ્કિલના સ્ટોક કેરેક્ટરનો ઉપયોગ કરો. ફીલને ટ્યુન કરો - જમ્પ ઊંચાઈ, કેમેરા લેગ, પાર્ટિકલ તીવ્રતા.

પગલું 9: ટ્યુટોરિયલ ઓવરલે ઉમેરો. પ્રથમ લોન્ચ પર "WASD ખસેડવા માટે, ફાયર કરવા માટે ક્લિક કરો" જેવી બે-વાક્યની પોપઅપ મૂંઝવણમાં મૂકેલા ખેલાડીઓને 8 સેકન્ડમાં છોડી દેવાથી તમારા લોન્ચને બચાવે છે. Cursor 30 સેકન્ડમાં React (અથવા વેનીલા DOM) ઓવરલે જનરેટ કરી શકે છે.

પગલું 10: દર કલાકે પુશ કરો. દરેક પુશ Vercel પ્રિવ્યૂ URL મેળવે છે. દરેક એક મિત્રને મોકલો. ફીડબેક લૂપ આ સ્ટેકનું ગુપ્ત શસ્ત્ર છે.

રવિવાર 10am - 4pm: પોલિશ

પગલું 11: ત્રણ અવાજ ઉમેરો. ફૂટસ્ટેપ લૂપ, એમ્બિયન્ટ પેડ, વિન સ્ટિંગ. ત્રણ અવાજ પણ વીકએન્ડ પ્રોટોટાઇપને નાટકીય રીતે વધારે છે. ફ્રી સ્ત્રોતો: freesound.org, opengameart.org.

પગલું 12: જ્યુસ ઉમેરો. હિટ પર પાર્ટિકલ્સ, ઇમ્પેક્ટ પર સ્ક્રીન શેક, સ્કોર પર નંબર પોપઅપ્સ. જ્યુસ એ છે જે 48-કલાકના બિલ્ડને GIF માં 6-મહિનાના બિલ્ડ જેવું બનાવે છે. Cursor ને "જ્યારે ખેલાડીને નુકસાન થાય ત્યારે 150ms માટે 0.3 ની તીવ્રતાનો સ્ક્રીન શેક" ઉમેરવાનું કહો - તે પાંચ સેકન્ડમાં કેમેરા-શેક હૂક લખશે.

પગલું 13: Lighthouse પાસ ચલાવો. ફોન પર Vercel URL ખોલો અને Chrome DevTools Lighthouse ચલાવો. Three.js બંડલ્સ સામાન્ય રીતે 400 KB થી 1.5 MB ની આસપાસ હોય છે. જો તમે 3 MB થી વધુ છો, તો Cursor ને ભારે મોડ્યુલો પર કોડ સ્પ્લિટિંગ સક્ષમ કરવાનું કહો. Vercel નું gzip અને brotli બાકીનું સંભાળશે.

પગલું 14: બગ પાસ. તમારા લાઇવ URL ને સતત પાંચ વખત ચલાવો. જે બે વાર તૂટે તેને ઠીક કરો. જે એક વાર તૂટે તેને અવગણો.

રવિવાર 4pm - 8pm: લોન્ચ

પગલું 15: (વૈકલ્પિક) કસ્ટમ ડોમેન સેટ કરો. જો તમે અગાઉથી name-game.com ખરીદ્યું હોય, તો તેને Vercel ની પ્રોજેક્ટ સેટિંગ્સમાં ઉમેરો. SSL આપમેળે થાય છે. અન્યથા *.vercel.app URL બરાબર છે - તેમાં HTTPS છે, તે શેર કરી શકાય તેવું છે, અને તે બધે લોડ થાય છે.

પગલું 16: શ્રેષ્ઠ ક્ષણનો 15-સેકન્ડનો GIF રેકોર્ડ કરો. લોકલહોસ્ટ નહીં, લાઇવ URL નો ઉપયોગ કરો. GIF એ છે જે Twitter, Bluesky, અને Reddit પર ક્લિક થાય છે.

પગલું 17: itch.io પેજ બનાવો (વૈકલ્પિક પરંતુ ઉચ્ચ-લીવરેજ). શીર્ષક, એક-લાઇન ટેગલાઇન, ત્રણ સ્ક્રીનશોટ, GIF, નિયંત્રણો, ક્રેડિટ્સ, અને તમારા *.vercel.app iframe નું એમ્બેડ (itch.io HTML5 ગેમ્સ માટે iframe એમ્બેડને સપોર્ટ કરે છે). હવે તમારી પાસે બે URL છે - એક કેઝ્યુઅલ શેરિંગ માટે અને એક ગેમર ઓડિયન્સ માટે.

પગલું 18: લિંક પોસ્ટ કરો. Twitter, Bluesky, તમારી ડેવલપમેન્ટ કમ્યુનિટી Discord, r/IndieDev, r/threejs, r/WebGames. હંમેશા GIF સાથે શરૂઆત કરો. હંમેશા URL શામેલ કરો. જો તમે Vibe Skills સ્કિલનો ઉપયોગ કર્યો હોય, તો તેને ડેવલોગ પોસ્ટમાં જણાવો - સાથે વાંચતા અન્ય ડેવ્સને સમાન સ્ટાર્ટર જોઈશે.

Vercel ડિપ્લોયની ત્રણ સૌથી સામાન્ય નિષ્ફળતાઓ ટાળો

ત્રણ વસ્તુઓ લગભગ દરેક સોલો Three.js + Vercel વીકએન્ડને તોડી નાખે છે. આ બધી 5-મિનિટની ફિક્સ છે જો તમે તેમને શુક્રવારે રાત્રે પકડો, અને 5-કલાકની રેબિટ હોલ જો તમે તેમને રવિવારે સાંજે 7 વાગ્યે શોધી કાઢો.

• ખોટો બિલ્ડ આઉટપુટ ડિરેક્ટરી. Vite ડિફોલ્ટ dist/ છે. Vercel આપમેળે Vite શોધી કાઢે છે અને dist/ નો ઉપયોગ કરે છે. જો તમે આઉટપુટને કસ્ટમાઇઝ કર્યું હોય, તો vercel.json અથવા પ્રોજેક્ટ સેટિંગ્સમાં outputDirectory સેટ કરો અથવા તમારું ડિપ્લોય 404 હશે.
• એસેટ પાથ જે સ્થાનિક રીતે કામ કરે છે પરંતુ પ્રોડક્શનમાં 404 થાય છે. કોઈપણ રનટાઇમ-લોડેડ GLB, ટેક્સચર, અથવા ઑડિઓ ફાઇલ માટે રિલેટિવ પાથ અથવા Vite import.meta.env.BASE_URL હેલ્પરનો ઉપયોગ કરો. હાર્ડકોડેડ /assets/... પાથ સામાન્ય રીતે કામ કરે છે, પરંતુ કોપી-પેસ્ટ કરેલા એબ્સોલ્યુટ વિન્ડોઝ પાથ ચોક્કસપણે નહીં.
• CSP હેડર્સ જે પોઇન્ટર લૉક અથવા ઑડિઓ કૉન્ટેક્સ્ટને બ્લૉક કરે છે. ફર્સ્ટ-પર્સન ગેમ્સને પોઇન્ટર લૉકની જરૂર હોય છે. ઑડિઓને યુઝર-જેસ્ચર એક્ટિવેશનની જરૂર હોય છે. 3D Games કેટેગરી માંથી કોઈપણ સ્કિલ આને હેન્ડલ કરવા માટે vercel.json માં યોગ્ય headers બ્લોક સાથે શીપ થાય છે. જો તમે તમારી પોતાની શરૂઆતથી લખી હોય, તો સ્કિલના રિપોમાંથી કન્ફિગ કૉપિ કરો.

ડિપ્લોય શુક્રવારે કામ કરે છે, તેથી જ્યારે આ રવિવારે તૂટે છે ત્યારે તે હંમેશા તાજેતરના ફેરફારને કારણે હોય છે. git bisect તમારો મિત્ર છે. તેનાથી પણ સારું: દર 30 મિનિટે પુશ કરતા રહો જેથી તૂટેલી કમિટ નાની હોય.

વારંવાર પૂછાતા પ્રશ્નો

જો મારી ગેમ ટ્રાફિક મેળવે તો Vercel ફ્રી ટિયર ખરેખર ટકી રહેશે?

હા, વીકએન્ડ લોન્ચ અને પ્રથમ થોડા અઠવાડિયા માટે. ફ્રી ટિયર તમને દર મહિને 100 GB બેન્ડવિડ્થ આપે છે, જે 5 MB Three.js બિલ્ડના લગભગ 20,000 પ્લે છે. જો તમે તે સીમા સુધી પહોંચો છો, તો Pro પ્લાન $20/મહિનો છે અને તમને 1 TB સુધી વધારે છે. વીકએન્ડ શિપ માટે, ફ્રી પૂરતું કરતાં વધુ છે. Vibe Skills પરની સ્કિલ્સ બંડલના કદને ઘટાડતા બિલ્ડ કન્ફિગ સાથે શીપ થાય છે, જે ફ્રી ટિયરને વધુ ખેંચે છે.

શું હું ફ્રી Vercel ટિયર પર કસ્ટમ ડોમેનનો ઉપયોગ કરી શકું છું?

હા. ફ્રી ટિયર ઓટોમેટિક HTTPS સાથે કસ્ટમ ડોમેનને સપોર્ટ કરે છે. ડોમેન ખરીદો (Namecheap, Cloudflare Registrar, Porkbun), તેને Vercel પર પોઇન્ટ કરો, અને Vercel SSL સર્ટિફિકેટનું ધ્યાન રાખે છે. સેટઅપમાં લગભગ 10 મિનિટ લાગે છે. જો તમારી પાસે ડોમેન નથી, તો name-game.vercel.app URL કોઈપણ પ્લેટફોર્મ પર શેર કરવા માટે પૂરતો ટૂંકો છે.

શું આ સ્ટેક ગેમ જામ સબમિશન માટે યોગ્ય છે?

હા, અને તે ગેમ જામ સબમિશન માટેના શ્રેષ્ઠ સ્ટેક્સમાંનો એક છે. મોટાભાગના જામ (Ludum Dare, GMTK, js13k, GitHub Game Off) કોઈપણ વેબ-પ્લેયેબલ URL સ્વીકારે છે. *.vercel.app લિંક જજ માટે itch.io URL ની જેમ જ કામ કરે છે. ઘણા જામ વિજેતાઓ બંને પર શીપ કરે છે - ગેમર ઓડિયન્સ માટે itch.io, ઝડપી કેનોનિકલ URL તરીકે Vercel.

શરૂઆત કરતા પહેલા શું મને Three.js જાણવાની જરૂર છે?

તમારે Cursor જે લખે છે તે વાંચવા અને મૂલ્યોને ટ્યુન કરવા માટે પૂરતા JavaScript ની જરૂર છે. તમારે શરૂઆતથી Three.js લખવાની જરૂર નથી. Vibe Skills પરની સ્કિલ્સ એન્જિન સેટઅપ, કેમેરા, કંટ્રોલર અને બિલ્ડ કન્ફિગ જનરેટ કરે છે. Cursor તમારા વર્ણનોમાંથી ગેમપ્લે કોડ હેન્ડલ કરે છે.

જો રવિવારે સાંજે 7 વાગ્યે મારું Vercel બિલ્ડ નિષ્ફળ જાય તો શું થાય?

સૌથી સામાન્ય કારણ TypeScript એરર અથવા ખૂટતો env var છે. Vercel બિલ્ડ લોગને નિષ્ફળ જતી લાઇન પ્રકાશિત કરીને બતાવે છે. ડેશબોર્ડમાં એક ક્લિક છેલ્લા કાર્યકારી ડિપ્લોય પર પાછા ફરે છે અને તેને પ્રોડક્શનમાં પ્રમોટ કરે છે. કારણ કે દરેક પુશ પ્રિવ્યૂ ડિપ્લોય છે, તમે કાર્યરત બિલ્ડથી ક્યારેય એક કમિટ કરતાં વધુ દૂર નથી. આ જ કારણ છે કે શનિવાર અને રવિવારે દર 30 મિનિટે પુશ કરવું મહત્વપૂર્ણ છે.

શું હું Vibe Skills 3D ગેમ સ્કિલનો કોડ વેચી શકું છું અથવા તેમાં ફેરફાર કરી શકું છું?

હા. Vibe Skills પરની સ્કિલ્સ કોમર્શિયલ-ફ્રેંડલી લાઇસન્સ સાથે શીપ થાય છે જે તમને Vercel, itch.io, Steam, અથવા બીજે ક્યાંય પણ તમારી પોતાની ગેમમાં કોડ રિલીઝ કરવાની મંજૂરી આપે છે. ક્રિએટર્સ સ્કિલની IP રાખે છે, તમે તેના પર બનેલી ગેમની IP રાખો છો.

જો હું Cursor નો ઉપયોગ કરવા માંગતો નથી તો શું?

કોઈપણ AI એડિટર જે પ્રોજેક્ટ ફાઇલોને એડિટ કરી શકે છે તે કામ કરે છે. Claude Code, Cursor, Windsurf, GitHub Copilot Chat, Cline - તેમાંથી કોઈપણ Vibe Skills સ્કિલમાંથી Three.js સ્કેફોલ્ડિંગ પર પુનરાવર્તન કરી શકે છે. સ્કિલ પોતે એડિટર-અજ્ઞેયવાદી છે.

આ વીકએન્ડમાં શીપ કરો

મોટાભાગના સોલો ડેવ્સ 3D ગેમ ક્યારેય શીપ નથી કરતા તેનું કારણ એન્જિન, શૈલી, અથવા સ્કિલ સીલિંગ નથી. તે શુક્રવારની રાત છે જ્યારે તેઓ "ફક્ત થોડું વધુ સંશોધન કરે છે" અને ક્યારેય શરૂઆત કરતા નથી. આગામી ફ્રી વીકએન્ડમાં, ચાર-તબક્કાની યોજનાને અનુસરો: Vibe Skills 3D ગેમ સ્કિલ ઇન્સ્ટોલ કરો, GitHub પર પુશ કરો, Vercel કનેક્ટ કરો, શુક્રવારે 8pm સુધીમાં ડિપ્લોય કરો, પછી શનિવાર અને રવિવાર લાઇવ URL પર પુનરાવર્તન કરવામાં પસાર કરો.

Vercel પર દસ વીકએન્ડ-શિપ ગેમ્સનો તમારો પોર્ટફોલિયો તમારા કાલ્પનિક છ-મહિનાના ડ્રીમ એન્જિન પ્રોજેક્ટ કરતાં વધુ મૂલ્યવાન છે. શિપ થયેલી ગેમ હંમેશા જીતે છે. ફ્રી Vercel URL તેનો પુરાવો છે.

Vibe Skills પર 3D ગેમ સ્કિલ્સ બ્રાઉઝ કરો →

Three.js બોઈલરપ્લેટ મેરેથોનને છોડો. Vibe Skills પર 3D ગેમ સ્કિલ ઇન્સ્ટોલ કરો, Vercel પર પુશ કરો, અને રવિવાર રાત્રે લાઇવ URL મેળવો.