Nonaktifkan akselerasi mouse untuk memberikan pengalaman bermain game FPS yang lebih baik

Aplikasi web kini dapat menonaktifkan akselerasi mouse saat merekam peristiwa pointer.

François Beaufort
François Beaufort
GitHub

Gerakan yang dipercepat adalah fitur ergonomis saat menggunakan mouse atau trackpad untuk memindahkan pointer di layar. Mode ini memungkinkan gerakan yang akurat dengan bergerak perlahan sekaligus memungkinkan pointer melintasi seluruh layar dengan gerakan pendek yang cepat. Khususnya, untuk jarak fisik yang sama dengan saat Anda menggerakkan mouse, pointer pada layar akan bergerak lebih jauh jika jarak ditempuh lebih cepat.

Sistem operasi mengaktifkan akselerasi mouse secara default. Untuk beberapa game perspektif pihak pertama, biasanya first-person shooters (FPS), data input mouse mentah digunakan untuk mengontrol rotasi kamera tanpa penyesuaian akselerasi. Gerakan fisik yang sama, lambat atau cepat, menghasilkan rotasi yang sama. Hal ini menghasilkan pengalaman bermain game yang lebih baik dan akurasi yang lebih tinggi menurut gamer profesional.

Screenshot kontrol gerakan pointer di setelan Windows 10.
Kontrol gerakan pointer di setelan Windows 10.

Mulai Chrome 88, aplikasi web dapat beralih bolak-balik antara data gerakan mouse yang dipercepat dan tidak dipercepat berkat API Kunci Pointer yang diupdate.

Platform game berbasis web seperti Google Stadia dan Nvidia GeForce Now sudah menggunakan kemampuan baru ini untuk menyenangkan para gamer FPS.

Dukungan Browser

  • 37
  • 13
  • 50
  • 10.1

Sumber

Menggunakan API

Meminta kunci pointer

Penguncian pointer adalah istilah kanonis saat aplikasi desktop menyembunyikan ikon pointer dan menafsirkan gerakan mouse untuk hal lain, misalnya melihat sekeliling dalam dunia 3D.

Atribut movementX dan movementY dari peristiwa dokumen mousemove memberi tahu Anda seberapa banyak pointer mouse bergerak sejak peristiwa gerakan terakhir. Namun, data tersebut tidak diperbarui saat pointer bergerak ke luar halaman web.

document.addEventListener("mousemove", (event) => {
  console.log(`movementX: ${event.movementX} movementY: ${event.movementY}`);
});

Dengan menangkap pointer mouse (atau meminta kunci pointer), Anda tidak perlu mengkhawatirkan pointer yang bergerak ke luar lagi. Hal ini sangat berguna untuk game web yang imersif. Saat pointer dikunci, semua peristiwa mouse akan mengarah ke elemen target kunci pointer.

Panggil requestPointerLock() pada elemen target untuk meminta kunci pointer, serta memproses peristiwa pointerlockchange dan pointerlockerror untuk memantau perubahan kunci pointer.

const myTargetElement = document.body;

// Call this function to request a pointer lock.
function requestPointerLock() {
  myTargetElement.requestPointerLock();
}

document.addEventListener("pointerlockchange", () => {
  if (document.pointerLockElement) {
    console.log(`pointer is locked on ${document.pointerLockElement}`);
  } else {
    console.log("pointer is unlocked");
  }
});

document.addEventListener("pointerlockerror", () => {
  console.log("pointer lock error");
});

Menonaktifkan akselerasi mouse

Panggil requestPointerLock() dengan { unadjustedMovement: true } guna menonaktifkan penyesuaian tingkat OS untuk akselerasi mouse, dan mengakses input mouse mentah. Dengan cara ini, data gerakan mouse dari peristiwa mousemove tidak akan menyertakan akselerasi mouse saat pointer dikunci.

Gunakan promise baru yang ditampilkan dari requestPointerLock() untuk mengetahui apakah permintaan berhasil.

function requestPointerLockWithUnadjustedMovement() {
  const promise = myTargetElement.requestPointerLock({
    unadjustedMovement: true,
  });

  if (!promise) {
    console.log("disabling mouse acceleration is not supported");
    return;
  }

  return promise
    .then(() => console.log("pointer is locked"))
    .catch((error) => {
      if (error.name === "NotSupportedError") {
        // Some platforms may not support unadjusted movement.
        // You can request again a regular pointer lock.
        return myTargetElement.requestPointerLock();
      }
    });
}

Anda dapat beralih antara data gerakan mouse yang dipercepat dan tidak dipercepat tanpa melepaskan kunci pointer. Cukup minta kunci pointer lagi dengan opsi yang diinginkan. Jika permintaan tersebut gagal, kunci asli akan tetap tidak aktif dan promise yang ditampilkan akan ditolak. Tidak ada peristiwa kunci pointer yang akan diaktifkan untuk permintaan perubahan yang gagal.

Dukungan browser

Pointer Lock API didukung dengan baik di seluruh browser. Namun, browser berbasis Chromium (misalnya Chrome, Edge, dll.) adalah satu-satunya yang mendukung penonaktifan penyesuaian tingkat OS untuk akselerasi mouse mulai Oktober 2020. Lihat tabel Kompatibilitas browser MDN untuk mengetahui update.

Dukungan sistem operasi

Menonaktifkan penyesuaian tingkat OS untuk akselerasi mouse didukung di ChromeOS, macOS Catalina 10.15.1, dan Windows. Linux akan mengikuti.

Contoh

Anda dapat mencoba-coba Pointer Lock API dengan menjalankan sample di Glitch. Pastikan untuk memeriksa kode sumbernya.

Link bermanfaat

Ucapan terima kasih

Terima kasih kepada James Hollyer, Thomas Steiner, Joe Medley, Kayce Basques, dan Vincent Scheib atas ulasan mereka tentang artikel ini.