ഞാൻ ജാവസ്ക്രിപ്റ്റ് ഉപയോഗിച്ച് ഗെയിംപാഡ് സപ്പോർട്ട് നിർമ്മിച്ചു

ഒരു ബ്രൗസർ ഗെയിമിനായുള്ള കൺട്രോളർ ഇൻപുട്ട് റിവേഴ്സ് എഞ്ചിനീയറിംഗ് ചെയ്യാൻ ഞാൻ ഒരു വാരാന്ത്യം ചിലവഴിച്ചു. പുലർച്ചെ 2 മണിക്ക് ഒരു ശൂന്യമായ അറേയിലേക്ക് (empty array) നോക്കി ഞാൻ ഇരുന്നു. ഒന്നും കാണാൻ സാധിച്ചില്ല.

ഏതൊരു ട്യൂട്ടോറിയലിനേക്കാളും കൂടുതൽ ബ്രൗസർ APIകളെക്കുറിച്ചും ഹാർഡ്‌വെയർ പോളിംഗിനെക്കുറിച്ചും (hardware polling) ആ അനുഭവം എന്നെ പഠിപ്പിച്ചു.

വെബ് ഗെയിമിംഗ് വളർന്നുകൊണ്ടിരിക്കുകയാണ്. WebGL, WebGPU എന്നിവയിലൂടെ ബ്രൗസർ ഗെയിമുകൾ ഇപ്പോൾ ഉയർന്ന നിലവാരത്തിലേക്ക് എത്തിയിരിക്കുന്നു. ഒരു Xbox അല്ലെങ്കിൽ PS5 കൺട്രോളർ പ്ലഗ് ഇൻ ചെയ്താൽ അത് ഉടൻ തന്നെ പ്രവർത്തിക്കുമെന്ന് കളിക്കാർ പ്രതീക്ഷിക്കുന്നു.

നിങ്ങൾ ഗെയിമുകളോ, ആക്സസിബിലിറ്റി ടൂളുകളോ, കസ്റ്റം ഡാഷ്‌ബോർഡുകളോ നിർമ്മിക്കുന്നുണ്ടെങ്കിൽ, നിങ്ങൾക്ക് HTML5 Gamepad API ആവശ്യമാണ്. ഇത് Chrome, Firefox, Edge എന്നിവയിൽ പ്രവർത്തിക്കുന്നു. ഇതിന് പ്രത്യേക ലൈബ്രറികളുടെ ആവശ്യമില്ല.

ഞാൻ പഠിച്ച കാര്യങ്ങൾ ഇതാ:

  • കണക്ഷനുകൾക്കായി API ഇവന്റ് ഡ്രൈവൻ (event-driven) ആണ്, എന്നാൽ ഇൻപുട്ടിനായി പോളിംഗ് അടിസ്ഥാനമാക്കിയുള്ളതാണ് (polling-based).
  • ഇൻപുട്ട് തുടർച്ചയായി വായിക്കാൻ നിങ്ങൾ requestAnimationFrame ഉപയോഗിക്കണം.
  • ഉപയോക്താവ് ഒരു ബട്ടൺ അമർത്തുന്നത് വരെ ബ്രൗസറുകൾ കൺട്രോളർ കാണിക്കില്ല. ഹാർഡ്‌വെയർ ഫിംഗർപ്രിന്റിംഗ് (hardware fingerprinting) തടയുന്നതിനുള്ള ഒരു സ്വകാര്യതാ ഫീച്ചറാണിത്.

ഡാറ്റ കൈകാര്യം ചെയ്യുമ്പോൾ:

  • ഒരു "standard" ലേഔട്ട് പരിശോധിക്കാൻ gamepad.mapping ഉപയോഗിക്കുക. സ്റ്റാൻഡേർഡ് മാപ്പിംഗ് വഴി ബട്ടൺ 0 എപ്പോഴും താഴെയുള്ള ഫേസ് ബട്ടൺ ആണെന്ന് ഉറപ്പാക്കാം.
  • Vendor, Product ID-കൾക്കായി gamepad.id പരിശോധിക്കുക. Sony DualSense പോലുള്ള പ്രത്യേക ഹാർഡ്‌വെയറുകൾ തിരിച്ചറിയാൻ ഇത് സഹായിക്കുന്നു.
  • എപ്പോഴും ഒരു ഡെഡ്സോൺ ഫിൽട്ടർ (deadzone filter) നടപ്പിലാക്കുക. അനലോഗ് സ്റ്റിക്ക് ഒരിക്കലും കൃത്യമായി മധ്യഭാഗത്ത് ആയിരിക്കില്ല. ഒരു ഡെഡ്സോൺ ഇല്ലെങ്കിൽ, നിങ്ങളുടെ ക്യാരക്ടറോ ക്യാമറയോ നിരന്തരം ചലിച്ചുകൊണ്ടിരിക്കും (drift).

ഡെഡ്സോണുകൾ കൈകാര്യം ചെയ്യാനുള്ള ലളിതമായ വഴി: If Math.abs(axis) > 0.1, എങ്കിൽ ആ മൂല്യം ഉപയോഗിക്കുക.

ഹാപ്റ്റിക് ഫീഡ്‌ബാക്ക് (Haptic feedback): റംബിൾ (rumble) പ്രവർത്തനത്തിന് gamepad.vibrationActuator.playEffect ഉപയോഗിക്കാം. ഇത് Chrome, Edge എന്നിവയിൽ നന്നായി പ്രവർത്തിക്കുന്നു. Firefox-ൽ ഭാഗികമായ പിന്തുണയുണ്ട്. Safari ഇതിനെ പിന്തുണയ്ക്കുന്നില്ല.

നിങ്ങളുടെ പ്രോജക്റ്റിനായുള്ള പ്രധാന കാര്യങ്ങൾ:

  • gamepadconnected, gamepaddisconnected ഇവന്റുകൾ ശ്രദ്ധിക്കുക.
  • ഒരു ബട്ടൺ "അമർത്തുന്നത്" (press) ആണോ അതോ "പിടിച്ചിരിക്കുന്നത്" (hold) ആണോ എന്ന് തിരിച്ചറിയാൻ മുൻപത്തെ ബട്ടൺ സ്റ്റേറ്റുകൾ ട്രാക്ക് ചെയ്യുക.
  • ചെറിയ സ്റ്റിക്ക് ചലനങ്ങൾ അവഗണിക്കാനായി ഒരു ഡെഡ്സോൺ ത്രെഷോൾഡ് (deadzone threshold) ഉപയോഗിക്കുക.
  • ഒന്നിലധികം ബ്രൗസറുകളിൽ പരിശോധിക്കുക.
  • navigator.getGamepads() ഒരു സ്നാപ്പ്ഷോട്ട് (snapshot) മാത്രമാണ് നൽകുന്നതെന്ന് ഓർക്കുക. പുതിയ ഡാറ്റ ലഭിക്കുന്നതിന് നിങ്ങൾ ഇത് നിങ്ങളുടെ ലൂപ്പിനുള്ളിൽ തന്നെ വിളിക്കണം.

കോഡ് എഴുതുന്നതിന് മുമ്പ് നിങ്ങളുടെ ഹാർഡ്‌വെയർ പരിശോധിക്കണമെന്നുണ്ടെങ്കിൽ, GamepadTester.pro ഉപയോഗിക്കുക. ഇത് തത്സമയം (real time) റോ ഡാറ്റയും (raw API data) ആക്സിസ് മൂല്യങ്ങളും കാണിച്ചുതരുന്നു.

ഉറവിടം: https://dev.to/grezalazar23453/i-built-gamepad-support-into-my-web-app-using-pure-javascript-heres-everything-i-learned-51a5