நான் JavaScript மூலம் Gamepad ஆதரவை உருவாக்கினேன்
ஒரு பிரவுசர் கேமிற்கான (browser game) கன்ட்ரோலர் உள்ளீட்டை (controller input) ரிவர்ஸ்-இன்ஜினியரிங் (reverse-engineering) செய்ய ஒரு வார இறுதியில் நேரத்தைச் செலவிட்டேன். அதிகாலை 2 மணிக்கு ஒரு காலியான அரேவை (empty array) வெறித்துப் பார்த்தபடி அமர்ந்திருந்தேன். எதுவும் தெரியவில்லை.
எந்தவொரு பயிற்சியையும் விட, அந்த அனுபவம் பிரவுசர் APIs மற்றும் ஹார்டுவேர் போலிங் (hardware polling) பற்றி எனக்கு அதிகம் கற்பித்தது.
இணையதள கேமிங் (Web gaming) வளர்ந்து வருகிறது. WebGL மற்றும் WebGPU மூலம், பிரவுசர் கேம்கள் இப்போது உயர்தர நிலையை எட்டுகின்றன. வீரர்கள் ஒரு Xbox அல்லது PS5 கன்ட்ரோலரை இணைத்தவுடன் அது உடனடியாக வேலை செய்ய வேண்டும் என்று எதிர்பார்க்கிறார்கள்.
நீங்கள் கேம்கள், அணுகல்தன்மை கருவிகள் (accessibility tools) அல்லது தனிப்பயனாக்கப்பட்ட டேஷ்போர்டுகளை (custom dashboards) உருவாக்குகிறீர்கள் என்றால், உங்களுக்கு HTML5 Gamepad API தேவைப்படும். இது Chrome, Firefox மற்றும் Edge ஆகியவற்றில் வேலை செய்யும். இதற்கு எந்த லைப்ரரிகளும் (libraries) தேவையில்லை.
நான் கற்றுக்கொண்டவை இதோ:
- இணைப்புகளுக்கு (connections) இந்த API நிகழ்வு சார்ந்தும் (event-driven), உள்ளீட்டிற்கு (input) போலிங் சார்ந்தும் (polling-based) செயல்படுகிறது.
- உள்ளீட்டைத் தொடர்ச்சியாகப் படிக்க நீங்கள்
requestAnimationFrame-ஐப் பயன்படுத்த வேண்டும். - பயனர் ஒரு பொத்தானை அழுத்தும் வரை பிரவுசர்கள் கன்ட்ரோலரைக் காட்டாது. இது ஹார்டுவேர் ஃபிங்கர் பிரிண்டிங்கைத் (hardware fingerprinting) தடுக்கப் பயன்படும் ஒரு தனியுரிமை அம்சமாகும் (privacy feature).
தரவை நிர்வகித்தல்:
- "standard" லேஅவுட்டைச் சரிபார்க்க
gamepad.mapping-ஐப் பயன்படுத்தவும். Standard mapping என்பது பட்டன் 0 எப்போதும் கீழ் முகப்பு பட்டனாக (bottom face button) இருப்பதை உறுதி செய்கிறது. - Vendor மற்றும் Product IDs-களுக்காக
gamepad.id-ஐச் சரிபார்க்கவும். இது Sony DualSense போன்ற குறிப்பிட்ட ஹார்டுவேர்களை அடையாளம் காண உதவும். - எப்போதும் ஒரு deadzone filter-ஐச் செயல்படுத்தவும். அனலாக் ஸ்டிக்குகள் (Analog sticks) ஒருபோதும் சரியாக மையத்தில் இருக்காது. deadzone இல்லையென்றால், உங்கள் கதாபாத்திரம் அல்லது கேமரா தொடர்ந்து நகர்ந்து கொண்டே இருக்கும் (drift).
deadzones-களைக் கையாளுவதற்கான எளிய வழி:
Math.abs(axis) > 0.1 என்றால், அந்த மதிப்பைத் பயன்படுத்தவும்.
ஹேப்டிக் பின்னூட்டம் (Haptic feedback):
அதிர்வை (rumble) தூண்ட gamepad.vibrationActuator.playEffect-ஐப் பயன்படுத்தலாம். இது Chrome மற்றும் Edge ஆகியவற்றில் நன்றாக வேலை செய்கிறது. Firefox-ல் பகுதி அளவு ஆதரவு (partial support) உள்ளது. Safari இதை ஆதரிக்கவில்லை.
உங்கள் திட்டத்திற்கான முக்கியக் குறிப்புகள்:
gamepadconnectedமற்றும்gamepaddisconnectedநிகழ்வுகளைக் கவனிக்கவும் (Listen).- ஒரு "press" மற்றும் "hold" ஆகியவற்றைத் கண்டறிய முந்தைய பட்டன் நிலைகளைக் (button states) கண்காணிக்கவும்.
- சிறிய ஸ்டிக் நகர்வுகளைப் புறக்கணிக்க ஒரு deadzone threshold-ஐப் பயன்படுத்தவும்.
- பல பிரவுசர்களில் சோதிக்கவும்.
navigator.getGamepads()ஒரு ஸ்னாப்ஷாட்டை (snapshot) மட்டுமே வழங்கும் என்பதை நினைவில் கொள்ளுங்கள். புதிய தரவைப் பெற நீங்கள் அதை உங்கள் லூப்பிற்குள் (loop) அழைக்க வேண்டும்.
நீங்கள் குறியீட்டை (code) எழுதுவதற்கு முன் உங்கள் ஹார்டுவேரைச் சோதிக்க விரும்பினால், GamepadTester.pro-வைப் பயன்படுத்தவும். இது நிகழ்நேரத்தில் (real time) மூல API தரவு மற்றும் axis மதிப்புகளைக் காட்டும்.