Aplikasi web kini dapat menonaktifkan akselerasi mouse saat merekam peristiwa pointer.
Percepatan gerakan adalah fitur ergonomis saat menggunakan mouse atau trackpad untuk memindahkan pointer di layar. Hal ini memungkinkan gerakan yang presisi dengan bergerak perlahan sekaligus memungkinkan pointer melintasi seluruh layar dengan gerakan singkat yang cepat. Secara khusus, untuk jarak fisik yang sama saat Anda menggerakkan mouse, kursor di layar akan bergerak lebih jauh jika jarak ditempuh 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 kunci kursor
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,
nilai tersebut tidak diperbarui saat pointer bergerak di luar halaman web.
document.addEventListener("mousemove", (event) => {
console.log(`movementX: ${event.movementX} movementY: ${event.movementY}`);
});
Dengan merekam pointer mouse (atau meminta kunci pointer), Anda tidak perlu khawatir lagi pointer akan berpindah ke luar. Hal ini sangat berguna untuk game web imersif. Saat pointer dikunci, semua peristiwa mouse akan diarahkan 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 menyusul.
Contoh
Anda dapat menggunakan Pointer Lock API dengan menjalankan contoh di Glitch. Pastikan untuk melihat kode sumber.
Link bermanfaat
- Penjelas
- PR Spesifikasi
- Repositori GitHub
- Entri ChromeStatus
- Bug pelacakan Chrome
- Intent to ship
- 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.