મેં 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 નો ઉપયોગ કરો. સ્ટાન્ડર્ડ મેપિંગ સુનિશ્ચિત કરે છે કે બટન 0 હંમેશા નીચેનું ફેસ બટન હોય.
  • Vendor અને Product IDs માટે gamepad.id તપાસો. આ તમને Sony DualSense જેવા ચોક્કસ હાર્ડવેરને ઓળખવામાં મદદ કરે છે.
  • હંમેશા ડેડઝોન (deadzone) ફિલ્ટર લાગુ કરો. એનાલોગ સ્ટીક્સ ક્યારેય સંપૂર્ણ રીતે સેન્ટરમાં હોતા નથી. ડેડઝોન વગર, તમારું કેરેક્ટર અથવા કેમેરા સતત ડ્રિફ્ટ (drift) થશે.

ડેડઝોન હેન્ડલ કરવાની એક સરળ રીત: જો Math.abs(axis) > 0.1, તો તે વેલ્યુનો ઉપયોગ કરો.

હેપ્ટિક ફીડબેક (Haptic feedback): તમે રમ્બલ (rumble) ટ્રિગર કરવા માટે gamepad.vibrationActuator.playEffect નો ઉપયોગ કરી શકો છો. આ Chrome અને Edge માં સારી રીતે કામ કરે છે. Firefox માં આંશિક સપોર્ટ છે. Safari તેને સપોર્ટ કરતું નથી.

તમારા પ્રોજેક્ટ માટે મુખ્ય બાબતો:

  • gamepadconnected અને gamepaddisconnected ઇવેન્ટ્સ પર ધ્યાન આપો.
  • "press" વિરુદ્ધ "hold" શોધવા માટે અગાઉની બટન સ્ટેટ્સને ટ્રેક કરો.
  • સ્ટીકની નાની હલચલને અવગણવા માટે ડેડઝોન થ્રેશોલ્ડ (deadzone threshold) નો ઉપયોગ કરો.
  • મલ્ટિપલ બ્રાઉઝર્સ પર ટેસ્ટ કરો.
  • યાદ રાખો કે navigator.getGamepads() એક સ્નેપશોટ રિટર્ન કરે છે. તાજો ડેટા મેળવવા માટે તમારે તેને તમારા લૂપની અંદર કોલ કરવો આવશ્યક છે.

જો તમે કોડ લખતા પહેલા તમારા હાર્ડવેરને ટેસ્ટ કરવા માંગતા હોવ, તો GamepadTester.pro નો ઉપયોગ કરો. તે તમને રીઅલ ટાઇમમાં રો (raw) API ડેટા અને એક્સિસ (axis) વેલ્યુ બતાવે છે.

સ્ત્રોત: https://dev.to/grezalazar23453/i-built-gamepad-support-into-my-web-app-using-pure-javascript-heres-everything-i-learned-51a5