میں نے JavaScript کے ذریعے گیم پیڈ سپورٹ بنائی
میں نے ایک براؤزر گیم کے لیے کنٹرولر ان پٹ کو ریورس انجینئر کرنے میں ایک ویک اینڈ گزارا۔ میں رات کے 2 بجے ایک خالی ایرے (array) کو گھورتا رہا۔ کچھ بھی نظر نہیں آ رہا تھا۔
اس تجربے نے مجھے کسی بھی ٹیٹوریل کے مقابلے میں براؤزر APIs اور ہارڈ ویئر پولنگ (hardware polling) کے بارے میں بہت کچھ سکھایا۔
ویب گیمنگ ترقی کر رہی ہے۔ WebGL اور WebGPU کے ساتھ، براؤزر گیمز اب اعلیٰ معیار تک پہنچ رہے ہیں۔ کھلاڑیوں کی توقع ہوتی ہے کہ وہ Xbox یا PS5 کنٹرولر لگائیں اور وہ فوری طور پر کام کرنے لگے۔
اگر آپ گیمز، رسائی کے ٹولز (accessibility tools)، یا کسٹم ڈیش بورڈز بناتے ہیں، تو آپ کو HTML5 Gamepad API کی ضرورت ہے۔ یہ Chrome، Firefox، اور Edge میں کام کرتا ہے۔ اس کے لیے کسی لائبریری کی ضرورت نہیں ہے۔
یہاں وہ چیزیں ہیں جو میں نے سیکھیں:
- کنکشنز کے لیے API ایونٹ پر مبنی (event-driven) ہے لیکن ان پٹ کے لیے پولنگ پر مبنی (polling-based) ہے۔
- ان پٹ کو مسلسل پڑھنے کے لیے آپ کو
requestAnimationFrameکا استعمال کرنا چاہیے۔ - براؤزرز کنٹرولر کو تب تک نہیں دکھائیں گے جب تک صارف کوئی بٹن نہ دبا لے۔ یہ ہارڈ ویئر فنگر پرنٹنگ (hardware fingerprinting) کو روکنے کے لیے ایک پرائیویسی فیچر ہے۔
ڈیٹا کا انتظام کرنا:
- "اسٹینڈرڈ" لے آؤٹ چیک کرنے کے لیے
gamepad.mappingکا استعمال کریں۔ اسٹینڈرڈ میپنگ اس بات کو یقینی بناتی ہے کہ بٹن 0 ہمیشہ نیچے والا فیس بٹن ہو۔ - وینڈر اور پروڈکٹ آئی ڈیز کے لیے
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()ایک اسنیپ شاٹ (snapshot) واپس کرتا ہے۔ تازہ ڈیٹا حاصل کرنے کے لیے آپ کو اسے اپنے لوپ کے اندر کال کرنا ہوگا۔
اگر آپ کوڈ لکھنے سے پہلے اپنے ہارڈ ویئر کو ٹیسٹ کرنا چاہتے ہیں، تو GamepadTester.pro استعمال کریں۔ یہ آپ کو ریئل ٹائم میں خام API ڈیٹا اور ایکسس (axis) ویلیوز دکھاتا ہے۔