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

Pergerakan yang dipercepat adalah fitur ergonomis saat menggunakan mouse atau trackpad untuk memindahkan pointer di layar. Fitur ini memungkinkan gerakan yang presisi dengan bergerak perlahan sekaligus memungkinkan pointer melintasi seluruh layar dengan gerakan pendek yang cepat. Secara khusus, untuk jarak fisik yang sama saat Anda menggerakkan mouse, penunjuk di layar bergerak lebih jauh jika jarak tersebut ditempuh lebih cepat.

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

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

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

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-lihat di dunia 3D.

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

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

Dengan merekam penunjuk mouse (atau meminta penguncian penunjuk), Anda tidak perlu lagi khawatir penunjuk bergerak ke luar. Hal ini sangat berguna untuk game web imersif. Saat pointer dikunci, semua peristiwa mouse akan menuju ke elemen target penguncian pointer.

Panggil requestPointerLock() pada elemen target untuk meminta penguncian pointer, dan dengarkan peristiwa pointerlockchange dan pointerlockerror untuk memantau perubahan penguncian 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 } untuk menonaktifkan penyesuaian tingkat OS untuk akselerasi mouse, dan akses input mouse mentah. Dengan demikian, data gerakan mouse dari peristiwa mousemove tidak akan menyertakan akselerasi mouse saat pointer dikunci.

Gunakan janji yang ditampilkan baru 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 penguncian pointer lagi dengan opsi yang diinginkan. Jika permintaan tersebut gagal, kunci asli akan tetap utuh dan promise yang ditampilkan akan ditolak. Tidak ada peristiwa penguncian 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 info terbaru.

Dukungan sistem operasi

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

Contoh

Anda dapat bereksperimen dengan Pointer Lock API dengan menjalankan contoh.

Link bermanfaat

• Penjelasan
• PR spesifikasi
• Repositori GitHub
• Entri ChromeStatus
• Bug pelacakan Chrome
• Maksud untuk mengirim
• Posisi Mozilla
• Posisi WebKit

Ucapan terima kasih

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