ይህንን ቅዳሜና እሁድ የ3D ጨዋታ ወደ Vercel እንዴት መላክ እንደሚቻል (በ AI ችሎታዎች)

Vibe Skills

ለ Claude, Cursor, እና ለሌሎች በመቶዎች የሚቆጠሩ ዝግጁ የሆኑ ክህሎቶችን ያስሱ።

ክህሎቶችን ያስሱ

በነጻ ይጀምሩ

በእሁድ ምሽት በቨርሴል የ3D ጨዋታ ይላኩ፡ የ48-ሰዓት የጥፋት ጨዋታ መመሪያ

አርብ ምሽት ላይ ባዶ ሆነው እስከ እሁድ እራት ድረስ your-game.vercel.app የተሰኘውን አገናኝ ማግኘት ይችላሉ። መሠረቱ Three.js፣ Cursor፣ ከVibe Skills የመጣ የAI ክህሎት እና የVercel ነጻ ደረጃ ናቸው። ለሳምንቱ መጨረሻ ጠቅላላ ወጪ፡ 0 ዶላር። የምትከታተለው ጠቅላላ መሠረተ ልማት፡ እንዲሁም ዜሮ።

ይህ "በላፕቶፕህ ላይ ፕሮቶታይፕ ሰርተህ ጨረስክ" አይደለም። ይህ በዓለም ላይ ያለ ማንኛውም ሰው በድርድር ውስጥ ሊከፍት የሚችል፣ ኤችቲቲፒኤስ (HTTPS)፣ የኢድጅ መሸጎጫ (edge caching) እና ከፈለክ የራስ ሰር ጎራ (custom domain) ያለው የህዝብ ዩአርኤል (URL) ነው። የ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 ሰከንድ ውስጥ ዩአርኤልን ይመልሳል። አገልጋይ መስጠት፣ የዶከር (Docker) ፋይል፣ የNGINX (ኤንጂኒክስ) ውቅር፣ የSSL (ኤስኤስኤል) setup የለም። የThree.js ፓኬጅ ልክ የVercel የኢድጅ ኔትዎርክ (edge network) ለማገልገል የተሰራ ልክ እንደ HTML፣ JS እና WebGL ንብረቶች ነው።

ነጻው ደረጃ ለሳምንቱ መጨረሻ ማስጀመር ምቹ ነው፡

• በወር 100 GB ባንድዊድዝ። የ5 ሜባ (MB) Three.js ግንባታ በ10,000 ጨዋታዎች 50 ጊባ (GB) ነው። ከባንድዊድዝህ በፊት የሳምንቱ መጨረሻን ታሟጥጣለህ።
• ገደብ የለሽ የማይንቀሳቀሱ ጥፋቶች በኤችቲቲፒኤስ (HTTPS) እና በ*.vercel.app ንዑስ ጎራ (subdomain)።
• ለራስ ሰር ጎራ ድጋፍ በነጻ ደረጃ - የራስህን name-game.com ካለህ አምጣው፣ ካልሆነ ነጻው vercel.app ዩአርኤል በማንኛውም ማህበራዊ መድረክ ላይ ሊጋራ የሚችል ነው።
• ለእያንዳንዱ ለውጥ ቅድመ እይታ ጥፋቶች - እያንዳንዱ ግፋ (push) የራሱ ዩአርኤል ያገኛል፣ ስለዚህ ቅድመ እይታን ለጓደኛህ መላክ እና ሳይሰበር መሻሻል ትችላለህ።

ከVibe Skills የAI ክህሎት ስትጨምር የመሠረታዊ ኮድ (boilerplate) ጠፋም ይጠፋል። Three.js የትዕይንት setup፣ የአጫዋች መቆጣጠሪያ፣ የግንባታ ቧንቧ መስመር እና ለVercel ዝግጁ የሆነ vercel.json በአንድ ትዕዛዝ ይፈጠራሉ። ከዚያ Cursor የሳምንቱን መጨረሻ ወደ ውይይት ይለውጠዋል፣ የምትፈልገውን ጨዋታ ትገልጻለህ እና ውጤቱን ታስተካክላለህ። ይኸውም ሙሉው መሠረተ ልማት ነው፡ ለመሠረቱ የገበያ ቦታ ክህሎት፣ ለመሻሻል የAI አርታኢ፣ እና ለማድረስ Vercel። ብቸኛ፣ ነጻ እና ፈጣን።

Vibe Skills

ለ Claude, Cursor, እና ለሌሎች በመቶዎች የሚቆጠሩ ዝግጁ የሆኑ ክህሎቶችን ያስሱ።

ክህሎቶችን ያስሱ

በነጻ ይጀምሩ

የ48-ሰዓት አናቶሚ፡ አርብ ፅንሰ-ሀሳብ እስከ እሁድ ጥፋት

በእርግጥ የሚኖሩት ሁሉም የሳምንቱ መጨረሻ መላኪያዎች በተመሳሳይ ምቶች ይሄዳሉ። ማታለያው እሁድ ከሰአት በኋላ ሳይሆን አርብ ላይ ማድረስን ማቀድ ነው፣ ስለዚህ የመጨረሻዎቹ ስድስት ሰዓታት የግንባታ ስህተት ከመታገል ይልቅ ለዕድሳት ይውላሉ።

ይህ ለምን እንደሚሰራ ምክንያት አርብ ዕለት ወደ Vercel ግፋ ነው። ዩአርኤሉ አንዴ ከተፈጠረ፣ እያንዳንዱ ቅዳሜ እና እሁድ ለውጥ በራስ-ሰር ይላካል። "እሁድ ምሽት የማስጀመር ፍርሃት" የለም ምክንያቱም ማድረስ አርብ ዕለት የተከሰተ እና በሳምንቱ መጨረሻ በራስ-ሰር እየሄደ ነው።

በVercel ላይ የ3D ጨዋታን "ቪብ ኮዲንግ" ማድረግ ምን እንደሚመስል

ቪብ ኮዲንግ ማለት የምትፈልገውን በእውነተኛ ቋንቋ መግለጽ እና የAI አርታኢ ኮዱን እንዲጽፍ መፍቀድ፣ ከዚያም ውጤቱን ማሻሻል ማለት ነው። ለVercel Three.js ጨዋታ፣ ዙሩ ያልተለመደ ንጹህ ነው፡ በCursor ያለው እያንዳንዱ ለውጥ ከማንኛውም የአካባቢ ግብረመልስ በpnpm dev ርቀት ላይ ነው፣ ከዚያም በlive preview URL በgit push ርቀት ላይ ነው፣ ከዚያም በmain ላይ በራስ-ሰር ወደ ምርት ይላካል።

የቪብ-ኮድ የተደረገ የVercel ጨዋታ ሳምንት መጨረሻ እንደዚህ ይመስላል፡

1. የክህሎቱን ጅምር አቃፊ በCursor ክፈት።
2. በውይይት ላይ ባህሪይ ገልጽ፡ "በ200ms ውስጥ ሁለት ጊዜ ጠፈር ከተጫኑ ድርብ ዝላይ"።
3. Cursor መቆጣጠሪያውን ፋይል ያርትዋል። አስቀምጥ። pnpm dev እንደገና ይጫናል። ዝላይውን በድርድር ይሰማሃል።
4. ትክክል ሆኖ ከተሰማህ፣ git push። Vercel የቅድመ እይታ ዩአርኤልን ይገነባል። ለጓደኛህ ላክ።
5. ስሜቱ ከተስተካከለ ወደ main አዋህድ። የምርት ዩአርኤል በ60 ሰከንድ ውስጥ ይዘምናል።

AI ጽሑፉን ይጽፋል። Vercel ማድረስን ይሠራል። ስሜቱንና ንድፉን ትሠራለህ።

5 የAI 3D ጨዋታ ክህሎቶች ይህንን በVibe Skills ላይ እንዲቻል ያደርጋሉ

እነዚህ ክህሎቶች ለVercel + Three.js + Cursor የሳምንት መጨረሻ የሥራ ፍሰት የተሰሩ ናቸው። እያንዳንዳቸው Vite-based Three.js ፕሮጀክት፣ የሚሰራ vercel.json፣ Vercel ከኢድጅ (edge) ሊያገለግለው የሚችል የማይንቀሳቀስ ፓኬጅ የሚያመጣ pnpm build እና የተሞከረ የማድረስ መንገድ ይልካሉ። ሁሉም በVibe Skills ላይ ባለው 3D Games ምድብ ውስጥ ናቸው።

1. Three.js + Vercel Game Starter

የነባሪ ምርጫ። ከThree.js ትዕይንት ጋር ከአጫዋች መቆጣጠሪያ፣ ከሶስተኛ ሰው ካሜራ፣ ከብርሃን ሪግ፣ ከሰማይ ሳጥን እና ከመሬት ወለል ግጭቶች ጋር ይፈጥራል። የThree.js ንብረት ፓኬጆች ትክክለኛ መሸጎጫ ርእሶችን የሚያዘጋጅ vercel.json ጋር ይመጣል። pnpm dev በአካባቢው ይሰራል፤ በVercel ዳሽቦርድ አንድ ጠቅታ የGitHub ማህደሩን ያገናኛል እና የቀጥታ ዩአርኤል ይኖርሃል።

ለ: ከንጹህ 2D በስተቀር ለማንኛውም ዘር። ምን እየሰራህ እንደሆነ ገና ካላወቅክ ይሄን ተጠቀም።

2. First-Person Vercel Walker

የተስተካከለ የፊተኛ ሰው መቆጣጠሪያ (WASD + የመዳፊት ጠቋሚ መቆለፊያ + የስበት ኃይል + ሩጫ + ዝላይ) ከእግር ድምጽ መገናኛዎች፣ ከጭንቅላት መወዛወዝ እና የመዳፊት ጠቋሚ መቆለፊያ CSP ርእሶችን በትክክል የሚያስተናግድ vercel.json ጋር። ይህ ብዙ ብቸኛ አውጪዎችን በማምረት ያደናግራቸዋል። ክህሎቱ ያንን ላንተ ይፈታዋል።

ለ: የእግር ጉዞ አስመሳይዎች፣ የሽብር ፕሮቶታይፖች፣ ልቦለድ ጨዋታዎች፣ የሙዚየም ኤግዚቢሽኖች።

3. Browser Arena Shooter Kit

ከላይ-ታች የሆነ የትዕይንት ክፍል (መንትያ-ዱላ መቆጣጠሪያ፣ ማዕበል አፍቃሪ፣ መሰረታዊ የጠላት AI፣ የፕሮጀክትል ሥርዓት፣ የውጤት HUD) ከVercel-የተስተካከለ ግንባታ ጋር እያንዳንዱ የንብረት ጥቅል ይጨመቃል፣ AI ኮድ-ይከፋፈላል እና ሙዚቃን በዘገየ ሁኔታ ይጭናል። የብዙ ተጫዋች መገናኛዎች ተካተዋል፤ የሳምንቱ መጨረሻ ነጻ ተጫዋች ይልካል።

ለ: የመጫወቻ ማዕከል ተኳሾች፣ የጥይት ገሃነም፣ ሞባይል ላይ በፍጥነት መጫን ያለባቸው የ jam ግቤቶች።

4. Vercel Puzzle Platformer

ከሶስተኛ ሰው የሆነ መድረክ ተጫዋች (ተለዋዋጭ ዝላይ፣ የጓደኝነት ሰዓት፣ የደረጃ ማወቂያ)፣ የፍተሻ ነጥቦች፣ በBlender ወይም በኮድ ሊስተካከሉ የሚችሉ ሶስት የ stub ደረጃዎች እና የrespawn ዙር። vercel.json ለፈጣን የኢድጅ-መሸጎጫ የደረጃ ዳግም ጭነት የተዘጋጀ ነው፣ ስለዚህ በስልክ ላይ የመፈተሽ ስሜት ፈጣን ነው።

ለ: የእንቆቅልሽ መድረክ ተጫዋቾች፣ የፓርኩር ፕሮቶታይፖች፣ የደረጃ-ንድፍ ሙከራዎች።

5. Vercel Driving Sandbox

የመጫወቻ ማዕከል የመንዳት ስሜት (የማጣደፍ ኩርባ፣ የመንሸራተት ፊዚክስ፣ የካሜራ መዘግየት፣ መሰረታዊ መሬት) ከዝቅተኛ-ፖሊ መኪና፣ ከትራክ አብነት እና ለትልቅ የመሬት መዋቅር የተስተካከለ ማድረስ ጋር። ቅድመ-ተዘጋጁ የHTTP ርእሶች የWebGL አውድ በSafari ላይ በፍጥነት እንዲጀምር ያደርጋሉ፣ ታሪካዊ በሆነ መልኩ 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። የጨዋታህን የslug ስም እንደ ማህደሩ ስም ተጠቀም (crystal-runner፣ lunar-fishing፣ whatever)። የማህደሩ ስም ብዙውን ጊዜ ዩአርኤልህ ይሆናል።

ደረጃ 3: ማህደሩን ከVercel ጋር አገናኝ። በGitHub (ነጻ) Vercel ን አስገባ፣ "Add New Project" ን ጠቅ አድርግ፣ ማህደሩን ምረጥ። Vercel Vite ን በራስ-ሰር ያውቃል እና ግንባታውን ያዘጋጃል። Deploy ን ጠቅ አድርግ። በ60 ሰከንድ ውስጥ crystal-runner.vercel.app ዩአርኤል ይኖርሃል። በስልክህ ላይ ክፈተው። ለአንድ ጓደኛህ ላክ። የማድረስ ባር ለቀሪው ሳምንት መጨረሻ ዜሮ ነው።

አርብ 8pm - 10pm: የንድፍ ሰነዱን ጻፍ

ደረጃ 4: አምስት ጥያቄዎችን በእውነተኛ ቋንቋ መልስ። ማስታወሻ ገጽ ወይም በማህደሩ ውስጥ markdown ፋይል ክፈት እና መልስ፡

• በየ5 ሰከንድ ተጫዋቹ ምን እያደረገ ነው? (ዋናው ዙር)
• የማሸነፍ እና የመሸነፍ ሁኔታ ምንድነው?
• አንድ ሩጫ ወይም አንድ ደረጃ ለምን ያህል ጊዜ ነው?
• የቪዥዋል መስህቡ ምንድነው? (ቀለም፣ ብርሃን፣ የአጻጻፍ ማጣቀሻ)
• በ30 ሰከንድ ውስጥ የማይረሳ የሚያደርገው አንድ ባህሪይ ምንድነው?

ደረጃ 5: የንድፍ ሰነዱን አስገባ። ወደ ማህደሩ ውስጥ አስገባ። Vercel እንደገና ይላካል። ለእያንዳንዱ ትርጉም ያለው ለውጥ ማስገባቱ የቀጥታ ዩአርኤልን ታማኝ ያደርገዋል።

ቅዳሜ 9am - 1pm: ዋናውን ሜካኒክ ግንባታ

ደረጃ 6: ምትክ ሜካኒክን በአንድ ባህሪይህ ተካ። ይህ ብቸኛው አስፈላጊ ባህሪይ ነው። "ክሪስታል ስትወስድ፣ በአቅራቢያ ያሉትን ጠላቶች ለ2 ሰከንድ አቁም እና ጩኸት አጫውት" ብለህ ለመግለጽ Cursor ን ተጠቀም። በpnpm dev በአካባቢው መሻሻል። ትክክል ሆኖ ሲሰማህ፣ ላክ።

ደረጃ 7: አሸናፊ/ተሸናፊ ሁኔታን አገናኝ። ትክክለኛ መጨረሻ ያለው 60-ሰከንድ ግንባታ እንደ ጨዋታ ይሰማል። መጨረሻ የሌለው 60-ደቂቃ ግንባታ እንደ ቴክ ዴሞ (tech demo) ይሰማል። ሁልጊዜ የፍጻሜ ስክሪን መጀመሪያ፣ ከዚያም ሌላውን ሁሉ አገናኝ።

ቅዳሜ 1pm - 8pm: አንድ ደረጃ ጨምር

ደረጃ 8: አንድ የተስተካከለ ደረጃ ግንባታ። ሶስት በከፊል የበሰሉ ሳይሆን። የጂኦሜትሪ (geometry) ለመተኪያ ኪዩቦች (cubes) ተጠቀም። የክህሎቱን መደበኛ ቁምፊ ተጠቀም። ስሜትን አስተካክል - የዝላይ ቁመት፣ የካሜራ መዘግየት፣ የቅንጣት መጠን።

ደረጃ 9: የመመሪያ ንግግር ጨምር። ለመጀመሪያ ጊዜ ሲጀመር "WASD ለመንቀሳቀስ፣ ለመተኮስ ጠቅ አድርግ" የሚል ሁለት ዓረፍተ-ነገር ንግግር፣ የ20 ሰከንድ ተጠቂዎችን ያድናል። Cursor ምላሽ (React) (ወይም ቨርጂኒያ DOM) ንግግር በ30 ሰከንድ ውስጥ ሊፈጥር ይችላል።

ደረጃ 10: በየሰዓቱ አስገባ። እያንዳንዱ ግፋ የVercel ቅድመ እይታ ዩአርኤል ያገኛል። እያንዳንዳቸውን ለጓደኛህ ላክ። የግብረመልስ ዙሩ የዚህ መሠረተ ልማት ሚስጥራዊ መሳሪያ ነው።

እሁድ 10am - 4pm: ዕድሳት

ደረጃ 11: ሶስት ድምጾች ጨምር። የእግር ድምጽ ዙር፣ የከባቢ አየር ፓድ (ambient pad)፣ የድል ድምጽ። ሶስት ድምጾች እንኳን የሳምንት መጨረሻ ፕሮቶታይፕን በእጅጉ ያሳድጋሉ። ነጻ ምንጮች፡ freesound.org፣ opengameart.org።

ደረጃ 12: ጭማቂ ጨምር። በሚመታበት ጊዜ ቅንጣቶች፣ በሚመታበት ጊዜ ማያ ገጽ መንቀጥቀጥ፣ በውጤት ላይ የቁጥር ብቅ-ባይ። ጭማቂ የሚያደርገው የ48-ሰዓት ግንባታ በጂአይኤፍ (GIF) ውስጥ የ6-ወር ግንባታ እንዲመስል ያደርገዋል። Cursor ን "ተጫዋቹ ሲጎዳ 0.3 የሆነ ጥንካሬ ለ150ms ማያ ገጽ መንቀጥቀጥ" እንዲጨምር ጠይቅ - የካሜራ-መንቀጥቀጥ መገናኛን በአምስት ሰከንድ ውስጥ ይጽፋል።

ደረጃ 13: የመብራት ቤት ማለፊያ (Lighthouse pass) አድርግ። Vercel ዩአርኤልን በስልክ ላይ ክፈት እና የChrome DevTools Lighthouse ን አሂድ። Three.js ፓኬጆች ብዙውን ጊዜ ከ400 ኪባ (KB) እስከ 1.5 ሜባ (MB) ናቸው። ከ3 ሜባ በላይ ከሆንክ፣ Cursor ን የከባድ ሞጁሎችን ኮድ መከፋፈል እንዲያነቃ ጠይቅ። የVercel gzip እና brotli የተቀረውን ይንከባከባሉ።

ደረጃ 14: የሳንካ ማለፊያ። የlive ዩአርኤልህን አምስት ጊዜ በተከታታይ ተጫወት። ሁለት ጊዜ የሚሰብር ማንኛውንም ነገር አስተካክል። አንድ ጊዜ የሚሰብር ማንኛውንም ነገር ችላ በል።

እሁድ 4pm - 8pm: ማስጀመር

ደረጃ 15: (አማራጭ) የራስ ሰር ጎራ አዘጋጅ። ከዚህ በፊት name-game.com ከገዛህ፣ በVercel የፕሮጀክት ቅንብሮች ውስጥ ጨምረው። SSL በራስ-ሰር ነው። ካልሆነ *.vercel.app ዩአርኤል ጥሩ ነው - ኤችቲቲፒኤስ (HTTPS) አለው፣ ሊጋራ የሚችል ነው፣ እና በሁሉም ቦታ ይጫናል።

ደረጃ 16: ምርጡን ቅጽበት የ15-ሰከንድ ጂአይኤፍ (GIF) ቅረጽ። የቀጥታ ዩአርኤልን ተጠቀም፣ localhostን አይደለም። ጂአይኤፍ (GIF) በትዊተር፣ በBluesky እና በReddit ላይ የሚጫነው ነው።

ደረጃ 17: itch.io ገጽ ፍጠር (አማራጭ ግን ከፍተኛ ተጽዕኖ ያለው)። ርዕስ፣ ባለ አንድ መስመር መግለጫ፣ ሶስት ቅጽበታዊ ገጽ እይታዎች፣ ጂአይኤፍ (GIF)፣ መቆጣጠሪያዎች፣ ምስጋናዎች፣ እና የ*.vercel.app iframe (itch.io ለHTML5 ጨዋታዎች iframe መከተት ይደግፋል)። አሁን ሁለት ዩአርኤሎች አሉህ - አንዱ ለተለመደ መጋራት እና አንዱ ለተጫዋቾች።

ደረጃ 18: አገናኙን ላጥፍ። ትዊተር፣ Bluesky፣ የእርስዎ የልማት ማህበረሰብ Discord፣ r/IndieDev፣ r/threejs፣ r/WebGames። ሁልጊዜ ጂአይኤፍ (GIF) ይዘህ ጀምር። ሁልጊዜ ዩአርኤልን አካትት። የVibe Skills ክህሎት ከተጠቀሙ፣ በልማት ሎግ ልጥፍ ላይ ጠቀስ - ተከታታዮች የሆኑ ሌሎች አውጪዎች ተመሳሳይ ጅምር ይፈልጋሉ።

ሶስቱን በጣም የተለመዱ የVercel የማድረስ ውድቀቶችን እንዴት ማስወገድ እንደሚቻል

ሶስት ነገሮች ከሞላ ጎደል እያንዳንዱን ብቸኛ Three.js + Vercel ሳምንት መጨረሻ ያበላሻሉ። ሁሉም ሶስቱ ለ5-ደቂቃ ጥገናዎች ናቸው if you catch them on Friday night, and 5-hour rabbit holes if you discover them on Sunday at 7pm.

• የግንባታ ውፅዓት አቃፊ ስህተት። Vite በነባሪ dist/ ነው። Vercel Vite ን በራስ-ሰር ያውቃል እና dist/ ይጠቀማል። ውፅዓቱን ከቀየሩት፣ vercel.json ውስጥ outputDirectory ን አዘጋጁ ወይም የፕሮጀክት ቅንብሮች ወይም የእርስዎ ማድረስ 404 ይሆናል።
• በአካባቢው የሚሰሩ ግን በምርት ላይ 404 የሆኑ የንብረት መንገዶች። ለማንኛውም የሩጫ-ጊዜ የGLB፣ የጽሑፍ ምስል ወይም የድምጽ ፋይል አንጻራዊ መንገዶችን ወይም Vite import.meta.env.BASE_URL ረዳትን ተጠቀም። በጠንካራ ኮድ የተጻፉ /assets/... መንገዶች ብዙውን ጊዜ ይሰራሉ፣ ነገር ግን የተባዙ የዊንዶውስ (Windows) ፍጹም መንገዶች ፈጽሞ አይሰሩም።
• የመዳፊት ጠቋሚ መቆለፊያ ወይም የድምጽ አውድ የሚከለክሉ 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 ደረጃ ላይ የራስ ሰር ጎራ መጠቀም እችላለሁ?

አዎ። ነጻው ደረጃ ከራስ ሰር SSL ጋር ለራስ ሰር ጎራዎች ድጋፍ ይሰጣል። ጎራ ግዛ (Namecheap, Cloudflare Registrar, Porkbun), ወደ Vercel አቅጣጫ ስጠው, Vercelም የSSL ሰርተፊኬት ይንከባከባል። setup 10 ደቂቃ ይወስዳል። ጎራ ከሌለህ፣ የname-game.vercel.app ዩአርኤል በማንኛውም መድረክ ላይ ለመጋራት በቂ አጭር ነው።

ይህ መሠረተ ልማት ለgame jam submission ተስማሚ ነው?

አዎ፣ እና ለ jam submissions በጣም ጥሩ መሠረተ ልማቶች አንዱ ነው። ብዙ jams (Ludum Dare, GMTK, js13k, GitHub Game Off) ድር-ሊጫወት የሚችል ዩአርኤል ይቀበላሉ። የ*.vercel.app አገናኝ ለዳኞች ልክ እንደ itch.io ዩአርኤል ይሰራል። ብዙ የ jam አሸናፊዎች ለሁለቱም ይልካሉ - itch.io ለተጫዋቾች፣ Vercel እንደ ፈጣን መደበኛ ዩአርኤል።

ከመጀመሬ በፊት Three.js ማወቅ አለብኝ?

Cursor የጻፈውን ለማንበብ እና እሴቶችን ለማስተካከል በቂ JavaScript ያስፈልግሃል። Three.js ከባዶ መጻፍ የለብህም። በVibe Skills ላይ ያሉ ክህሎቶች የመኪና setup፣ ካሜራ፣ መቆጣጠሪያ እና የግንባታ ውቅረት ይፈጥራሉ። Cursor የእርስዎን መግለጫዎች የጨዋታ ኮድ ይቆጣጠራል።

እሁድ 7pm ላይ የVercel ግንባታዬ ከបរとなりました?

በጣም የተለመደው ምክንያት የTypeScript ስህተት ወይም የጎደለ env var ነው። Vercel የግንባታውን ሎግ የሚያሳየውን የተሳሳተውን መስመር ጎላ አድርጎ ያሳያል። በዳሽቦርዱ ላይ አንድ ጠቅታ ባለፈው የሚሰራ ግንባታ ይመልሳል እና ወደ ምርት ያሳድገዋል። እያንዳንዱ ግፋ የቅድመ እይታ ማድረስ ስለሆነ፣ ከሚሰራ ግንባታ አንድ ለውጥ ርቀት ላይ ነህ። ለዚህ ነው ቅዳሜና እሁድ በየ30 ደቂቃው ማስገባቱ አስፈላጊ የሆነው።

ከVibe Skills 3D game skill የመጣውን ኮድ መሸጥ ወይም ማሻሻል እችላለሁ?

አዎ። በVibe Skills ላይ ያሉ ክህሎቶች በVercel፣ itch.io፣ Steam፣ ወይም ሌላ ቦታ ላይ የራስህን ጨዋታ ላይ ኮዱን እንድታስጀምር የሚያስችል ለንግድ ተስማሚ የፈቃድ ስምምነት ጋር ይመጣሉ። ፈጣሪዎች የክህሎቱን IP ያቆያሉ፣ አንተም በላዩ ላይ የተገነባውን የጨዋታ IP ታቆያለህ።

Cursor መጠቀም ካልፈለግኩስ?

የፕሮጀክት ፋይሎችን ማርትዕ የሚችል ማንኛውም AI አርታኢ ይሰራል። Claude Code, Cursor, Windsurf, GitHub Copilot Chat, Cline - ከእነዚህ ውስጥ ማንኛውም የVibe Skills 3D game skill የመጣውን Three.js መሰረተ ልማት መሻሻል ይችላል። ክህሎቱ ራሱ ከአርታኢ ነጻ ነው።

በዚህ ሳምንት መጨረሻ ላክ

አብዛኛዎቹ ብቸኛ አውጪዎች የ3D ጨዋታን የማያደርሱበት ምክንያት ሞተር፣ ዘር፣ ወይም የክህሎት ጣሪያ አይደለም። ያ የአርብ ምሽት ነው "ትንሽ ተጨማሪ ምርምር አድርግ" ብለው የሚሉት እና ፈጽሞ የማይጀምሩት። ቀጣዩን ነጻ የሳምንት መጨረሻ ሲኖርህ፣ የአራት-ምዕራፍ እቅዱን ተከተል፡ የVibe Skills 3D game skill ጫን፣ ወደ GitHub አስገባ፣ Vercel አገናኝ፣ በአርብ 8pm ድረስ ላክ፣ ከዚያም ቅዳሜና እሁድ በቀጥታ ዩአርኤል ላይ መሻሻል አሳልፍ።

በVercel ላይ የየሳምንት መጨረሻ የተላኩ አስር ጨዋታዎችህ ፖርትፎሊዮ፣ የሃሳባዊ ስድስት-ወር ህልም ሞተር ፕሮጀክትህ የበለጠ ዋጋ አለው። የተላከው ሁልጊዜ ያሸንፋል። ነጻው Vercel ዩአርኤል ማረጋገጫው ነው።

በVibe Skills ላይ 3D ጨዋታ ክህሎቶችን ተመልከት →

የThree.js መሰረታዊ የጽሑፍ ማራቶንን ዝለል። በVibe Skills ላይ የ3D ጨዋታ ክህሎት ጫን, Vercel ላይ አስገባ, እና በእሁድ ምሽት የቀጥታ ዩአርኤል ይኑርህ።