Saya Membina Sokongan Gamepad Dengan JavaScript

Saya menghabiskan hujung minggu dengan melakukan kejuruteraan terbalik (reverse-engineering) terhadap input pengawal untuk permainan pelayar. Saya duduk di sana pada jam 2 pagi merenung satu tatasusunan (array) yang kosong. Tiada apa-apa yang muncul.

Pengalaman itu mengajar saya lebih banyak tentang API pelayar dan pengundian (polling) perkakasan berbanding mana-mana tutorial.

Permainan web sedang berkembang. Dengan WebGL dan WebGPU, permainan pelayar kini mencapai tahap kualiti yang tinggi. Pemain menjangkakan untuk menyambungkan pengawal Xbox atau PS5 dan ia berfungsi dengan serta-merta.

Jika anda membina permainan, alatan kebolehcapaian, atau papan pemuka tersuai, anda memerlukan HTML5 Gamepad API. Ia berfungsi dalam Chrome, Firefox, dan Edge. Ia tidak memerlukan sebarang perpustakaan (library).

Berikut adalah apa yang saya pelajari:

  • API ini dipacu acara (event-driven) untuk sambungan tetapi berasaskan pengundian (polling-based) untuk input.
  • Anda mesti menggunakan requestAnimationFrame untuk membaca input secara berterusan.
  • Pelayar tidak akan memaparkan pengawal sehingga pengguna menekan butang. Ini adalah ciri privasi untuk menghalang cap jari perkakasan (hardware fingerprinting).

Menguruskan data:

  • Gunakan gamepad.mapping untuk menyemak susun atur "standard". Pemetaan standard memastikan butang 0 sentiasa merupakan butang muka bahagian bawah.
  • Semak gamepad.id untuk ID Vendor dan Produk. Ini membantu anda mengenal pasti perkakasan khusus seperti Sony DualSense.
  • Sentiasa laksanakan penapis zon mati (deadzone filter). Kayu analog tidak pernah berada di tengah dengan sempurna. Tanpa zon mati, watak atau kamera anda akan hanyut (drift) secara berterusan.

Cara mudah untuk mengendalikan zon mati: Jika Math.abs(axis) > 0.1, kemudian gunakan nilai tersebut.

Maklum balas haptik: Anda boleh menggunakan gamepad.vibrationActuator.playEffect untuk mencetuskan gegaran (rumble). Ini berfungsi dengan baik dalam Chrome dan Edge. Firefox mempunyai sokongan separa. Safari tidak menyokongnya.

Perkara penting untuk projek anda:

  • Dengar acara gamepadconnected dan gamepaddisconnected.
  • Jejaki keadaan butang sebelumnya untuk mengesan "tekanan" (press) berbanding "tekanan lama" (hold).
  • Gunakan ambang zon mati (deadzone threshold) untuk mengabaikan pergerakan kayu yang sangat kecil.
  • Uji pada pelbagai pelayar.
  • Ingat bahawa navigator.getGamepads() mengembalikan satu tangkapan (snapshot). Anda mesti memanggilnya di dalam gelung (loop) anda untuk mendapatkan data terkini.

Jika anda ingin menguji perkakasan anda sebelum menulis kod, gunakan GamepadTester.pro. Ia menunjukkan data API mentah dan nilai paksi secara masa nyata.

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