Saya Membangun Dukungan Gamepad dengan JavaScript

Saya menghabiskan akhir pekan untuk melakukan reverse-engineering input kontroler untuk sebuah game browser. Saya duduk di sana pada jam 2 pagi menatap array kosong. Tidak ada yang muncul.

Pengalaman itu mengajarkan saya lebih banyak tentang browser API dan hardware polling daripada tutorial mana pun.

Web gaming terus berkembang. Dengan WebGL dan WebGPU, game browser kini mencapai tingkat kualitas yang tinggi. Pemain berharap dapat mencolokkan kontroler Xbox atau PS5 dan langsung bisa digunakan.

Jika Anda membangun game, alat aksesibilitas, atau dashboard kustom, Anda memerlukan HTML5 Gamepad API. Ini berfungsi di Chrome, Firefox, dan Edge. Tidak memerlukan library apa pun.

Berikut adalah apa yang saya pelajari:

  • API ini berbasis event untuk koneksi, tetapi berbasis polling untuk input.
  • Anda harus menggunakan requestAnimationFrame untuk membaca input secara terus-menerus.
  • Browser tidak akan menampilkan kontroler sampai pengguna menekan sebuah tombol. Ini adalah fitur privasi untuk mencegah hardware fingerprinting.

Mengelola data:

  • Gunakan gamepad.mapping untuk memeriksa layout "standard". Standard mapping memastikan tombol 0 selalu merupakan tombol face bagian bawah.
  • Periksa gamepad.id untuk Vendor dan Product ID. Ini membantu Anda mengidentifikasi perangkat keras spesifik seperti Sony DualSense.
  • Selalu terapkan filter deadzone. Analog stick tidak pernah benar-benar berada di tengah secara sempurna. Tanpa deadzone, karakter atau kamera Anda akan terus bergeser (drift).

Cara sederhana untuk menangani deadzone: Jika Math.abs(axis) > 0.1, maka gunakan nilainya.

Haptic feedback: Anda dapat menggunakan gamepad.vibrationActuator.playEffect untuk memicu getaran (rumble). Ini berfungsi dengan baik di Chrome dan Edge. Firefox memiliki dukungan parsial. Safari tidak mendukungnya.

Poin penting untuk proyek Anda:

  • Dengarkan event gamepadconnected dan gamepaddisconnected.
  • Lacak status tombol sebelumnya untuk mendeteksi "press" vs "hold".
  • Gunakan ambang batas deadzone untuk mengabaikan gerakan stick yang sangat kecil.
  • Uji coba di berbagai browser.
  • Ingatlah bahwa navigator.getGamepads() mengembalikan sebuah snapshot. Anda harus memanggilnya di dalam loop Anda untuk mendapatkan data terbaru.

Jika Anda ingin menguji perangkat keras Anda sebelum menulis kode, gunakan GamepadTester.pro. Situs ini menunjukkan data API mentah dan nilai axis secara real-time.

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