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

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

François Beaufort

Percepatan gerakan adalah fitur ergonomis saat menggunakan mouse atau trackpad untuk memindahkan pointer di layar. Hal ini memungkinkan gerakan yang akurat dengan bergerak perlahan sekaligus memungkinkan pointer melintasi seluruh layar dengan gerakan singkat yang cepat. Khususnya, untuk jarak fisik yang sama dengan saat Anda menggerakkan mouse, pointer di layar akan bergerak lebih jauh jika jaraknya lebih cepat.

Sistem operasi mengaktifkan akselerasi mouse secara default. Untuk beberapa game 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 tidak dipercepat berkat Pointer Lock API yang diperbarui.

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

Menggunakan API

Meminta penguncian pointer

Kunci 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 banyak pointer mouse bergerak sejak peristiwa gerakan terakhir. Namun, tersebut tidak diperbarui saat pointer bergerak ke luar halaman web.

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

Dengan merekam kursor mouse (atau meminta kunci kursor), Anda tidak perlu khawatir lagi tentang kursor yang bergerak ke luar. Hal ini sangat berguna untuk game web imersif. Saat pointer terkunci, semua peristiwa mouse akan masuk ke elemen target kunci pointer.

Panggil requestPointerLock() pada elemen target untuk meminta kunci pointer, dan proses 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 } untuk 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 kursor terkunci.

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 utuh 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 browser yang mendukung penonaktifan penyesuaian tingkat OS untuk akselerasi mouse mulai Oktober 2020. Lihat tabel Kompatibilitas browser MDN untuk mengetahui info terbaru.

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 Pointer Lock API dengan menjalankan contoh di Glitch. Pastikan untuk memeriksa kode sumbernya.

Link bermanfaat

• Penjelas
• Spesifikasi PR
• Repositori GitHub
• Entri ChromeStatus
• Bug pelacakan Chrome
• Rencana pengiriman
• Posisi Mozilla
• Posisi WebKit

Ucapan terima kasih

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