اس ویک اینڈ پر 3D گیم Vercel پر کیسے شائع کریں (AI مہارت کے ساتھ)

جمعہ کو آئیڈیا، اتوار کو لائیو یو آر ایل۔ 48 گھنٹے میں تھری ڈی گیم بھیجنے کے لیے The Three.js + Cursor + Vibe Skills + Vercel فری ٹائر پلے بک۔

3D GamesVercelThree.jsVibe CodingVibe Skills
Sarah Mitchell
Sarah Mitchell
Creator editorial lead
9,623
اس ویک اینڈ پر 3D گیم Vercel پر کیسے شائع کریں (AI مہارت کے ساتھ) - Vibe Skills preview
Vibe Skills
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 گیم صلاحیتیں، اور فرائی ڈے سے سنڈے تک قدم بہ قدم۔


اس ویک اینڈ پر 3D گیم Vercel پر کیسے شائع کریں (AI مہارت کے ساتھ) - Vibe Skills preview
Vibe Skills
Vibe Skills

Claude، Cursor، اور بہت کچھ کے لیے سینکڑوں تیار سکلز براؤز کریں۔

Vercel + Three.js + AI صلاحیتیں سولو ڈیول اسٹیک کیوں ہے

Vercel Three.js گیم کے لیے سب سے سست ڈیپلائی ٹارگٹ ہے۔ GitHub پر پش کریں، Vercel دیکھتا ہے، پروجیکٹ بناتا ہے، اور 60 سیکنڈ کے اندر آپ کو URL واپس دیتا ہے۔ سرور پروویژن کرنے کی ضرورت نہیں، Docker فائل نہیں، NGINX کنفیگریشن نہیں، SSL سیٹ اپ نہیں۔ Three.js بنڈل صرف سٹیٹک HTML، JS، اور WebGL اثاثے ہیں، جو بالکل وہی ہے جس کے لیے Vercel کا ایج نیٹ ورک بنایا گیا تھا۔

مفت ٹائر اختتام ہفتہ کے لانچ کو آرام سے کور کرتا ہے:

  • 100 GB بینڈوڈتھ فی مہینہ۔ 5 MB Three.js بلڈ 10,000 پلے پر 50 GB ہے۔ آپ بینڈوڈتھ ختم ہونے سے پہلے اختتام ہفتہ ختم کر دیں گے۔
  • HTTPS اور *.vercel.app سب ڈومین کے ساتھ لامحدود سٹیٹک ڈیپلائز۔
  • مفت ٹائر پر کسٹم ڈومین سپورٹ - اگر آپ کے پاس name-game.com ہے تو اسے لائیں، ورنہ مفت vercel.app URL ہر سوشل پلیٹ فارم پر شیئر کے قابل ہے۔
  • ہر کمٹ کے لیے پریو ویو ڈیپلائز - ہر پش کا اپنا URL ہوتا ہے، لہذا آپ دوست کے ساتھ بلڈ شیئر کر سکتے ہیں اور اسے توڑے بغیر دوبارہ تکرار کر سکتے ہیں۔

Vibe Skills سے ایک AI صلاحیت شامل کریں اور بوائلر پلیٹ بھی غائب ہو جائے گا۔ Three.js سین سیٹ اپ، پلیئر کنٹرولر، بلڈ پائپ لائن، اور Vercel کے لیے تیار vercel.json ایک کمانڈ میں جنریٹ ہوتے ہیں۔ پھر Cursor اختتام ہفتہ کے باقی حصے کو ایک چیٹ میں بدل دیتا ہے جہاں آپ مطلوبہ گیم پلے بیان کرتے ہیں اور آؤٹ پٹ کو ٹیون کرتے ہیں۔ یہ مکمل اسٹیک ہے: فاؤنڈیشن کے لیے مارکیٹ پلیس کی صلاحیت، تکرار کے لیے AI ایڈیٹر، اور ڈیپلائی کے لیے Vercel۔ سولو، مفت، اور تیز۔


اس ویک اینڈ پر 3D گیم Vercel پر کیسے شائع کریں (AI مہارت کے ساتھ) - Vibe Skills preview
Vibe Skills
Vibe Skills

Claude، Cursor، اور بہت کچھ کے لیے سینکڑوں تیار سکلز براؤز کریں۔

48 گھنٹے کی اناٹومی: فرائی ڈے کانسیپٹ سے سنڈے ڈیپلائی تک

ہر اختتام ہفتہ کا جہاز جو اصل میں لائیو جاتا ہے وہی بیٹس فالو کرتا ہے۔ چال یہ ہے کہ ڈیپلائی کو فرائی ڈے کو پلان کیا جائے، سنڈے دوپہر کو نہیں، تاکہ آخری چھ گھنٹے بلڈ ایرر سے لڑنے کے بجائے پالش پر جائیں۔

مرحلہٹائم بلاکآپ کیا کرتے ہیںمرحلہ کے اختتام تک کیا شپ کیا جاتا ہے
مرحلہ 1: کانسیپٹفرائی ڈے 6pm - 10pmصنف منتخب کریں، 1 صفحے کا ڈیزائن ڈاک لکھیں، Vibe Skills 3D گیم کی صلاحیت انسٹال کریں، گٹ ہب پر اسٹارٹر پش کریں، Vercel سے کنیکٹ کریںبوائلر پلیٹ سین کے ساتھ لائیو name-game.vercel.app URL
مرحلہ 2: بلڈسیچر ڈے 9am - 8pmپلیس ہولڈر کو اپنے کور میکینک سے بدلیں، 1 لیول شامل کریں، جیت/ہار کی حالت کو ورکنگ بنائیںاسی Vercel URL پر پلے ایبل بلڈ، ہر پش پر خودکار طور پر ڈیپلائی شدہ
مرحلہ 3: پالشسنڈے 10am - 4pmساؤنڈ، جوس، ٹیوٹوریل پاپ اپ، بگ پاس، موبائل پر پرفارمنس چیکپہلا 60 سیکنڈ کسی بھی ڈیوائس پر نہ ٹوٹنے والا بلڈ
مرحلہ 4: لانچسنڈے 4pm - 8pmکسٹم ڈومین سیٹ کریں (اختیاری)، GIF ریکارڈ کریں، itch.io صفحہ لکھیں، لنک پوسٹ کریںپبلک URL + itch.io صفحہ + سوشل پر لانچ پوسٹ

یہ کام کرنے کی وجہ فرائی ڈے کو Vercel پر پش ہے۔ ایک بار جب URL موجود ہو جاتا ہے، تو ہر سیچر ڈے اور سنڈے کمٹ خود بخود ڈیپلائی ہوتا ہے۔ "سنڈے نائٹ ڈیپلائی پینک" نہیں ہے کیونکہ ڈیپلائی پہلے ہی فرائی ڈے کو ہو چکا ہے اور پورا اختتام ہفتہ خودکار طور پر چل رہا ہے۔


Vercel پر 3D گیم کی "وائب کوڈنگ" کیسی نظر آتی ہے

وائب کوڈنگ کا مطلب ہے کہ آپ جو چاہتے ہیں اسے سادہ انگریزی میں بیان کریں اور AI ایڈیٹر کو کوڈ لکھنے دیں، پھر آؤٹ پٹ پر تکرار کریں۔ Vercel پر Three.js گیم کے لیے، لوپ غیر معمولی طور پر صاف ہے: Cursor میں ہر تبدیلی pnpm dev کے فاصلے پر لوکل فیڈ بیک سے، پھر git push کے فاصلے پر لائیو پریو ویو URL سے، پھر 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 کو ایج سے سرو کرنے کے قابل سٹیٹک بنڈل تیار کرتا ہے، اور ایک ٹیسٹڈ ڈیپلائی پاتھ کے ساتھ آتی ہے۔ سبھی Vibe Skills پر 3D گیمز کیٹیگری میں ہیں۔

1. Three.js + Vercel گیم اسٹارٹر

ڈیفالٹ انتخاب۔ ایک پلیئر کنٹرولر، تھرڈ پرسن کیمرا، لائٹنگ ریگ، اسکائی باکس، اور کولیشن کے ساتھ گراؤنڈ پلین کے ساتھ Three.js سین جنریٹ کرتا ہے۔ vercel.json کے ساتھ آتا ہے جو Three.js اثاثہ بنڈلز کے لیے صحیح کیشنگ ہیڈرز سیٹ کرتا ہے۔ pnpm dev لوکلی چلتا ہے؛ Vercel ڈیش بورڈ میں ایک کلک گٹ ہب ریپو کو کنیکٹ کرتا ہے اور آپ کے پاس لائیو URL ہے۔

بہترین کے لیے: کسی بھی صنف کے لیے ماسوائے خالص 2D۔ اسے استعمال کریں اگر آپ ابھی تک نہیں جانتے کہ آپ کیا بنا رہے ہیں۔

2. فرسٹ پرسن Vercel واکر

ایک پالش شدہ فرسٹ پرسن کنٹرولر (WASD + ماؤس پوائنٹر لاک + گریویٹی + اسپرنٹ + جمپ) فٹ سٹیپ ہکس، ہیڈ-بوب، اور ایک vercel.json کے ساتھ جو پوائنٹر-لاک CSP ہیڈرز کو صحیح طریقے سے سنبھالتا ہے۔ یہ بہت سے سولو ڈویلپرز کو پروڈکشن میں پھنساتا ہے۔ صلاحیت اسے آپ کے لیے حل کرتی ہے۔

بہترین کے لیے: واکنگ سِمس، ہارر پروٹو ٹائپس، بیانیہ گیمز، میوزیم نمائشیں۔

3. براؤزر ایرینا شوٹر کٹ

ایک ٹاپ-ڈاؤن ایرینا (ٹون اسٹک کنٹرولر، ویو سپانر، بیسک اینیمی AI، پروجیکٹائل سسٹم، اسکور HUD) Vercel-ٹیونڈ بلڈ کے ساتھ جو اثاثوں کو gzips کرتا ہے، AI کو کوڈ-اسپلیٹ کرتا ہے، اور میوزک کو لیزی لوڈ کرتا ہے۔ ملٹی پلیئر ہکس شامل ہیں؛ اختتام ہفتہ سنگل پلیئر شپ کرتا ہے۔

بہترین کے لیے: آرکیڈ شوٹرز، بلٹ ہیل، جام انٹریز جنہیں موبائل پر تیزی سے لوڈ ہونے کی ضرورت ہے۔

4. Vercel پزل پلیٹ فارمر

ایک تھرڈ پرسن پلیٹ فارمر (متغیر جمپ، کویوٹ ٹائم، لیج ڈیٹیکشن)، چیک پوائنٹس، تین اسٹب لیولز جنہیں آپ بلینڈر یا کوڈ میں ایڈٹ کر سکتے ہیں، اور ایک ریسپان لوپ۔ vercel.json کو فوری ایج-کیشڈ لیول ری لوڈز کے لیے کنفیگر کیا گیا ہے، لہذا فون پر پلے ٹیسٹنگ تیز محسوس ہوتی ہے۔

بہترین کے لیے: پزل پلیٹ فارمرز، پارکور پروٹو ٹائپس، لیول-ڈیزائن تجربات۔

5. Vercel ڈرائیونگ سینڈ باکس

آرکیڈ ڈرائیونگ فیل (ا ایکسیلریشن کرو، ڈرفٹ فزکس، کیمرا لیک، بیسک ٹیرین) لو-پولی کار، ٹریک ٹیمپلیٹ، اور بڑے ٹیرین میش کے لیے ٹیونڈ ڈیپلائی کے ساتھ۔ پری سیٹ HTTP ہیڈرز سفاری پر WebGL کانٹیسٹ کو تیزی سے شروع کرتے ہیں، جو تاریخی طور پر Three.js کے لیے سب سے سست براؤزر ہے۔

بہترین کے لیے: آرکیڈ ریسنگ، آف روڈ ڈرائیونگ، پورٹ فولیو کے لیے کار-فیل ڈیمو۔

Vibe Skills پر تمام 3D گیم صلاحیتیں براؤز کریں →


فرائی ڈے سے سنڈے قدم بہ قدم

یہ بالکل شیڈول ہے۔ شروع کے وقت کو ایڈجسٹ کریں، لیکن ترتیب برقرار رکھیں۔ کلیدی سنگ میل فرائی ڈے نائٹ Vercel ڈیپلائی ہے۔ اس کے بعد سب کچھ تکرار ہے۔

فرائی ڈے 6pm - 8pm: صلاحیت منتخب کریں، گٹ ہب پر پش کریں، Vercel کنیکٹ کریں

قدم 1: Vibe Skills پر ایک 3D گیم صلاحیت منتخب کریں۔ 3D گیمز کیٹیگری براؤز کریں، وہ منتخب کریں جو آپ کی صنف سے میل کھاتی ہے، اور اسٹارٹر کو ایک نئے فولڈر میں انسٹال کریں۔ Cursor میں اسے کھولیں۔ آپ کو 7pm تک موونگ پلیئر کے ساتھ Three.js سین نظر آنا چاہیے۔

قدم 2: گٹ ہب ریپو بنائیں اور پش کریں۔ 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: لائف ہاؤس پاس چلائیں۔ فون پر Vercel URL کھولیں اور Chrome DevTools لائف ہاؤس چلائیں۔ 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 وہ ہے جو ٹوئٹر، بلیو اسکائی، اور ریڈڈیٹ پر کلک ہوتا ہے۔

قدم 17: itch.io صفحہ بنائیں (اختیاری لیکن اعلی فائدہ مند)۔ ٹائٹل، ایک لائن کا ٹیگ لائن، تین اسکرین شاٹ، GIF، کنٹرولز، کریڈٹس، اور اپنے *.vercel.app iframe کا ایمبیڈ (itch.io HTML5 گیمز کے لیے iframe ایمبیڈ کو سپورٹ کرتا ہے)۔ اب آپ کے پاس دو URL ہیں - ایک آرام دہ شیئرنگ کے لیے اور ایک گیمر سامعین کے لیے۔

قدم 18: لنک پوسٹ کریں۔ ٹوئٹر، بلیو اسکائی، آپ کا ڈویلپر کمیونٹی Discord، r/IndieDev، r/threejs، r/WebGames۔ ہمیشہ GIF کے ساتھ شروع کریں۔ ہمیشہ URL شامل کریں۔ اگر آپ نے Vibe Skills کی صلاحیت استعمال کی ہے، تو اسے ڈیولگ پوسٹ میں بتائیں - ساتھ پڑھنے والے دیگر ڈویلپرز وہی اسٹارٹر چاہیں گے۔


Vercel ڈیپلائی کی تین سب سے عام ناکامیوں سے کیسے بچیں

تین چیزیں تقریبا ہر سولو Three.js + Vercel اختتام ہفتہ کو توڑتی ہیں۔ یہ سب 5 منٹ کی ٹھیک ہیں اگر آپ انہیں فرائی ڈے نائٹ کو پکڑ لیں، اور 5 گھنٹے کی خرگوش کی سوراخ ہیں اگر آپ انہیں سنڈے 7pm کو دریافت کریں۔

  • غلط بلڈ آؤٹ پٹ ڈائریکٹری۔ Vite ڈیفالٹ dist/ ہے۔ Vercel خود بخود Vite کا پتہ لگاتا ہے اور dist/ کا استعمال کرتا ہے۔ اگر آپ نے آؤٹ پٹ کو کسٹمائز کیا ہے، تو vercel.json یا پروجیکٹ سیٹنگز میں outputDirectory سیٹ کریں یا آپ کا ڈیپلائی 404 ہوگا۔
  • اثاثہ کے راستے جو لوکلی کام کرتے ہیں لیکن پروڈکشن میں 404 ہوتے ہیں۔ کسی بھی رن ٹائم لوڈڈ GLB، ٹیکسچر، یا آڈیو فائل کے لیے متعلقہ راستوں یا Vite import.meta.env.BASE_URL مددگار کا استعمال کریں۔ ہارڈ کوڈڈ /assets/... راستے عام طور پر کام کرتے ہیں، لیکن کاپی پیسٹ شدہ ایبسولیوٹ ونڈوز راستے بالکل کام نہیں کریں گے۔
  • CSP ہیڈرز جو پوائنٹر لاک یا آڈیو کانٹیسٹ کو بلاک کرتے ہیں۔ فرسٹ پرسن گیمز کو پوائنٹر لاک کی ضرورت ہوتی ہے۔ آڈیو کو صارف کے اشارے کی ایکٹیویشن کی ضرورت ہوتی ہے۔ 3D گیمز کیٹیگری کی کوئی بھی صلاحیت اسے سنبھالنے کے لیے vercel.json میں صحیح headers بلاک کے ساتھ آتی ہے۔ اگر آپ نے اسے شروع سے خود لکھا ہے، تو سکل کے ریپو سے کنفیگریشن کاپی کریں۔

ڈیپلائی فرائی ڈے کو کام کرتا ہے، لہذا جب سنڈے کو یہ چیزیں ٹوٹتی ہیں تو یہ ہمیشہ حالیہ تبدیلی کی وجہ سے ہوتی ہے۔ git bisect آپ کا دوست ہے۔ اس سے بھی بہتر: ہر 30 منٹ میں پش کرتے رہیں تاکہ خراب کمٹ چھوٹی ہو۔


اکثر پوچھے جانے والے سوالات

کیا Vercel مفت ٹائر واقعی کام کرے گا اگر میرے گیم پر ٹریفک آئے؟

ہاں، اختتام ہفتہ کے لانچ اور پہلے چند ہفتوں کے لیے۔ مفت ٹائر آپ کو 100 GB بینڈوڈتھ فی مہینہ دیتا ہے، جو کہ 5 MB Three.js بلڈ کے تقریبا 20,000 پلے ہے۔ اگر آپ اس حد تک پہنچتے ہیں، تو پرو پلان $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 جاننے کی ضرورت ہے؟

آپ کو JavaScript کی اتنی ضرورت ہے کہ Cursor جو لکھتا ہے اسے پڑھ سکیں اور ویلیوز کو ٹیون کر سکیں۔ آپ کو Three.js شروع سے لکھنے کی ضرورت نہیں ہے۔ Vibe Skills پر صلاحیتیں انجن سیٹ اپ، کیمرا، کنٹرولر، اور بلڈ کنفیگ جنریٹ کرتی ہیں۔ Cursor آپ کی تفصیلات سے گیم پلے کوڈ کو سنبھالتا ہے۔

اگر سنڈے 7pm کو میرا Vercel بلڈ ناکام ہو گیا تو کیا ہوگا؟

سب سے عام وجہ TypeScript ایرر یا گم شدہ env ویری ایبل ہے۔ 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 حاصل کریں۔

اس ویک اینڈ پر 3D گیم Vercel پر کیسے شائع کریں (AI مہارت کے ساتھ) - Vibe Skills preview
Vibe Skills
Vibe Skills

Claude، Cursor، اور بہت کچھ کے لیے سینکڑوں تیار سکلز براؤز کریں۔