यस हप्ता Vercel मा 3D गेम कसरी पठाउने (AI सीपहरु संग)

शुक्रबार आइडिया, आइतबार लाइभ URL। The Three.js + Cursor + Vibe Skills + Vercel फ्री टियर प्लेबुक ४८ घण्टामा ३D गेम बनाउनको लागि।

3D GamesVercelThree.jsVibe CodingVibe Skills
Sarah Mitchell
Sarah Mitchell
Creator editorial lead
9,623
यस हप्ता Vercel मा 3D गेम कसरी पठाउने (AI सीपहरु संग) - Vibe Skills preview
Vibe Skills
Vibe Skills

Claude, Cursor, र थपका लागि सयौं तयार-निर्मित सीपहरू ब्राउज गर्नुहोस्।

आइतबार रातिसम्ममा भेरिसिलमा थ्रीडी गेम कसरी पठाउने: ४८ घण्टाको डिप्लॉय प्लेबुक

तपाईं शुक्रबार साँझदेखि आइतबार रातिको खानासम्ममा your-game.vercel.app को लिङ्कमा पुग्न सक्नुहुन्छ। यसका लागि थ्री.जेएस, कर्सर, Vibe Skills बाट एउटा एआई कौशल, र भेरिसिलको निःशुल्क टियर प्रयोग गरिनेछ। सप्ताहन्तका लागि कुल लागत: $०। तपाईंले व्यवस्थापन गर्नुपर्ने इन्फ्रास्ट्रक्चर: पनि शून्य।

यो "ल्यापटपमा प्रोटोटाइप बनाएर काम सकियो भन्नु" होइन। यो कुनै पनि ब्राउजरमा खोल्न सकिने सार्वजनिक यूआरएल हो, जसमा HTTPS, एज क्यासिङ, र यदि चाहनुहुन्छ भने कस्टम डोमेन पनि हुनेछ। एआई कौशलले थ्री.जेएसको आधारभूत संरचना र चल्ने vercel.json तयार गर्छ। कर्सरले पुनरावृत्तिको काम गर्छ। भेरिसिलले डिप्लॉयको काम गर्छ। तपाईंले डिजाइनको काम गर्नुहुन्छ।

यो गाइड इन्डी डेभलपरहरू, भाइब कोडर्स, ह्याकाथन सहभागीहरू, र आधा-अधूरा localhost:5173 ट्याबहरूसँग दिक्क भएका जो कोहीका लागि हो। हामी यो स्ट्याक किन काम गर्छ, ४८ घण्टाको डिप्लॉयको संरचना, कार्यप्रवाहका लागि बनाइएका पाँचवटा थ्रीडी गेम कौशल, र शुक्रबारदेखि आइतबारसम्मको चरण-दर-चरण प्रक्रियाबारे छलफल गर्नेछौं।


यस हप्ता Vercel मा 3D गेम कसरी पठाउने (AI सीपहरु संग) - Vibe Skills preview
Vibe Skills
Vibe Skills

Claude, Cursor, र थपका लागि सयौं तयार-निर्मित सीपहरू ब्राउज गर्नुहोस्।

किन भेरिसिल + थ्री.जेएस + एआई कौशल सोलो डेभ स्ट्याक हो

भेरिसिल थ्री.जेएस गेमका लागि सबैभन्दा सजिलो डिप्लॉय लक्ष्य हो। गिटहबमा पुश गर्नुहोस्, भेरिसिलले त्यसलाई पहिचान्छ, प्रोजेक्ट निर्माण गर्छ, र ६० सेकेन्डभित्र तपाईंलाई एउटा यूआरएल फिर्ता दिन्छ। कुनै सर्भर व्यवस्थापन छैन, कुनै डकर फाइल छैन, कुनै NGINX कन्फिग छैन, कुनै SSL सेटअप छैन। थ्री.जेएस बन्डल केवल स्थिर HTML, JS, र WebGL सम्पत्तिहरू हुन्, जुन भेरिसिलको एज नेटवर्कले सेवा दिनका लागि बनेको हो।

निःशुल्क टियरले सप्ताहन्तको लन्चलाई सहजै समर्थन गर्छ:

  • प्रति महिना १०० GB ब्यान्डविथ। १०,००० पटक खेलिएका ५ MB को थ्री.जेएस बिल्डका लागि ५० GB लाग्छ। तपाईं ब्यान्डविथ सकिनुअघि नै सप्ताहन्त सक्नुहुनेछ।
  • HTTPS र *.vercel.app सबडोमेनसहित असीमित स्थिर डिप्लॉयहरू।
  • निःशुल्क टियरमा कस्टम डोमेन समर्थन - यदि तपाईंले name-game.com किन्नुभएको छ भने प्रयोग गर्नुहोस्, नत्र निःशुल्क vercel.app यूआरएल सबै सामाजिक प्लेटफर्महरूमा साझा गर्न सकिन्छ।
  • प्रत्येक कमिटका लागि पूर्वावलोकन डिप्लॉयहरू - प्रत्येक पुशको आफ्नै यूआरएल हुन्छ, त्यसैले तपाईं साथीसँग बिल्ड साझा गर्न सक्नुहुन्छ र यसलाई नबिगार्दै पुनरावृत्ति जारी राख्न सक्नुहुन्छ।

Vibe Skills बाट एउटा एआई कौशल थप्नुहोस् र बोइलरप्लेट पनि हराउँछ। थ्री.जेएस दृश्य सेटअप, प्लेयर कन्ट्रोलर, बिल्ड पाइपलाइन, र भेरिसिल-तैयार vercel.json एक आदेशमा तयार हुन्छन्। त्यसपछि कर्सरले बाँकी सप्ताहन्तलाई एउटा च्याटमा परिणत गर्छ जहाँ तपाईं चाहेको गेमप्ले वर्णन गर्नुहुन्छ र आउटपुटलाई ट्यून गर्नुहुन्छ। यो पूर्ण स्ट्याक हो: आधारभूत संरचनाका लागि एक मार्केटप्लेस कौशल, पुनरावृत्तिको लागि एआई सम्पादक, र डिप्लॉयका लागि भेरिसिल। एकल, निःशुल्क, र छिटो।


यस हप्ता Vercel मा 3D गेम कसरी पठाउने (AI सीपहरु संग) - Vibe Skills preview
Vibe Skills
Vibe Skills

Claude, Cursor, र थपका लागि सयौं तयार-निर्मित सीपहरू ब्राउज गर्नुहोस्।

४८ घण्टाको संरचना: शुक्रबारको अवधारणादेखि आइतबारको डिप्लॉयसम्म

हरेक प्रत्यक्ष रूपमा जाने सप्ताहन्त शिप समान चरणहरूमा जान्छ। चाल यो हो कि आइतबार दिउँसो नभई शुक्रबार नै डिप्लॉयको योजना बनाउनुहोस्, ताकि अन्तिम छवटा घण्टा बिल्ड त्रुटिसँग लड्नुको सट्टा पालिसिङमा जान सकोस्।

चरणसमय सीमातपाईं के गर्नुहुन्छचरणको अन्त्यसम्ममा के पठाइन्छ
चरण १: अवधारणाशुक्रबार ६ बजे - १० बजेविधा छान्नुहोस्, १-पृष्ठको डिजाइन कागजात लेख्नुहोस्, Vibe Skills थ्रीडी गेम कौशल स्थापना गर्नुहोस्, सुरुवाती प्रोजेक्ट गिटहबमा पुश गर्नुहोस्, भेरिसिलमा जडान गर्नुहोस्आधारभूत दृश्यसहित लाइभ name-game.vercel.app यूआरएल
चरण २: निर्माणशनिबार ९ बजे - राति ८ बजेप्लेसहोल्डरलाई आफ्नो मुख्य मेकानिकले बदल्नुहोस्, १ तह थप्नुहोस्, जित/हारको अवस्था काम गराउनुहोस्उही भेरिसिल यूआरएलमा खेल्न सकिने बिल्ड, प्रत्येक पुशमा स्वतः डिप्लॉय हुने
चरण ३: पालिसिङआइतबार १० बजे - ४ बजेध्वनि, जुस, ट्युटोरियल पपअप, बग फिक्स, मोबाइलमा प्रदर्शन जाँचपहिलो ६० सेकेन्डमा कुनै पनि यन्त्रमा नबिग्रने बिल्ड
चरण ४: लन्चआइतबार ४ बजे - राति ८ बजेकस्टम डोमेन सेट गर्नुहोस् (वैकल्पिक), GIF रेकर्ड गर्नुहोस्, itch.io पृष्ठ लेख्नुहोस्, लिङ्क पोस्ट गर्नुहोस्सार्वजनिक यूआरएल + itch.io पृष्ठ + सामाजिक सञ्जालमा लन्च पोस्ट

यो काम गर्ने कारण शुक्रबार भेरिसिलमा पुश गर्नु हो। एकपटक यूआरएल बनेपछि, प्रत्येक शनिबार र आइतबारको कमिट स्वतः डिप्लॉय हुन्छ। "आइतबार राति डिप्लॉयको चिन्ता" हुँदैन किनभने डिप्लॉय शुक्रबार नै भइसकेको हुन्छ र सप्ताहन्तभर स्वचालित रूपमा चलिरहेको हुन्छ।


भेरिसिलमा थ्रीडी गेमको "भाइब कोडिङ" कस्तो देखिन्छ

भाइब कोडिङ भनेको तपाईंले के चाहनुहुन्छ भनेर सामान्य अंग्रेजीमा वर्णन गर्नु हो र एआई सम्पादकलाई कोड लेख्न दिनु हो, त्यसपछि आउटपुटमा पुनरावृत्ति गर्नु हो। भेरिसिलमा थ्री.जेएस गेमका लागि, यो लूप असामान्य रूपमा सफा छ: कर्सरमा प्रत्येक परिवर्तन स्थानीय प्रतिक्रियाका लागि pnpm dev टाढा हुन्छ, त्यसपछि लाइभ पूर्वावलोकन यूआरएलका लागि git push टाढा हुन्छ, त्यसपछि main मा स्वतः उत्पादनमा डिप्लॉय हुन्छ।

भाइब-कोड गरिएको भेरिसिल गेम सप्ताहन्त यस्तो देखिन्छ:

  1. कर्सरमा कौशलको सुरुवाती फोल्डर खोल्नुहोस्।
  2. च्याटमा एउटा सुविधा वर्णन गर्नुहोस्: "यदि स्पेसमै दुई पटक २०० मिलिसेकेन्ड भित्र दबाइयो भने डबल जम्प गर्नुहोस्"।
  3. कर्सरले कन्ट्रोलर फाइल सम्पादन गर्छ। बचत गर्नुहोस्। pnpm dev ले रिलोड गर्छ। तपाईंले ब्राउजरमा जम्प महसुस गर्नुहुन्छ।
  4. यदि राम्रो लाग्यो भने, git push गर्नुहोस्। भेरिसिलले एउटा पूर्वावलोकन यूआरएल बनाउँछ। साथीलाई पठाउनुहोस्।
  5. अनुभूति निश्चित भएपछि main मा मर्ज गर्नुहोस्। उत्पादन यूआरएल ६० सेकेन्डभित्र अद्यावधिक हुन्छ।

एआईले टाइप गर्ने काम गर्छ। भेरिसिलले डिप्लॉयको काम गर्छ। तपाईंले अनुभव र डिजाइनको काम गर्नुहुन्छ।


Vibe Skills मा यो सम्भव बनाउने ५ एआई थ्रीडी गेम कौशल

यी कौशलहरू भेरिसिल + थ्री.जेएस + कर्सर सप्ताहन्त कार्यप्रवाहका लागि बनाइएका हुन्। प्रत्येकले Vite-आधारित थ्री.जेएस परियोजना, चल्ने vercel.json, थ्री.जेएस सम्पत्ति बन्डलहरू सेवा दिन सक्ने Vercel को एजका लागि pnpm build, र परीक्षण गरिएको डिप्लॉय मार्ग प्रदान गर्दछ। सबै Vibe Skills मा 3D Games श्रेणी मा छन्।

१. थ्री.जेएस + भेरिसिल गेम स्टार्टर

पूर्वनिर्धारित छनोट। यसले प्लेयर कन्ट्रोलर, तेस्रो-व्यक्ति क्यामेरा, प्रकाश व्यवस्था, स्काईबक्स, र टक्करसहितको जमिनको थ्री.जेएस दृश्य उत्पन्न गर्छ। यसमा vercel.json समावेश छ जसले थ्री.जेएस सम्पत्ति बन्डलका लागि सही क्यासिङ हेडर सेट गर्दछ। pnpm dev स्थानीय रूपमा चल्छ; भेरिसिल ड्यासबोर्डमा एक क्लिकले गिटहब रिपोलाई जडान गर्छ र तपाईंले लाइभ यूआरएल पाउनुहुन्छ।

सबैभन्दा राम्रो: २डी बाहेक कुनै पनि विधाका लागि। यदि तपाईंलाई अझै थाहा छैन भने के बनाउनुहुन्छ भने यो प्रयोग गर्नुहोस्।

२. फर्स्ट-पर्सन भेरिसिल वाकर

खुट्टाको पाइलाको ध्वनि, टाउकोको हल्लाइ, र पोइन्टर-लक CSP हेडरहरूलाई सही रूपमा ह्यान्डल गर्ने vercel.json सहितको एक पालिस गरिएको फर्स्ट-पर्सन कन्ट्रोलर (WASD + माउस पोइन्टर लक + गुरुत्वाकर्षण + स्प्रिन्ट + जम्प)। यो धेरै सोलो डेभहरूलाई उत्पादनमा फसाउँछ। यो कौशलले तपाईंको लागि त्यसलाई समाधान गर्छ।

सबैभन्दा राम्रो: वाकिङ सिम, हरर प्रोटोटाइप, कथात्मक खेलहरू, सङ्ग्रहालय प्रदर्शनीहरू।

३. ब्राउजर एरिना शूटर किट

शीर्ष-डाउन एरिना (ट्विन-स्टिक कन्ट्रोलर, वेभ स्पनर, आधारभूत शत्रु एआई, प्रोजेक्टाइल प्रणाली, स्कोर HUD) भेरिसिल-ट्यून गरिएको बिल्डसहित जसले सम्पत्तिहरूलाई gzip गर्छ, एआईलाई कोड-स्प्लिट गर्छ, र सङ्गीतलाई ढिलो लोड गर्छ। मल्टिप्लेयरका लागि हुकहरू समावेश छन्; सप्ताहन्तले एकल-खेलाडीलाई शिप गर्छ।

सबैभन्दा राम्रो: आर्केड शूटर, बुलेट हेल, मोबाइलमा छिटो लोड हुने जाम प्रविष्टिहरू।

४. भेरिसिल पज्जल प्लेटफर्मर

तेस्रो-व्यक्ति प्लेटफर्मर (परिवर्तनशील जम्प, कोयोटी समय, लेज पत्ता लगाउने), चेकपोइन्टहरू, ब्लेंडर वा कोडमा सम्पादन गर्न सकिने तीनवटा स्टब लेभलहरू, र एउटा पुन: अवतरण गर्ने लूप। vercel.json लाई तत्कालै एज-क्यास्केड लेभल पुनः लोड गर्न कन्फिगर गरिएको छ, त्यसैले फोनमा खेल्दा छिटो महसुस हुन्छ।

सबैभन्दा राम्रो: पज्जल प्लेटफर्मर, पार्कौर प्रोटोटाइप, लेभल-डिजाइन प्रयोगहरू।

५. भेरिसिल ड्राइभिङ स्यान्डबक्स

आर्केड ड्राइभिङ अनुभव (प्रवेग वक्र, बहाव भौतिकी, क्यामेरा ढिलाइ, आधारभूत भूभाग) कम-पोलि कार, ट्र्याक टेम्प्लेट, र ठूला भूभाग मेषहरूका लागि ट्यून गरिएको डिप्लॉयसहित। पूर्व-सेट HTTP हेडरहरूले सफारीमा WebGL सन्दर्भलाई छिटो सुरु गर्न मद्दत गर्दछ, जुन ऐतिहासिक रूपमा थ्री.जेएसका लागि सबैभन्दा ढिलो ब्राउजर हो।

सबैभन्दा राम्रो: आर्केड रेसिङ, अफ-रोड ड्राइभिङ, पोर्टफोलियोका लागि कार-फिल डेमो।

Vibe Skills मा सबै थ्रीडी गेम कौशलहरू ब्राउज गर्नुहोस् →


शुक्रबारदेखि आइतबारसम्म चरण-दर-चरण

यो सही समयतालिका हो। सुरु हुने समय समायोजन गर्नुहोस्, तर क्रम कायम राख्नुहोस्। शुक्रबार राति भेरिसिल डिप्लॉय मुख्य कोसेढुङ्गा हो। त्यसपछिका सबै कुरा पुनरावृत्ति हुन्।

शुक्रबार ६ बजे - ८ बजे: कौशल छान्नुहोस्, गिटहबमा पुश गर्नुहोस्, भेरिसिल जडान गर्नुहोस्

चरण १: Vibe Skills मा एउटा थ्रीडी गेम कौशल छान्नुहोस्। 3D Games श्रेणी ब्राउज गर्नुहोस्, तपाईंको विधासँग मिल्ने छान्नुहोस्, र सुरुवाती प्रोजेक्टलाई नयाँ फोल्डरमा स्थापना गर्नुहोस्। यसलाई कर्सरमा खोल्नुहोस्। ७ बजेसम्ममा तपाईंले चल्ने खेलाडीसहितको एउटा थ्री.जेएस दृश्य देख्नुपर्छ।

चरण २: गिटहब रिपो सिर्जना गर्नुहोस् र पुश गर्नुहोस्। git init, git remote add, git push। आफ्नो खेलको उपनामलाई रिपोको नामको रूपमा प्रयोग गर्नुहोस् (crystal-runner, lunar-fishing, जे पनि)। रिपोको नाम प्रायः तपाईंको यूआरएल बन्छ।

चरण ३: रिपोलाई भेरिसिलमा जडान गर्नुहोस्। गिटहबसँग भेरिसिलमा साइन इन गर्नुहोस् (निःशुल्क), "Add New Project" मा क्लिक गर्नुहोस्, रिपो छान्नुहोस्। भेरिसिलले स्वतः Vite पत्ता लगाउँछ र बिल्ड कन्फिगर गर्छ। डिप्लॉयमा क्लिक गर्नुहोस्। ६० सेकेन्डभित्र तपाईंले crystal-runner.vercel.app यूआरएल पाउनुहुन्छ। यसलाई आफ्नो फोनमा खोल्नुहोस्। एक जना साथीलाई पठाउनुहोस्। यस सप्ताहन्तको बाँकी समयका लागि डिप्लॉय बार अब शून्य छ।

शुक्रबार ८ बजे - १० बजे: डिजाइन कागजात लेख्नुहोस्

चरण ४: पाँच प्रश्नको सामान्य अंग्रेजीमा जवाफ दिनुहोस्। रिपो भित्र एउटा Notion पृष्ठ वा markdown फाइल खोल्नुहोस् र जवाफ दिनुहोस्:

  • खेलाडी प्रत्येक ५ सेकेन्डमा के गरिरहेको छ? (मुख्य लूप)
  • जीतको अवस्था र हारको अवस्था के हो?
  • एउटा दौड वा एउटा तह कति लामो छ?
  • दृश्यको मुख्य आकर्षण के हो? (रङ प्यालेट, प्रकाश, शैली सन्दर्भ)
  • के हो त्यो एउटा सुविधा जसले यसलाई ३० सेकेन्डमा अविस्मरणीय बनाउँछ?

चरण ५: डिजाइन कागजात कमिट गर्नुहोस्। यसलाई रिपोमा पुश गर्नुहोस्। भेरिसिलले फेरि डिप्लॉय गर्नेछ। प्रत्येक अर्थपूर्ण परिवर्तनलाई पुश गर्ने अनुशासनले लाइभ यूआरएललाई इमानदार राख्छ।

शनिबार ९ बजे - १ बजे: मुख्य मेकेनिक निर्माण गर्नुहोस्

चरण ६: आफ्नो एक सुविधाले प्लेसहोल्डर मेकेनिकलाई बदल्नुहोस्। यो मात्रै सुविधा हो जुन महत्त्वपूर्ण छ। यसको लागि कर्सर च्याट प्रयोग गर्नुहोस् ("जब खेलाडीले क्रिस्टल उठाउँछ, २ सेकेन्डका लागि नजिकका शत्रुहरूलाई फ्रिज गर्नुहोस् र एउटा घण्टी बजाउनुहोस्")। pnpm dev प्रयोग गरेर स्थानीय रूपमा पुनरावृत्ति गर्नुहोस्। जब यो राम्रो लाग्छ, पुश गर्नुहोस्।

चरण ७: जित/हारको अवस्था जोड्नुहोस्। वास्तविक अन्त्यसहितको ६०-सेकेन्डको बिल्डले खेल जस्तो लाग्छ। अन्त्य बिनाको ६०-मिनेटको बिल्डले टेक डेमो जस्तो लाग्छ। सधैं पहिले जितको स्क्रिन, त्यसपछि अरू सबै कुरा जोड्नुहोस्।

शनिबार १ बजे - राति ८ बजे: एउटा तह थप्नुहोस्

चरण ८: एउटा पालिस गरिएको तह निर्माण गर्नुहोस्। तीनवटा आधा-बेक्ड तहहरू नभई। ज्यामितिका लागि प्लेसहोल्डर घनहरू प्रयोग गर्नुहोस्। कौशलको स्टक क्यारेक्टर प्रयोग गर्नुहोस्। अनुभवलाई ट्यून गर्नुहोस् - जम्प उचाइ, क्यामेरा ढिलाइ, कणहरूको तीव्रता।

चरण ९: एउटा ट्युटोरियल ओभरले थप्नुहोस्। पहिलो पटक सुरु हुँदा दुई वाक्यको "चल्नका लागि WASD, फायर गर्न क्लिक गर्नुहोस्" पपअपले भ्रमित खेलाडीहरूलाई ८ सेकेन्डमा हार मान्नबाट रोक्छ। कर्सरले ३० सेकेन्डमा React (वा भ्यानिلا DOM) ओभरले तयार गर्न सक्छ।

चरण १०: हरेक घण्टा पुश गर्नुहोस्। प्रत्येक पुशले भेरिसिल पूर्वावलोकन यूआरएल पाउँछ। प्रत्येकलाई साथीलाई पठाउनुहोस्। प्रतिक्रिया लूप यो स्ट्याकको गोप्य हतियार हो।

आइतबार १० बजे - ४ बजे: पालिसिङ

चरण ११: तीनवटा ध्वनि थप्नुहोस्। खुट्टाको पाइलाको लुप, परिवेशको ध्वनि, जित्ने सङ्गीत। तीनवटा ध्वनिले पनि सप्ताहन्तको प्रोटोटाइपलाई धेरै सुधार गर्दछ। निःशुल्क स्रोतहरू: freesound.org, opengameart.org।

चरण १२: जुस थप्नुहोस्। प्रहार हुँदा कणहरू, प्रभावमा स्क्रिन हल्लाइ, स्कोरमा नम्बर पपअप। जुसले ४८ घण्टाको बिल्डलाई GIF मा ६ महिनाको जस्तो देखाउँछ। कर्सरलाई "खेलाडीले क्षति लिँदा ०.३ को तीव्रताले १५० मिलिसेकेन्डका लागि स्क्रिन हल्लाउनुहोस्" भनी सोध्नुहोस् - यसले पाँच सेकेन्डमा क्यामेरा-शेक हुक लेख्छ।

चरण १३: लाइटहाउस पास चलाउनुहोस्। फोनमा भेरिसिल यूआरएल खोल्नुहोस् र Chrome DevTools Lighthouse चलाउनुहोस्। थ्री.जेएस बन्डलहरू सामान्यतया ४०० KB देखि १.५ MB सम्म हुन्छन्। यदि तपाईं ३ MB भन्दा बढी हुनुहुन्छ भने, कर्सरलाई भारी मोड्युलहरूमा कोड स्प्लिटिङ सक्षम गर्न भन्नुहोस्। भेरिसिलको gzip र brotli ले बाँकी काम गर्नेछ।

चरण १४: बग पास। आफ्नो लाइभ यूआरएल लगातार पाँच पटक खेल्नुहोस्। दुई पटक बिग्रने जुनसुकै कुरा पनि ठीक गर्नुहोस्। एक पटक बिग्रने कुनै पनि कुरालाई बेवास्ता गर्नुहोस्।

आइतबार ४ बजे - ८ बजे: लन्च

चरण १५: (वैकल्पिक) कस्टम डोमेन सेट गर्नुहोस्। यदि तपाईंले पहिले नै name-game.com किन्नुभएको छ भने, यसलाई भेरिसिलको प्रोजेक्ट सेटिङहरूमा थप्नुहोस्। SSL स्वतः हुन्छ। अन्यथा *.vercel.app यूआरएल ठीक छ - यसमा HTTPS छ, यो साझा गर्न सकिन्छ, र यो जताततै लोड हुन्छ।

चरण १६: उत्कृष्ट क्षणको १५-सेकेन्डको GIF रेकर्ड गर्नुहोस्। स्थानीय होइन, लाइभ यूआरएल प्रयोग गर्नुहोस्। GIF नै हो जुन Twitter, Bluesky, र Reddit मा क्लिक हुन्छ।

चरण १७: itch.io पृष्ठ सिर्जना गर्नुहोस् (वैकल्पिक तर उच्च लाभदायी)। शीर्षक, एक-लाइन ट्यागलाइन, तीनवटा स्क्रिनसट, GIF, नियन्त्रणहरू, क्रेडिटहरू, र तपाईंको *.vercel.app iframe को एउटा इम्बेड (itch.io ले HTML5 खेलहरूको लागि iframe इम्बेडलाई समर्थन गर्दछ)। अब तपाईंसँग दुईवटा यूआरएल छन् - एउटा सामान्य साझेदारीका लागि र अर्को गेमर दर्शकहरूका लागि।

चरण १८: लिङ्क पोस्ट गर्नुहोस्। Twitter, Bluesky, तपाईंको डेभ समुदाय Discord, r/IndieDev, r/threejs, r/WebGames। सधैं GIF बाट सुरु गर्नुहोस्। सधैं यूआरएल समावेश गर्नुहोस्। यदि तपाईंले Vibe Skills कौशल प्रयोग गर्नुभयो भने, यसलाई डेभलग पोस्टमा उल्लेख गर्नुहोस् - यसरी पढ्ने अन्य डेभहरूले पनि त्यस्तै सुरुवाती प्रोजेक्ट चाहन्छन्।


भेरिसिल डिप्लॉयका तीन सबैभन्दा सामान्य असफलताहरूबाट बच्ने तरिका

लगभग हरेक सोलो थ्री.जेएस + भेरिसिल सप्ताहन्तलाई तीनवटा कुराहरूले बिगारिदिन्छ। यी सबै ५ मिनेटका समाधानहरू हुन् यदि तपाईंले तिनीहरूलाई शुक्रबार राति समात्नुभयो भने, र आइतबार साँझ ७ बजे पत्ता लगाउनुभयो भने ५ घण्टाको समस्या बन्न सक्छन्।

  • गलत बिल्ड आउटपुट डाइरेक्टरी। Vite को पूर्वनिर्धारित dist/ हो। भेरिसिलले स्वतः Vite पत्ता लगाउँछ र dist/ प्रयोग गर्छ। यदि तपाईंले आउटपुट अनुकूलन गर्नुभयो भने, vercel.json वा प्रोजेक्ट सेटिङहरूमा outputDirectory सेट गर्नुहोस् वा तपाईंको डिप्लॉय ४०४ हुनेछ।
  • स्थानीय रूपमा काम गर्ने सम्पत्ति पथहरू तर उत्पादनमा ४०४ हुने। कुनै पनि रनटाइम-लोड हुने GLB, टेक्स्चर, वा अडियो फाइलका लागि सापेक्ष पथहरू वा Vite import.meta.env.BASE_URL सहायक प्रयोग गर्नुहोस्। हार्डकोड गरिएका /assets/... पथहरू सामान्यतया काम गर्छन्, तर प्रतिलिपि-पेस्ट गरिएका पूर्ण Windows पथहरू निश्चित रूपमा काम गर्दैनन्।
  • CSP हेडरहरू जसले पोइन्टर लक वा अडियो सन्दर्भलाई रोक्छ। फर्स्ट-पर्सन खेलहरूलाई पोइन्टर लक चाहिन्छ। अडियोलाई प्रयोगकर्ता-इशारा सक्रियता चाहिन्छ। 3D Games श्रेणी बाट कुनै पनि कौशलले यसलाई ह्यान्डल गर्न vercel.json मा सही headers ब्लक सहित आउँछ। यदि तपाईंले आफ्नै स्क्र्याचबाट लेख्नुभयो भने, कौशलको रिपोबाट कन्फिग प्रतिलिपि गर्नुहोस्।

डिप्लॉय शुक्रबार काम गर्छ, त्यसैले आइतबार जब यी कुराहरू बिग्रन्छन्, यो सधैं भर्खरैको परिवर्तनको कारणले हुन्छ। git bisect तपाईंको साथी हो। अझ राम्रो: हरेक ३० मिनेटमा पुश गर्नुहोस् ताकि बिग्रिएको कमिट सानो होस्।


बारम्बार सोधिने प्रश्नहरू

मेरो खेलमा ट्राफिक आएमा भेरिसिलको निःशुल्क टियरले वास्तवमै काम गर्छ त?

हो, सप्ताहन्तको लन्च र पहिलो केही हप्ताका लागि। निःशुल्क टियरले तपाईंलाई प्रति महिना १०० GB ब्यान्डविथ दिन्छ, जुन ५ MB को थ्री.जेएस बिल्डको लगभग २०,००० पटक खेलिने बराबर हो। यदि तपाईं यो सीमामा पुग्नुभयो भने, प्रो योजना $२०/महिना हो र तपाईंलाई १ TB सम्म बढाउँछ। सप्ताहन्तको शिपिङका लागि, निःशुल्क पर्याप्त छ। Vibe Skills मा रहेका कौशलहरूले बन्डलको आकार घटाउने बिल्ड कन्फिगसहित आउँछन्, जसले निःशुल्क टियरलाई अझ लामो समयसम्म चलाउँछ।

के म निःशुल्क भेरिसिल टियरमा कस्टम डोमेन प्रयोग गर्न सक्छु?

हो। निःशुल्क टियरले स्वचालित HTTPS सहित कस्टम डोमेनहरूलाई समर्थन गर्दछ। डोमेन किन्नुहोस् (Namecheap, Cloudflare Registrar, Porkbun), यसलाई भेरिसिलमा पोइन्ट गर्नुहोस्, र भेरिसिलले SSL प्रमाणपत्र ह्यान्डल गर्छ। सेटअपमा लगभग १० मिनेट लाग्छ। यदि तपाईंको डोमेन छैन भने, name-game.vercel.app यूआरएल कुनै पनि प्लेटफर्ममा साझा गर्न पर्याप्त छोटो छ।

यो स्ट्याक गेम जाम सबमिशनका लागि ठीक छ त?

हो, र यो गेम जाम सबमिशनका लागि सबैभन्दा राम्रो स्ट्याकहरू मध्ये एक हो। धेरै जामहरू (Ludum Dare, GMTK, js13k, GitHub Game Off) कुनै पनि वेब-खेल्न सकिने यूआरएल स्वीकार गर्छन्। *.vercel.app लिङ्क निर्णायकहरूका लागि itch.io यूआरएल जस्तै काम गर्छ। धेरै जाम विजेताहरू दुवैमा शिप गर्छन् - गेमर दर्शकहरूका लागि itch.io, र छिटो आधिकारिक यूआरएलको रूपमा भेरिसिल।

सुरु गर्नु अघि मलाई थ्री.जेएस थाहा हुनुपर्छ?

तपाईंलाई कर्सरले लेखेको पढ्न र मानहरू ट्यून गर्न पर्याप्त जावास्क्रिप्ट चाहिन्छ। तपाईंले थ्री.जेएस स्क्र्याचबाट लेख्नु पर्दैन। Vibe Skills मा रहेका कौशलहरूले इन्जिन सेटअप, क्यामेरा, कन्ट्रोलर, र बिल्ड कन्फिग उत्पन्न गर्छन्। कर्सरले तपाईंको विवरणहरूबाट गेमप्ले कोड ह्यान्डल गर्छ।

यदि मेरो भेरिसिल बिल्ड आइतबार साँझ ७ बजे फेल भयो भने के हुन्छ?

सबैभन्दा सामान्य कारण टाइपस्क्रिप्ट त्रुटि वा हराएको env var हो। भेरिसिलले बिल्ड लगलाई फेल भएको लाइन हाइलाइट गरेर देखाउँछ। ड्यासबोर्डमा एक क्लिकले अन्तिम काम गर्ने डिप्लॉयलाई रोलब्याक गर्छ र यसलाई उत्पादनमा प्रमोट गर्छ। किनभने प्रत्येक पुश एक पूर्वावलोकन डिप्लॉय हो, तपाईं कहिल्यै एक कमिट भन्दा बढी काम गर्ने बिल्डबाट टाढा हुनुहुन्न। त्यसैले शनिबार र आइतबार हरेक ३० मिनेटमा पुश गर्नु महत्त्वपूर्ण छ।

के म Vibe Skills थ्रीडी गेम कौशलबाट कोड बेच्न वा परिमार्जन गर्न सक्छु?

हो। Vibe Skills मा रहेका कौशलहरूले व्यावसायिक-मैत्री लाइसेन्ससहित आउँछन् जसले तपाईंलाई आफ्नो खेलमा कोड भेरिसिल, itch.io, Steam, वा अन्य कुनै पनि ठाउँमा जारी गर्न दिन्छ। सिर्जनाकर्ताहरूले कौशलको IP राख्छन्, तपाईंले त्यस माथि निर्मित खेलको IP राख्नुहुन्छ।

यदि म कर्सर प्रयोग गर्न चाहँदैन भने के गर्ने?

परियोजना फाइलहरू सम्पादन गर्न सक्ने कुनै पनि एआई सम्पादक काम गर्छ। Claude Code, Cursor, Windsurf, GitHub Copilot Chat, Cline - यी कुनै पनि Vibe Skills कौशलबाट थ्री.जेएस आधारभूत संरचनामा पुनरावृत्ति गर्न सक्छन्। कौशल आफैं सम्पादक-अज्ञेय हो।


यो सप्ताहन्तमा शिप गर्नुहोस्

धेरै सोलो डेभहरूले थ्रीडी गेम कहिल्यै शिप नगर्नुको कारण इन्जिन, विधा, वा कौशलको सीमा होइन। यो शुक्रबार राति हो जहाँ उनीहरू "अझै केही अनुसन्धान गर्छु" भन्छन् र कहिल्यै सुरु गर्दैनन्। तपाईंको अर्को खाली सप्ताहन्तमा, चार-चरणको योजना पालना गर्नुहोस्: Vibe Skills थ्रीडी गेम कौशल स्थापना गर्नुहोस्, गिटहबमा पुश गर्नुहोस्, भेरिसिल जडान गर्नुहोस्, शुक्रबार ८ बजेसम्म डिप्लॉय गर्नुहोस्, त्यसपछि शनिबार र आइतबार लाइभ यूआरएलमा पुनरावृत्ति गर्नुहोस्।

भेरिसिलमा शिप गरिएका दस सप्ताहन्त-शिप गरिएका खेलहरूको तपाईंको पोर्टफोलियो तपाईंको काल्पनिक छ-महिनाको सपना इन्जिन परियोजना भन्दा बढी मूल्यवान छ। शिप गरिएकैले सधैं जित्छ। निःशुल्क भेरिसिल यूआरएल त्यसको प्रमाण हो।

Vibe Skills मा थ्रीडी गेम कौशलहरू ब्राउज गर्नुहोस् →


थ्री.जेएसको बोइलरप्लेट म्याराथन छोड्नुहोस्। Vibe Skills मा एउटा थ्रीडी गेम कौशल स्थापना गर्नुहोस्, भेरिसिलमा पुश गर्नुहोस्, र आइतबार रातिसम्ममा लाइभ यूआरएल प्राप्त गर्नुहोस्।

यस हप्ता Vercel मा 3D गेम कसरी पठाउने (AI सीपहरु संग) - Vibe Skills preview
Vibe Skills
Vibe Skills

Claude, Cursor, र थपका लागि सयौं तयार-निर्मित सीपहरू ब्राउज गर्नुहोस्।