কিভাবে এই সপ্তাহান্তে Vercel-এ একটি 3D গেম প্রকাশ করবেন (AI দক্ষতার সাথে)

Vibe Skills

Claude, Cursor, এবং আরও অনেক কিছুর জন্য শত শত রেডিমেড স্কিল ব্রাউজ করুন।

স্কিলগুলি অন্বেষণ করুন

এখনই বিনামূল্যে শুরু করুন

রবিবার রাতের মধ্যে Vercel-এ একটি 3D গেম প্রকাশ করুন: ৪৮-ঘন্টা ডিপ্লয় প্লেবুক

আপনি শুক্রবার সন্ধ্যায় একটি খালি প্রকল্প থেকে রবিবার রাতের খাবারের মধ্যে your-game.vercel.app লিঙ্কে পৌঁছাতে পারেন। স্ট্যাক হল Three.js, Cursor, Vibe Skills থেকে একটি এআই দক্ষতা, এবং Vercel-এর ফ্রি টায়ার। সপ্তাহান্তের মোট খরচ: $0। মোট ইনফ্রা যা আপনাকে দেখাশোনা করতে হবে: সেটাও শূন্য।

এটা "আপনার ল্যাপটপে একটি প্রোটোটাইপ তৈরি করে শেষ করা" নয়। এটি একটি পাবলিক URL যা বিশ্বের যে কেউ ব্রাউজারে HTTPS, এজ ক্যাচিং এবং একটি কাস্টম ডোমেন সহ খুলতে পারে যদি আপনি চান। এআই দক্ষতা Three.js স্ক্যাফোল্ডিং এবং একটি কার্যকরী vercel.json প্রকাশ করে। Cursor ইটারেশন লুপটি পরিচালনা করে। Vercel ডিপ্লয় পরিচালনা করে। আপনি ডিজাইন পরিচালনা করেন।

এই গাইডটি ইন্ডি ডেভেলপার, ভাইব কোডার, হ্যাকাথন অংশগ্রহণকারী এবং যারা অর্ধেক শেষ হওয়া localhost:5173 ট্যাবগুলির প্রতি ক্লান্ত তাদের জন্য। আমরা আলোচনা করি কেন এই স্ট্যাক কাজ করে, ৪৮-ঘন্টা ডিপ্লয়ের গঠন, কর্মপ্রবাহের জন্য নির্মিত পাঁচটি 3D গেম দক্ষতা, এবং শুক্রবার থেকে রবিবার পর্যন্ত ধাপে ধাপে।

Vibe Skills

Claude, Cursor, এবং আরও অনেক কিছুর জন্য শত শত রেডিমেড স্কিল ব্রাউজ করুন।

স্কিলগুলি অন্বেষণ করুন

এখনই বিনামূল্যে শুরু করুন

কেন Vercel + Three.js + এআই দক্ষতা হলো সলো ডেভেলপার স্ট্যাক

Vercel হলো Three.js গেমের জন্য সবচেয়ে অলস সম্ভব ডিপ্লয় টার্গেট। GitHub-এ পুশ করুন, Vercel লক্ষ্য করে, প্রকল্পটি তৈরি করে এবং ৬০ সেকেন্ডের মধ্যে আপনাকে একটি URL ফিরিয়ে দেয়। কোনও সার্ভার প্রভিশন করার নেই, কোনও ডকার ফাইল নেই, কোনও 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 থেকে একটি এআই দক্ষতা যোগ করুন এবং বয়লারপ্লেটও অদৃশ্য হয়ে যায়। Three.js সিন সেটআপ, প্লেয়ার কন্ট্রোলার, বিল্ড পাইপলাইন এবং Vercel-রেডি vercel.json একটি কমান্ডে তৈরি করা হয়। তারপর Cursor সপ্তাহান্তের বাকি অংশটিকে একটি চ্যাটে পরিণত করে যেখানে আপনি চান যে গেমপ্লে বর্ণনা করেন এবং আউটপুটটি টিউন করেন। এটাই সম্পূর্ণ স্ট্যাক: ভিত্তির জন্য একটি মার্কেটপ্লেস দক্ষতা, ইটারেশনের জন্য একটি এআই সম্পাদক, এবং ডিপ্লয়ের জন্য Vercel। সলো, ফ্রি এবং দ্রুত।

Vibe Skills

Claude, Cursor, এবং আরও অনেক কিছুর জন্য শত শত রেডিমেড স্কিল ব্রাউজ করুন।

স্কিলগুলি অন্বেষণ করুন

এখনই বিনামূল্যে শুরু করুন

৪৮-ঘন্টা গঠন: শুক্রবার ধারণা থেকে রবিবার ডিপ্লয়

প্রতিটি সপ্তাহান্তের শিপ যা আসলে লাইভে যায় একই বিট অনুসরণ করে। কৌশলটি হলো শুক্রবার ডিপ্লয় করার পরিকল্পনা করা, রবিবার বিকেলে নয়, যাতে শেষ ছয় ঘন্টা ফাইটিং একটি বিল্ড ত্রুটির পরিবর্তে পলিশের জন্য যায়।

এর কারণ হলো শুক্রবার Vercel-এ পুশ করা। একবার URL বিদ্যমান হলে, প্রতিটি শনিবার এবং রবিবার কমিট স্বয়ংক্রিয়ভাবে ডিপ্লয় হয়। "রবিবার রাতের ডিপ্লয় আতঙ্ক" বলে কিছু নেই কারণ ডিপ্লয় শুক্রবারই হয়ে গেছে এবং পুরো সপ্তাহান্ত স্বয়ংক্রিয়ভাবে চলছে।

Vercel-এ একটি 3D গেম "ভাইব কোডিং" দেখতে কেমন

ভাইব কোডিং মানে আপনি যা চান তা সাধারণ ইংরেজিতে বর্ণনা করা এবং একটি এআই সম্পাদককে কোড লিখতে দেওয়া, তারপর আউটপুটের উপর ইটারেট করা। 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 সেকেন্ডের মধ্যে আপডেট হয়।

এআই টাইপিং করে। Vercel ডিপ্লয় করে। আপনি অনুভূতি এবং ডিজাইন করেন।

5 টি এআই 3D গেম দক্ষতা যা Vibe Skills-এ এটি সম্ভব করে তোলে

এই দক্ষতাগুলি Vercel + Three.js + Cursor সপ্তাহান্তের কর্মপ্রবাহের জন্য নির্মিত। প্রতিটি Vite-ভিত্তিক Three.js প্রকল্প, একটি কার্যকরী vercel.json, একটি pnpm build যা Vercel এজ থেকে পরিবেশন করতে পারে এমন একটি স্ট্যাটিক বান্ডেল তৈরি করে, এবং একটি পরীক্ষিত ডিপ্লয় পথ সহ আসে। সমস্ত Vibe Skills এর 3D গেমস ক্যাটাগরিতে রয়েছে।

1. Three.js + Vercel গেম স্টার্টার

ডিফল্ট পছন্দ। একটি প্লেয়ার কন্ট্রোলার, থার্ড-পার্সন ক্যামেরা, লাইটিং রিগ, স্কাইবক্স এবং সংঘর্ষ সহ একটি গ্রাউন্ড প্লেন সহ একটি Three.js সিন তৈরি করে। Three.js অ্যাসেট বান্ডেলের জন্য সঠিক ক্যাচিং হেডার সেট করে এমন একটি vercel.json সহ আসে। pnpm dev স্থানীয়ভাবে চলে; Vercel ড্যাশবোর্ডে এক ক্লিক গিটহাব রিপোজিটরিকে সংযুক্ত করে এবং আপনার একটি লাইভ URL থাকে।

জন্য সেরা: 2D ছাড়া যেকোনো জেনার। আপনি এখনও জানেন না কি তৈরি করছেন যদি এটি ব্যবহার করুন।

2. ফার্স্ট-পার্সন Vercel ওয়াকার

একটি পালিশ করা ফার্স্ট-পার্সন কন্ট্রোলার (WASD + মাউস পয়েন্টার লক + গ্রাভিটি + স্প্রিন্ট + জাম্প) ফুটস্টেপ হুক, হেড-রব, এবং একটি vercel.json যা পয়েন্টার-লক সিএসপি হেডার সঠিকভাবে পরিচালনা করে। এটি অনেক সলো ডেভেলপারকে প্রোডাকশনে আটকে দেয়। দক্ষতা এটি আপনার জন্য সমাধান করে।

জন্য সেরা: ওয়াকিং সিম, হরর প্রোটোটাইপ, ন্যারেটিভ গেমস, জাদুঘর প্রদর্শনী।

3. ব্রাউজার এরিনা শুটার কিট

একটি টপ-ডাউন এরিনা (টুইন-স্টিক কন্ট্রোলার, ওয়েভ স্পনার, বেসিক এনিমি এআই, প্রজেক্টাইল সিস্টেম, স্কোর HUD) Vercel-টিউনড বিল্ড সহ যা অ্যাসেট জিপ করে, এআই কোড-স্প্লিট করে এবং মিউজিক লেজি-লোড করে। মাল্টিপ্লেয়ার হুক অন্তর্ভুক্ত; সপ্তাহান্ত সিঙ্গেল-প্লেয়ার প্রকাশ করে।

জন্য সেরা: আর্কেড শুটার, বুলেট হেল, জ্যাম এন্ট্রি যা মোবাইলে দ্রুত লোড হতে হবে।

4. Vercel পাজল প্ল্যাটফর্মার

একটি থার্ড-পার্সন প্ল্যাটফর্মার (পরিবর্তনশীল জাম্প, কোয়োট টাইম, লেজ ডিটেকশন), চেকপয়েন্ট, তিনটি স্টাব স্তর যা আপনি ব্লেন্ডারে বা কোডে সম্পাদনা করতে পারেন, এবং একটি রিলুক লুপ। vercel.json ইনস্ট্যান্ট এজ-ক্যাশড লেভেল রিলোডের জন্য কনফিগার করা হয়েছে, তাই ফোনে প্লেটেস্টিং দ্রুত মনে হয়।

জন্য সেরা: পাজল প্ল্যাটফর্মার, পার্কুর প্রোটোটাইপ, লেভেল-ডিজাইন পরীক্ষা।

5. Vercel ড্রাইভিং স্যান্ডবক্স

আর্কেড ড্রাইভিং অনুভূতি (ত্বরণ বক্ররেখা, ড্রিফট ফিজিক্স, ক্যামেরা ল্যাগ, বেসিক ট্যারেন) লো-পলি গাড়ি, একটি ট্র্যাক টেমপ্লেট, এবং বড় ট্যারেন মেশের জন্য টিউন করা একটি ডিপ্লয় সহ। প্রিসেট HTTP হেডার ওয়েবজিএল কনটেক্সট সাফারি-তে দ্রুত শুরু করে, যা ঐতিহাসিকভাবে Three.js-এর জন্য সবচেয়ে ধীর ব্রাউজার।

জন্য সেরা: আর্কেড রেসিং, অফ-রোড ড্রাইভিং, একটি পোর্টফোলিওর জন্য কার-ফীল ডেমো।

Vibe Skills-এ সমস্ত 3D গেম দক্ষতা ব্রাউজ করুন →

শুক্রবার থেকে রবিবার ধাপে ধাপে

এটি সঠিক সময়সূচী। শুরুর সময় সামঞ্জস্য করুন, কিন্তু ক্রম বজায় রাখুন। মূল মাইলফলক হলো শুক্রবার রাতের Vercel ডিপ্লয়। এর পরে সবকিছুই ইটারেশন।

শুক্রবার 6pm - 8pm: দক্ষতা নির্বাচন করুন, গিটহাবে পুশ করুন, Vercel সংযোগ করুন

ধাপ 1: Vibe Skills-এ একটি 3D গেম দক্ষতা নির্বাচন করুন। 3D গেমস ক্যাটাগরি ব্রাউজ করুন, আপনার জেনারের সাথে মেলে এমন একটি নির্বাচন করুন, এবং একটি নতুন ফোল্ডারে স্টার্টার ইনস্টল করুন। 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: একটি লাইটহাউস পাস চালান। মোবাইলে 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 ব্যবহার করুন, localhost নয়। GIF হলো যা Twitter, Bluesky, এবং Reddit-এ ক্লিক করা হয়।

ধাপ 17: একটি itch.io পৃষ্ঠা তৈরি করুন (ঐচ্ছিক তবে উচ্চ-লিভারেজ)। শিরোনাম, এক-লাইন ট্যাগলাইন, তিনটি স্ক্রিনশট, GIF, নিয়ন্ত্রণ, ক্রেডিট, এবং আপনার *.vercel.app iframe-এর একটি এমবেড (itch.io HTML5 গেমের জন্য iframe এমবেড সমর্থন করে)। এখন আপনার দুটি URL আছে - একটি নৈমিত্তিক শেয়ারিংয়ের জন্য এবং একটি গেমার দর্শকদের জন্য।

ধাপ 18: লিঙ্ক পোস্ট করুন। Twitter, Bluesky, আপনার ডেভ কমিউনিটি ডিসকর্ড, r/IndieDev, r/threejs, r/WebGames। সর্বদা GIF দিয়ে শুরু করুন। সর্বদা URL অন্তর্ভুক্ত করুন। যদি আপনি একটি Vibe Skills দক্ষতা ব্যবহার করে থাকেন, তবে এটি ডেভলগ পোস্টে উল্লেখ করুন - সাথে পড়া অন্য ডেভেলপাররা একই স্টার্টার চাইবে।

Vercel ডিপ্লয়-এর তিনটি সাধারণ ব্যর্থতা এড়ানোর উপায়

প্রায় প্রতিটি সলো Three.js + Vercel সপ্তাহান্ত তিনটি জিনিস দ্বারা ভেঙে যায়। যদি আপনি এগুলি শুক্রবার সন্ধ্যায় ধরতে পারেন তবে সমস্ত তিনটি 5-মিনিটের ফিক্স, এবং রবিবার 7pm-এ আবিষ্কার করলে 5-ঘন্টার খরগোশের গর্ত।

• ভুল বিল্ড আউটপুট ডিরেক্টরি। 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 জানা দরকার?

Cursor যা লেখে তা পড়তে এবং মান টিউন করতে আপনার যথেষ্ট জাভাস্ক্রিপ্ট জানা দরকার। আপনাকে স্ক্র্যাচ থেকে Three.js লেখার দরকার নেই। Vibe Skills-এর দক্ষতাগুলি ইঞ্জিন সেটআপ, ক্যামেরা, কন্ট্রোলার এবং বিল্ড কনফিগ তৈরি করে। Cursor আপনার বর্ণনা থেকে গেমপ্লে কোড পরিচালনা করে।

রবিবার 7pm-এ আমার Vercel বিল্ড ব্যর্থ হলে কি হবে?

সবচেয়ে সাধারণ কারণ হল একটি TypeScript ত্রুটি বা একটি অনুপস্থিত env var। Vercel বিল্ড লগ দেখায় যেখানে ব্যর্থ লাইন হাইলাইট করা হয়েছে। ড্যাশবোর্ডে একটি ক্লিক শেষ কার্যকরী ডিপ্লয়ে রোল ব্যাক করে এবং এটিকে প্রোডাকশনে প্রচার করে। কারণ প্রতিটি পুশ একটি প্রিভিউ ডিপ্লয়, আপনি কোনও কার্যকরী বিল্ড থেকে এক কমিটের বেশি দূরে নন। এই কারণেই শনি ও রবিবার প্রতি 30 মিনিটে পুশ করা গুরুত্বপূর্ণ।

আমি কি Vibe Skills 3D গেম দক্ষতা থেকে কোড বিক্রি বা পরিবর্তন করতে পারি?

হ্যাঁ। Vibe Skills-এর দক্ষতাগুলি একটি বাণিজ্যিক-বান্ধব লাইসেন্স সহ আসে যা আপনাকে আপনার নিজের গেমে Vercel, itch.io, Steam, বা অন্য কোথাও কোড প্রকাশ করতে দেয়। নির্মাতারা দক্ষতার IP ধারণ করেন, আপনি তার উপরে নির্মিত গেমের IP ধারণ করেন।

যদি আমি Cursor ব্যবহার করতে না চাই?

প্রকল্প ফাইল সম্পাদনা করতে পারে এমন যেকোনো এআই সম্পাদক কাজ করে। 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 পান।