मैंने JavaScript के साथ Gamepad सपोर्ट बनाया
मैंने एक ब्राउज़र गेम के लिए कंट्रोलर इनपुट को रिवर्स-इंजीनियर करने में पूरा वीकेंड बिता दिया। मैं रात के 2 बजे एक खाली ऐरे (array) को घूरते हुए बैठा रहा। कुछ भी दिखाई नहीं दे रहा था।
उस अनुभव ने मुझे किसी भी ट्यूटोरियल की तुलना में ब्राउज़र APIs और हार्डवेयर पोलिंग (hardware polling) के बारे में बहुत कुछ सिखाया।
वेब गेमिंग बढ़ रही है। WebGL और WebGPU के साथ, ब्राउज़र गेम्स अब उच्च गुणवत्ता के स्तर तक पहुँच रहे हैं। खिलाड़ी उम्मीद करते हैं कि वे Xbox या PS5 कंट्रोलर प्लग करें और वह तुरंत काम करने लगे।
यदि आप गेम, एक्सेसिबिलिटी टूल्स, या कस्टम डैशबोर्ड बनाते हैं, तो आपको HTML5 Gamepad API की आवश्यकता होगी। यह Chrome, Firefox और Edge में काम करता है। इसके लिए किसी लाइब्रेरी की आवश्यकता नहीं है।
यहाँ मैंने जो सीखा वह यहाँ है:
- API कनेक्शन के लिए event-driven है लेकिन इनपुट के लिए polling-based है।
- इनपुट को लगातार पढ़ने के लिए आपको
requestAnimationFrameका उपयोग करना चाहिए। - ब्राउज़र तब तक कंट्रोलर नहीं दिखाएंगे जब तक उपयोगकर्ता कोई बटन न दबा दे। यह हार्डवेयर फिंगरप्रिंटिंग (hardware fingerprinting) को रोकने के लिए एक प्राइवेसी फीचर है।
डेटा को मैनेज करना:
- "standard" लेआउट की जाँच करने के लिए
gamepad.mappingका उपयोग करें। Standard mapping यह सुनिश्चित करती है कि button 0 हमेशा नीचे वाला फेस बटन हो। - Vendor और Product IDs के लिए
gamepad.idकी जाँच करें। यह आपको Sony DualSense जैसे विशिष्ट हार्डवेयर की पहचान करने में मदद करता है। - हमेशा एक deadzone फ़िल्टर लागू करें। एनालॉग स्टिक कभी भी पूरी तरह से केंद्र में नहीं होती हैं। Deadzone के बिना, आपका कैरेक्टर या कैमरा लगातार ड्रिफ्ट (drift) करेगा।
Deadzones को संभालने का एक सरल तरीका:
यदि Math.abs(axis) > 0.1 है, तो उस वैल्यू का उपयोग करें।
हैप्टिक फीडबैक (Haptic feedback):
आप रंबल (rumble) ट्रिगर करने के लिए gamepad.vibrationActuator.playEffect का उपयोग कर सकते हैं। यह Chrome और Edge में अच्छी तरह काम करता है। Firefox में आंशिक (partial) सपोर्ट है। Safari इसे सपोर्ट नहीं करता है।
आपके प्रोजेक्ट के लिए मुख्य बातें:
gamepadconnectedऔरgamepaddisconnectedइवेंट्स को सुनें।- "press" बनाम "hold" का पता लगाने के लिए पिछले बटन स्टेट्स को ट्रैक करें।
- स्टिक की छोटी हलचलों को नज़रअंदाज़ करने के लिए deadzone थ्रेशोल्ड का उपयोग करें।
- कई ब्राउज़रों पर टेस्ट करें।
- याद रखें कि
navigator.getGamepads()एक स्नैपशॉट लौटाता है। ताज़ा डेटा प्राप्त करने के लिए आपको इसे अपने लूप के अंदर कॉल करना होगा।
यदि आप कोड लिखने से पहले अपने हार्डवेयर का परीक्षण करना चाहते हैं, तो GamepadTester.pro का उपयोग करें। यह आपको रीयल-टाइम में रॉ API डेटा और एक्सिस वैल्यू दिखाता है।