నేను JavaScriptతో Gamepad సపోర్ట్ను రూపొందించాను
ఒక బ్రౌజర్ గేమ్ కోసం కంట్రోలర్ ఇన్పుట్ను రివర్స్-ఇంజనీరింగ్ చేయడానికి నేను ఒక వారాంతాన్ని వెచ్చించాను. తెల్లవారుజామున 2 గంటల సమయంలో ఖాళీ అర్రే (array) వైపు చూస్తూ కూర్చున్నాను. ఏదీ కనిపించడం లేదు.
ఏ ట్యుటోరియల్ కంటే కూడా ఆ అనుభవం నాకు బ్రౌజర్ APIs మరియు హార్డ్వేర్ పోలింగ్ (hardware polling) గురించి ఎక్కువ నేర్పింది.
వెబ్ గేమింగ్ వృద్ధి చెందుతోంది. WebGL మరియు WebGPUతో, బ్రౌజర్ గేమ్లు ఇప్పుడు అధిక నాణ్యత స్థాయిలను చేరుకుంటున్నాయి. ప్లేయర్లు Xbox లేదా PS5 కంట్రోలర్ను ప్లగ్ చేసి, అది వెంటనే పనిచేయాలని ఆశిస్తారు.
మీరు గేమ్లు, యాక్సెసిబిలిటీ టూల్స్ లేదా కస్టమ్ డ్యాష్బోర్డ్లను నిర్మిస్తుంటే, మీకు HTML5 Gamepad API అవసరం. ఇది Chrome, Firefox మరియు Edgeలో పనిచేస్తుంది. దీనికి ఎటువంటి లైబ్రరీల అవసరం లేదు.
నేను నేర్చుకున్న విషయాలు ఇక్కడ ఉన్నాయి:
- కనెక్షన్ల కోసం ఈ API ఈవెంట్-డ్రివెన్ (event-driven), కానీ ఇన్పుట్ కోసం పోలింగ్-బేస్డ్ (polling-based).
- ఇన్పుట్ను నిరంతరంగా చదవడానికి మీరు తప్పనిసరిగా
requestAnimationFrameఉపయోగించాలి. - వినియోగదారు బటన్ను నొక్కే వరకు బ్రౌజర్లు కంట్రోలర్ను చూపించవు. హార్డ్వేర్ ఫింగర్ప్రింటింగ్ను నిరోధించడానికి ఇది ఒక ప్రైవసీ ఫీచర్.
డేటాను నిర్వహించడం:
- "standard" లేఅవుట్ కోసం
gamepad.mappingఉపయోగించండి. స్టాండర్డ్ మ్యాపింగ్ వల్ల బటన్ 0 ఎల్లప్పుడూ దిగువ ఫేస్ బటన్గా ఉండేలా చూస్తుంది. - Vendor మరియు Product IDల కోసం
gamepad.idని తనిఖీ చేయండి. ఇది Sony DualSense వంటి నిర్దిష్ట హార్డ్వేర్ను గుర్తించడంలో మీకు సహాయపడుతుంది. - ఎల్లప్పుడూ డెడ్జోన్ (deadzone) ఫిల్టర్ను అమలు చేయండి. అనలాగ్ స్టిక్లు ఎప్పుడూ ఖచ్చితంగా మధ్యలో ఉండవు. డెడ్జోన్ లేకపోతే, మీ క్యారెక్టర్ లేదా కెమెరా నిరంతరం కదులుతూ (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()ఒక స్నాప్షాట్ను తిరిగి ఇస్తుందని గుర్తుంచుకోండి. తాజా డేటాను పొందడానికి మీరు దానిని మీ లూప్ (loop) లోపల పిలవాలి.
మీరు కోడ్ రాయడానికి ముందు మీ హార్డ్వేర్ను పరీక్షించాలనుకుంటే, GamepadTester.pro ఉపయోగించండి. ఇది మీకు రియల్ టైమ్లో రా డేటా (raw API data) మరియు యాక్సిస్ విలువలను చూపిస్తుంది.