আমি জাভাস্ক্রিপ্ট দিয়ে গেমপ্যাড সাপোর্ট তৈরি করেছি
একটি ব্রাউজার গেমের জন্য কন্ট্রোলার ইনপুট রিভার্স-ইঞ্জিনিয়ারিং করতে আমি একটি পুরো সপ্তাহান্ত ব্যয় করেছি। রাত ২টায় আমি একটি খালি অ্যারের দিকে তাকিয়ে বসে ছিলাম। কিছুই দেখা যাচ্ছিল না।
সেই অভিজ্ঞতাটি আমাকে যেকোনো টিউটোরিয়ালের চেয়ে ব্রাউজার API এবং হার্ডওয়্যার পোলিং সম্পর্কে অনেক বেশি কিছু শিখিয়েছে।
ওয়েব গেমিং ক্রমশ বৃদ্ধি পাচ্ছে। WebGL এবং WebGPU-এর মাধ্যমে ব্রাউজার গেমগুলো এখন উচ্চমানের পর্যায়ে পৌঁছেছে। খেলোয়াড়রা আশা করেন যে তারা একটি Xbox বা PS5 কন্ট্রোলার প্লাগ-ইন করলেই সেটি সাথে সাথে কাজ করবে।
আপনি যদি গেম, অ্যাক্সেসিবিলিটি টুলস বা কাস্টম ড্যাশবোর্ড তৈরি করেন, তবে আপনার HTML5 Gamepad API প্রয়োজন হবে। এটি Chrome, Firefox এবং Edge-এ কাজ করে। এর জন্য কোনো লাইব্রেরির প্রয়োজন হয় না।
আমি যা শিখেছি তা এখানে দেওয়া হলো:
- কানেকশনের জন্য API-টি ইভেন্ট-চালিত (event-driven), কিন্তু ইনপুটের জন্য এটি পোলিং-ভিত্তিক (polling-based)।
- ইনপুট ক্রমাগত পড়ার জন্য আপনাকে অবশ্যই
requestAnimationFrameব্যবহার করতে হবে। - ব্যবহারকারী কোনো বাটন না চাপা পর্যন্ত ব্রাউজার কোনো কন্ট্রোলার দেখাবে না। হার্ডওয়্যার ফিঙ্গারপ্রিন্টিং রোধ করার জন্য এটি একটি গোপনীয়তা বৈশিষ্ট্য (privacy feature)।
ডেটা ম্যানেজ করা:
- একটি "standard" লেআউট পরীক্ষা করতে
gamepad.mappingব্যবহার করুন। স্ট্যান্ডার্ড ম্যাপিং নিশ্চিত করে যে বাটন 0 সবসময় নিচের ফেস বাটনটি হবে। - Vendor এবং Product ID-র জন্য
gamepad.idপরীক্ষা করুন। এটি আপনাকে Sony DualSense-এর মতো নির্দিষ্ট হার্ডওয়্যার শনাক্ত করতে সাহায্য করে। - সবসময় একটি deadzone ফিল্টার ইমপ্লিমেন্ট করুন। অ্যানালগ স্টিকগুলো কখনোই নিখুঁতভাবে কেন্দ্রে থাকে না। deadzone না থাকলে আপনার ক্যারেক্টার বা ক্যামেরা অনবরত একদিকে সরে যেতে থাকবে (drift)।
deadzone হ্যান্ডেল করার একটি সহজ উপায়:
যদি Math.abs(axis) > 0.1 হয়, তবে সেই ভ্যালু ব্যবহার করুন।
হ্যাপটিক ফিডব্যাক (Haptic feedback):
র্যাম্বল (rumble) ট্রিগার করতে আপনি gamepad.vibrationActuator.playEffect ব্যবহার করতে পারেন। এটি Chrome এবং Edge-এ ভালো কাজ করে। Firefox-এ আংশিক সাপোর্ট রয়েছে। Safari এটি সাপোর্ট করে না।
আপনার প্রজেক্টের জন্য মূল বিষয়গুলো:
gamepadconnectedএবংgamepaddisconnectedইভেন্টগুলোর জন্য লিসেন করুন।- একটি "press" এবং একটি "hold"-এর মধ্যে পার্থক্য শনাক্ত করতে পূর্ববর্তী বাটন স্টেটগুলো ট্র্যাক করুন।
- স্টিকের সামান্য নড়াচড়া উপেক্ষা করতে একটি deadzone থ্রেশহোল্ড ব্যবহার করুন।
- একাধিক ব্রাউজারে পরীক্ষা করুন।
- মনে রাখবেন যে
navigator.getGamepads()একটি স্ন্যাপশট রিটার্ন করে। নতুন ডেটা পেতে আপনাকে অবশ্যই আপনার লুপের ভেতরে এটি কল করতে হবে।
কোড লেখার আগে আপনি যদি আপনার হার্ডওয়্যার পরীক্ষা করতে চান, তবে GamepadTester.pro ব্যবহার করুন। এটি আপনাকে রিয়েল টাইমে র (raw) API ডেটা এবং axis ভ্যালু দেখাবে।