ನಾನು JavaScript ಬಳಸಿ Gamepad ಬೆಂಬಲವನ್ನು ನಿರ್ಮಿಸಿದೆ
ನಾನು ಒಂದು ವಾರಾಂತ್ಯವನ್ನು ಬ್ರೌಸರ್ ಗೇಮ್ಗಾಗಿ ಕಂಟ್ರೋಲರ್ ಇನ್ಪುಟ್ ಅನ್ನು ರಿವರ್ಸ್-ಇಂಜಿನಿಯರಿಂಗ್ ಮಾಡಲು ಕಳೆದೆ. ಬೆಳಗಿನ 2 ಗಂಟೆಗೆ ಖಾಲಿ ಅರೇಯನ್ನು (empty array) ದಿಟ್ಟಿಸುತ್ತಾ ಕುಳಿತಿದ್ದೆ. ಏನೂ ಕಾಣಿಸುತ್ತಿರಲಿಲ್ಲ.
ಯಾವುದೇ ಟ್ಯುಟೋರಿಯಲ್ನಿಗಿಂತ ಆ ಅನುಭವವು ನನಗೆ ಬ್ರೌಸರ್ APIs ಮತ್ತು ಹಾರ್ಡ್ವೇರ್ ಪೋಲಿಂಗ್ (hardware polling) ಬಗ್ಗೆ ಹೆಚ್ಚು ಕಲಿಸಿತು.
ವೆಬ್ ಗೇಮಿಂಗ್ ಬೆಳೆಯುತ್ತಿದೆ. WebGL ಮತ್ತು WebGPU ನೊಂದಿಗೆ, ಬ್ರೌಸರ್ ಗೇಮ್ಗಳು ಈಗ ಉನ್ನತ ಗುಣಮಟ್ಟದ ಮಟ್ಟವನ್ನು ತಲುಪುತ್ತಿವೆ. ಆಟಗಾರರು Xbox ಅಥವಾ PS5 ಕಂಟ್ರೋಲರ್ ಅನ್ನು ಪ್ಲಗ್ ಮಾಡಿದ ತಕ್ಷಣ ಅದು ಕೆಲಸ ಮಾಡಬೇಕೆಂದು ನಿರೀಕ್ಷಿಸುತ್ತಾರೆ.
ನೀವು ಗೇಮ್ಗಳು, ಅಕ್ಸೆಸಿಬಿಲಿಟಿ ಟೂಲ್ಸ್ ಅಥವಾ ಕಸ್ಟಮ್ ಡ್ಯಾಶ್ಬೋರ್ಡ್ಗಳನ್ನು ನಿರ್ಮಿಸುವುದಾದರೆ, ನಿಮಗೆ HTML5 Gamepad API ಅಗತ್ಯವಿದೆ. ಇದು Chrome, Firefox ಮತ್ತು Edge ನಲ್ಲಿ ಕೆಲಸ ಮಾಡುತ್ತದೆ. ಇದಕ್ಕೆ ಯಾವುದೇ ಲೈಬ್ರರಿಗಳ ಅಗತ್ಯವಿಲ್ಲ.
ನಾನು ಕಲಿತ ವಿಷಯಗಳು ಇಲ್ಲಿವೆ:
- ಕನೆಕ್ಷನ್ಗಳಿಗಾಗಿ API ಇವೆಂಟ್-ಡ್ರಿವನ್ (event-driven) ಆಗಿರುತ್ತದೆ ಆದರೆ ಇನ್ಪುಟ್ಗಾಗಿ ಪೋಲಿಂಗ್-ಆಧಾರಿತ (polling-based) ಆಗಿರುತ್ತದೆ.
- ಇನ್ಪುಟ್ ಅನ್ನು ನಿರಂತರವಾಗಿ ಓದಲು ನೀವು
requestAnimationFrameಅನ್ನು ಬಳಸಲೇಬೇಕು. - ಬಳಕೆದಾರರು ಬಟನ್ ಒತ್ತುವವರೆಗೆ ಬ್ರೌಸರ್ಗಳು ಕಂಟ್ರೋಲರ್ ಅನ್ನು ತೋರಿಸುವುದಿಲ್ಲ. ಇದು ಹಾರ್ಡ್ವೇರ್ ಫಿಂಗರ್ಪ್ರಿಂಟಿಂಗ್ ಅನ್ನು ತಡೆಯಲು ಇರುವ ಒಂದು ಗೌಪ್ಯತಾ ವೈಶಿಷ್ಟ್ಯವಾಗಿದೆ (privacy feature).
ಡೇಟಾವನ್ನು ನಿರ್ವಹಿಸುವುದು:
- "standard" ಲೇಔಟ್ ಅನ್ನು ಪರಿಶೀಲಿಸಲು
gamepad.mappingಬಳಸಿ. Standard mapping ಮೂಲಕ ಬಟನ್ 0 ಯಾವಾಗಲೂ ಕೆಳಗಿನ ಫೇಸ್ ಬಟನ್ ಆಗಿರುವುದನ್ನು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಬಹುದು. - Vendor ಮತ್ತು Product IDs ಗಾಗಿ
gamepad.idಅನ್ನು ಪರಿಶೀಲಿಸಿ. ಇದು Sony DualSense ನಂತಹ ನಿರ್ದಿಷ್ಟ ಹಾರ್ಡ್ವೇರ್ ಅನ್ನು ಗುರುತಿಸಲು ನಿಮಗೆ ಸಹಾಯ ಮಾಡುತ್ತದೆ. - ಯಾವಾಗಲೂ deadzone ಫಿಲ್ಟರ್ ಅನ್ನು ಅಳವಡಿಸಿ. ಅನಲಾಗ್ ಸ್ಟಿಕ್ಗಳು ಎಂದಿಗೂ ಸಂಪೂರ್ಣವಾಗಿ ಮಧ್ಯದಲ್ಲಿ ಇರುವುದಿಲ್ಲ. Deadzone ಇಲ್ಲದಿದ್ದರೆ, ನಿಮ್ಮ ಪಾತ್ರ (character) ಅಥವಾ ಕ್ಯಾಮೆರಾ ನಿರಂತರವಾಗಿ ಚಲಿಸುತ್ತಾ (drift) ಇರುತ್ತದೆ.
Deadzones ನಿರ್ವಹಿಸಲು ಸರಳ ವಿಧಾನ:
If Math.abs(axis) > 0.1, ನಂತರ ಆ ಮೌಲ್ಯವನ್ನು ಬಳಸಿ.
Haptic feedback:
ರಂಬಲ್ (rumble) ಅನ್ನು ಟ್ರಿಗ್ಗರ್ ಮಾಡಲು ನೀವು gamepad.vibrationActuator.playEffect ಅನ್ನು ಬಳಸಬಹುದು. ಇದು Chrome ಮತ್ತು Edge ನಲ್ಲಿ ಚೆನ್ನಾಗಿ ಕೆಲಸ ಮಾಡುತ್ತದೆ. Firefox ನಲ್ಲಿ ಭಾಗಶಃ ಬೆಂಬಲವಿದೆ. Safari ಇದನ್ನು ಬೆಂಬಲಿಸುವುದಿಲ್ಲ.
ನಿಮ್ಮ ಪ್ರಾಜೆಕ್ಟ್ಗಾಗಿ ಪ್ರಮುಖ ಅಂಶಗಳು:
gamepadconnectedಮತ್ತುgamepaddisconnectedಇವೆಂಟ್ಗಳಿಗಾಗಿ ಕಾಯಿರಿ.- "press" ಮತ್ತು "hold" ನಡುವಿನ ವ್ಯತ್ಯಾಸವನ್ನು ಪತ್ತೆಹಚ್ಚಲು ಹಿಂದಿನ ಬಟನ್ ಸ್ಥಿತಿಗಳನ್ನು (button states) ಟ್ರ್ಯಾಕ್ ಮಾಡಿ.
- ಸಣ್ಣ ಸ್ಟಿಕ್ ಚಲನೆಗಳನ್ನು ನಿರ್ಲಕ್ಷಿಸಲು deadzone threshold ಬಳಸಿ.
- ವಿವಿಧ ಬ್ರೌಸರ್ಗಳಲ್ಲಿ ಪರೀಕ್ಷಿಸಿ.
navigator.getGamepads()ಒಂದು ಸ್ನ್ಯಾಪ್ಶಾಟ್ ಅನ್ನು ನೀಡುತ್ತದೆ ಎಂಬುದನ್ನು ನೆನಪಿಡಿ. ಹೊಸ ಡೇಟಾವನ್ನು ಪಡೆಯಲು ನೀವು ಅದನ್ನು ನಿಮ್ಮ ಲೂಪ್ನೊಳಗೆ ಕರೆಯಲೇಬೇಕು.
ನೀವು ಕೋಡ್ ಬರೆಯುವ ಮೊದಲು ನಿಮ್ಮ ಹಾರ್ಡ್ವೇರ್ ಅನ್ನು ಪರೀಕ್ಷಿಸಲು ಬಯಸಿದರೆ, GamepadTester.pro ಬಳಸಿ. ಇದು ನಿಮಗೆ ರೊ (raw) API ಡೇಟಾ ಮತ್ತು ಆಕ್ಸಿಸ್ (axis) ಮೌಲ್ಯಗಳನ್ನು ನೈಜ ಸಮಯದಲ್ಲಿ ತೋರಿಸುತ್ತದೆ.