২০২৬ সালে গেম UI এবং HUD ডিজাইনের জন্য সেরা AI দক্ষতা

Vibe Skills

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

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

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

গেম UI হলো ইন্ডি ডেভলপমেন্টের সবচেয়ে কঠিন অংশ (এবং এই নিয়ে কেউ কথা বলে না)

বেশিরভাগ ইন্ডি ডেভ দুই সপ্তাহের মধ্যে একটি কার্যকর গেম প্রোটোটাইপ তৈরি করে। এরপর তারা তিন মাস UI নিয়ে আটকে থাকে। প্রোগ্রামার আর্টের মতো দেখতে বাটন। ক্যামেরা-বিরোধী HUD ওভারলে। position: absolute এবং প্রার্থনার ওপর ভিত্তি করে তৈরি ইনভেন্টরি গ্রিড। Vibe Skills-এর গেম UI-এর জন্য এআই দক্ষতা একবারে সমন্বিত মেনু সিস্টেম, HUD এবং ব্রাউজার গেমের জন্য ওভারলে তৈরি করে - যাতে আপনি গেমটি ডেলিভার করতে পারেন, সেটিংস স্ক্রিন নয়।

এই গাইডটি আলোচনা করবে কেন UI গেমের স্থায়িত্ব নির্ধারণ করে, প্রতিটি গেমের জন্য প্রয়োজনীয় ছয়টি UI সারফেস, Vibe Skills-এ উপলব্ধ এআই গেম UI দক্ষতা এবং একটি সম্পূর্ণ UI কিট ডেলিভার করার জন্য একটি উইকেন্ড ওয়ার্কফ্লো।

Vibe Skills

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

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

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

কেন গেম UI স্থায়িত্ব নির্ধারণ করে

খেলোয়াড়রা প্রথম ৯০ সেকেন্ডে আপনার গেম বিচার করে, এবং সেই সেকেন্ডগুলোর বেশিরভাগই UI-এর মধ্যে কাটে। প্রধান মেনু, সেটিংস, কন্ট্রোল ইঙ্গিত, গেম শুরু হওয়ার সময় তারা প্রথম যে HUD দেখে। যদি UI অগোছালো মনে হয়, তবে গেমপ্লে সুযোগ পায় না।

মনে রাখার মতো কিছু সংখ্যা:

• ৩৮% খেলোয়াড় একটি ব্রাউজার গেম ছেড়ে দেয় প্রথম সেশনে যদি প্রধান মেনু ভাঙা বা স্টাইলবিহীন মনে হয় (itch.io প্লেটেস্ট ডেটা, ২০২৫)।
• হলো নাইট-এর প্রধান মেনু হলো ৪টি বাটন, হাতে আঁকা এবং ৬০fps-এ চলে - এবং এটি খেলোয়াড়দের প্রথম ৩০ মিনিটের কঠিন লড়াই সহ্য করার অন্যতম প্রধান কারণ।
• সেলেস্ট-এর পজ স্ক্রিনে ৩টি ফন্ট সাইজ এবং ২টি রঙ ব্যবহার করা হয়েছে। এটাই সম্পূর্ণ UI সিস্টেম। সংযম মানেই গুণমান।
• বড় বাজেটের গেমগুলো তাদের পুরো উৎপাদন বাজেটের ১৫-২০% UI/UX-এর জন্য ব্যয় করে। ইন্ডি ডেভলপাররা সাধারণত ০% ব্যয় করে।

ঠিক এই ব্যবধান পূরণের জন্যই এআই দক্ষতা তৈরি করা হয়েছে।

Vibe Skills

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

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

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

প্রতিটি গেমের জন্য প্রয়োজনীয় ছয়টি UI সারফেস

কিছু তৈরি করার আগে, আপনি কী তৈরি করছেন তা জানুন। প্রতিটি ব্রাউজার গেম - 2D প্ল্যাটফর্মার, 3D শুটার, আইডল ক্লিকার, ওয়াকিং সিম - একই ছয়টি UI সারফেসের প্রয়োজন। একটি ভালো এআই দক্ষতা সেগুলোকে একটি সমন্বিত স্টাইল সিস্টেমে সরবরাহ করে।

৬টি পালিশ করা UI সারফেস সহ একটি গেম সম্পূর্ণ মনে হয়। ৬টি স্টাইলবিহীন UI সারফেস সহ একটি গেম স্কুল প্রজেক্টের মতো মনে হয়, গেমপ্লে যত ভালোই হোক না কেন।

সবচেয়ে কঠিন অংশ হলো ৬টিকেই সমন্বিত রাখা - একই ফন্ট পরিবার, একই বাটনের ব্যাসার্ধ, একই হোভার আচরণ, একই রঙের প্যালেট। এখানেই এআই দক্ষতা তাদের মূল্য প্রমাণ করে।

Vibe Skills-এ ৫টি এআই গেম UI দক্ষতা

Vibe Skills-এর 3D গেমস বিভাগ এ ৩০টির বেশি দক্ষতা রয়েছে যা সম্পূর্ণ গেমযোগ্য গেম এবং তাদের চারপাশের UI সিস্টেমগুলো কভার করে। এখানে সবচেয়ে বেশি ইনস্টল করা পাঁচটি UI-কেন্দ্রিক দক্ষতা রয়েছে।

সমস্ত ৫টি দক্ষতা একটি শেয়ার্ড ডিজাইন টোকেন ফাইল (রঙ, ফন্ট, স্পেসিং, ইজিং) সহ আসে যাতে সারফেসগুলো একই ডিজাইনারের তৈরি মনে হয়। বেশিরভাগ ইন্ডি UI কিট এই পরীক্ষায় ব্যর্থ হয় - মেনু একটি ফন্ট ব্যবহার করে, HUD অন্যটি ব্যবহার করে, এবং খেলোয়াড়রা এটি অবিলম্বে লক্ষ্য করে।

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

উইকেন্ডে একটি সম্পূর্ণ গেম UI কিট তৈরি করুন

itch.io এবং Newgrounds-এ ব্রাউজার গেম তৈরি করা ইন্ডি ডেভলপাররা যে ওয়ার্কফ্লো ব্যবহার করে তা এখানে দেওয়া হলো। মোট সময়: উইকেন্ডে প্রায় ১২ কর্মঘণ্টা।

ধাপ ১: Vibe Skills-এ একটি UI দক্ষতা নির্বাচন করুন

3D গেমস ক্যাটাগরি খুলুন এবং ব্রাউজার গেম UI কিট জেনারেটর দক্ষতা ইনস্টল করুন। এটিই একমাত্র যা একটি সমন্বিত টোকেন সিস্টেমে সমস্ত ৬টি সারফেস সরবরাহ করে। যদি আপনার গেমে ইতিমধ্যে কার্যকর মেনু থাকে এবং আপনার কেবল একটি HUD প্রয়োজন হয়, তবে পরিবর্তে স্ট্যান্ডঅ্যালোন HUD ওভারলে দক্ষতা ইনস্টল করুন।

ধাপ ২: আপনার গেমের "ভাইব" ৩টি শব্দে সংজ্ঞায়িত করুন

কিছু তৈরি করার আগে, আপনার গেমের সুর বর্ণনা করে এমন ৩টি শব্দ লিখুন। উদাহরণ: "নিওন, ব্রুটাল, দ্রুত" (একটি সিন্থওয়েভ শুটার), "নরম, জলীয়, ধীর" (একটি মাছ ধরার খেলা), "চunky, রেট্রো, পিক্সেল" (একটি মেট্রোইডভ্যানিয়া)। দক্ষতা এই শব্দগুলো রঙের প্যালেট, টাইপোগ্রাফি পছন্দ এবং অ্যানিমেশন ইজিং-এর জন্য ইনপুট হিসাবে ব্যবহার করে। এটি বাদ দেবেন না - জেনেরিক ইনপুট জেনেরিক UI তৈরি করে।

ধাপ ৩: প্রথমে ডিজাইন টোকেনগুলো তৈরি করুন

দক্ষতা আপনার প্যালেট, ফন্ট স্ট্যাক, বাটন ব্যাসার্ধ, স্পেসিং স্কেল এবং অ্যানিমেশন টাইমিং সহ একটি tokens.css ফাইল বা একটি টেইলউইন্ড কনফিগ আউটপুট করে। কোনও আসল UI তৈরি করার আগে এটি পর্যালোচনা করুন। যদি টোকেনগুলো এখানে ভুল মনে হয়, তবে প্রতিটি সারফেস ভুল মনে হবে। এটি আপনার পছন্দ না হওয়া পর্যন্ত এটি সম্পাদনা করুন।

ধাপ ৪: একবারে সমস্ত ৬টি সারফেস তৈরি করুন

অনুমোদিত টোকেন দিয়ে, সম্পূর্ণ ৬-সারফেস জেনারেশন চালান। আউটপুট হল HTML/CSS ফাইলগুলির একটি ফোল্ডার (বা আপনার ইঞ্জিনের উপর নির্ভর করে React কম্পোনেন্ট) এবং আইকনগুলির জন্য একটি SVG স্প্রাইট শিট। Three.js বা Phaser-এর জন্য, HTML ওভারলে পদ্ধতি ব্যবহার করুন (DOM ক্যানভাসের উপরে স্ট্যাক করা হয়েছে, র্যাপারের উপর pointer-events: none সহ)। Unity WebGL বা Godot HTML5-এর জন্য, দক্ষতা সরবরাহ করা ক্যানভাস-ভিত্তিক ভ্যারিয়েন্ট ব্যবহার করুন।

ধাপ ৫: আপনার গেম লুপে এটি সংযুক্ত করুন

HUD-কে আপনার গেম স্টেটের সাথে সংযুক্ত করুন (স্বাস্থ্য মান, স্কোর, টাইমার)। বেশিরভাগ দক্ষতা একটি ছোট GameUIState অ্যাডাপ্টার অন্তর্ভুক্ত করে যা একটি setHealth(0.7) API প্রকাশ করে যাতে আপনাকে ম্যানুয়ালি CSS ভ্যারিয়েবলগুলি স্পর্শ করতে না হয়। পজ, সেটিংস এবং এন্ড-স্ক্রিন ইভেন্টগুলি আপনার বিদ্যমান ইনপুট হ্যান্ডলারের সাথে সংযুক্ত করুন।

ধাপ ৬: ৩ জন অপরিচিত ব্যক্তির সাথে প্লেটেস্ট করুন এবং সংশোধন করুন

বন্ধুরা আপনাকে বলবে UI দুর্দান্ত। অপরিচিত লোকেরা আপনাকে সত্য বলবে। itch.io-তে একটি বিল্ড পোস্ট করুন, ৩ জন র্যান্ডম ব্যক্তিকে ৫ মিনিট খেলতে বলুন এবং রেকর্ডিং দেখুন। গুরুত্বপূর্ণ UI বাগগুলো প্রথম ৬০ সেকেন্ডে দেখা যাবে। সেগুলো ঠিক করুন, প্রভাবিত সারফেসটি পুনরায় তৈরি করুন, ডেলিভার করুন।

মোট সময়: ধাপ ১-৩ (~১ ঘন্টা) + ধাপ ৪ (~৩০ মিনিট) + ধাপ ৫ (~৬-৮ ঘন্টা ইন্টিগ্রেশন) + ধাপ ৬ (~৩ ঘন্টা প্লেটেস্ট চক্র) = একটি উইকেন্ড।

একজন ফ্রিল্যান্স UI ডিজাইনার একই কাজের জন্য $৩,০০০-$৮,০০০ চার্জ করবে এবং ৪-৬ সপ্তাহ সময় নেবে। Vibe Skills-এর একটি সাবস্ক্রিপশন $৩৯/মাস থেকে শুরু হয় এবং আপনাকে সীমাহীন জেনারেশন দেয় - যাতে আপনি যতবার ইচ্ছা পুনরাবৃত্তি করতে পারেন যতক্ষণ না UI সঠিক মনে হয়।

Vibe Skills-এ একটি গেম UI দক্ষতা ইনস্টল করুন →

প্রায়শই জিজ্ঞাসিত প্রশ্নাবলী

আমার গেম UI কি HTML/CSS ওভারলে হিসাবে তৈরি করা উচিত নাকি সরাসরি ক্যানভাসে?

বেশিরভাগ ব্রাউজার গেমের জন্য, Three.js বা Phaser ক্যানভাসের উপরে একটি HTML/CSS ওভারলে তৈরি করা দ্রুততর, অ্যাক্সেসযোগ্য করা সহজ এবং যেকোনো রেজোলিউশনে টেক্সট তীক্ষ্ণভাবে রেন্ডার করে। ক্যানভাস-ভিত্তিক UI কেবল তখনই ব্যবহার করুন যখন আপনার পিক্সেল-পারফেক্ট আর্ট সামঞ্জস্যের প্রয়োজন হয় (একটি কঠোর পিক্সেল-আর্ট গেম) অথবা যখন DOM ইভেন্টগুলো ইনপুটকে বাধা দেয়। Vibe Skills-এর দক্ষতা উভয় ভ্যারিয়েন্ট সরবরাহ করে।

UI কি মোবাইলে কাজ করবে, নাকি আমার একটি পৃথক মোবাইল বিল্ডের প্রয়োজন হবে?

Vibe Skills-এর ব্রাউজার গেম UI কিট রেসপন্সিভ লেআউট তৈরি করে যা আউট-অফ-দ্য-বক্স টাচ ডিভাইসে কাজ করে - বড় ট্যাপ টার্গেট, সোয়াপ-ইন মোবাইল কন্ট্রোল ওভারলে (ডি-প্যাড এবং অ্যাকশন বাটন), এবং একটি মোবাইল-ফার্স্ট পজ মেনু। আপনার একটি পৃথক বিল্ডের প্রয়োজন নেই, তবে আপনাকে একটি আসল ফোনে পরীক্ষা করতে হবে। ব্রাউজার ডেভ টুলস টাচ পারফরম্যান্স সম্পর্কে মিথ্যা বলে।

গেম UI কতটা বাস্তবসম্মতভাবে অ্যাক্সেসযোগ্য হতে পারে?

ব্রাউজার গেমগুলো মেনু, সেটিংস এবং HUD-এর জন্য সহজেই WCAG AA অর্জন করতে পারে - কীবোর্ড নেভিগেশন, ফোকাস রিং, ৪.৫:১ কালার কনট্রাস্ট এবং স্কোর ও স্বাস্থ্যের উপর স্ক্রিন-রিডার লেবেল। HTML ওভারলে পদ্ধতি প্রায় এই সমস্ত কিছু বিনামূল্যে করে তোলে। Vibe Skills-এর দক্ষতা ডিফল্টভাবে অ্যাক্সেসযোগ্য মার্কআপ তৈরি করে। প্রকৃত গেমপ্লে অ্যাক্সেসযোগ্য করা কঠিন, তবে UI বাধা হওয়া উচিত নয়।

একই UI কিট কি Unity WebGL এবং Godot HTML5 বিল্ডের জন্য কাজ করে?

বেশিরভাগ ক্ষেত্রে হ্যাঁ। Unity WebGL এবং Godot HTML5 উভয়ই একটি ক্যানভাসে রেন্ডার করে, এবং আপনি উপরে একটি DOM ওভারলে স্ট্যাক করতে পারেন। দক্ষতা উভয় ইঞ্জিনের জন্য অ্যাডাপ্টার অন্তর্ভুক্ত করে যাতে UI আপনার গেমের স্টেটের সাথে কথা বলে। Unity-নির্দিষ্ট বৈশিষ্ট্যগুলির (যেমন বিল্ট-ইন ইভেন্ট সিস্টেম) জন্য একটি পাতলা ব্রিজ প্রয়োজন - দক্ষতা সেই ব্রিজের জন্য স্যাম্পল কোড সরবরাহ করে।

আমি কিভাবে মেনু, HUD এবং ইনভেন্টরিকে দৃশ্যমানভাবে সামঞ্জস্যপূর্ণ রাখব?

ইন্ডি গেম UI অপেশাদার দেখানোর এটিই #১ কারণ - ৬টি সারফেস বিচ্ছিন্নভাবে ডিজাইন করা হয়েছে। সমাধান হল শেয়ার্ড ডিজাইন টোকেন: একটি ফাইল যা রঙ, ফন্ট, স্পেসিং এবং ইজিং সংজ্ঞায়িত করে। প্রতিটি সারফেস এই ফাইল থেকে ইম্পোর্ট করে। Vibe Skills-এর দক্ষতা স্বয়ংক্রিয়ভাবে এটি করে - টোকেন একবার তৈরি করুন, সেই টোকেনগুলি থেকে সমস্ত ৬টি সারফেস তৈরি করুন, সম্পন্ন।

আমি কি দক্ষতার ক্ষতি না করে জেনারেট করা UI কাস্টমাইজ করতে পারি?

হ্যাঁ। দক্ষতা সম্পাদনাযোগ্য HTML, CSS এবং (ঐচ্ছিকভাবে) React কম্পোনেন্ট আউটপুট করে। ফাইলগুলো আপনার। বেশিরভাগ ডেভ রঙগুলো পরিবর্তন করে, একটি লোগো পরিবর্তন করে, আইকন প্রতিস্থাপন করে এবং এক বা দুটি বাটনের আকার পরিবর্তন করে - এটুকুই। যদি আপনার বড় স্টাইলের পরিবর্তনের প্রয়োজন হয়, তবে সারফেসগুলো হাতে পুনরায় লেখার পরিবর্তে আপডেট করা টোকেন থেকে পুনরায় তৈরি করুন।

যদি আমার গেমে ইতিমধ্যে একটি অর্ধেক-তৈরি UI থাকে - আমার কি এটি ফেলে দেওয়া উচিত?

না। HUD ওভারলে দক্ষতা বা পজ + সেটিংস প্যাক স্ট্যান্ডঅ্যালোন ইনস্টল করুন এবং একবারে একটি সারফেস প্রতিস্থাপন করুন। বেশিরভাগ ইন্ডি ডেভ প্রথমে প্রধান মেনু আপগ্রেড করে (সর্বোচ্চ দৃশ্যমানতা), তারপর HUD (সবচেয়ে বেশি ব্যবহৃত), তারপর সেটিংস এবং পজ (সবচেয়ে কম ব্যবহৃত কিন্তু সবচেয়ে ভাঙা)। প্রথম সারফেসটি ডেলিভার করার পরে আপনি কোয়ালিটির লাফ অনুভব করবেন।

UI ডেলিভার করুন, তারপর গেম ডেলিভার করুন

গেম UI ইন্ডি প্রজেক্টগুলির নীরব হত্যাকারী। গেমপ্লে উজ্জ্বল হতে পারে, কিন্তু মেনুটি যদি ডিফল্ট ওয়ার্ডপ্রেস থিমের মতো দেখায়, খেলোয়াড়রা ৯০ সেকেন্ডে বাউন্স করবে। পালিশড UI - সমন্বিত টোকেন, অ্যাঙ্কর করা HUD, পরিষ্কার সেটিংস, সন্তোষজনক শেষ স্ক্রিন - এটিই একটি ৪-ঘণ্টার itch.io ডাউনলোডকে একটি বাস্তব পণ্যের মতো অনুভব করায়।

৪-সপ্তাহের UI রিডিজাইন এড়িয়ে যান। উইকেন্ডে একটি সম্পূর্ণ ৬-সারফেস কিট তৈরি করুন, এটি সংযুক্ত করুন এবং গেমটিকে মজাদার করে তোলার দিকে ফিরে যান।

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

প্রথম থেকে গেম UI তৈরি করা বন্ধ করুন। Vibe Skills-এ একটি UI কিট দক্ষতা ইনস্টল করুন এবং একবারে মেনু, HUD, ইনভেন্টরি, সেটিংস, পজ এবং শেষ স্ক্রিন ডেলিভার করুন।