Giờ đây, các ứng dụng web có thể tắt tính năng tăng tốc chuột khi thu thập sự kiện con trỏ.
Chuyển động nhanh là một tính năng công thái học khi sử dụng chuột hoặc bàn di chuột để di chuyển con trỏ trên màn hình. Dịch vụ này cho phép di chuyển chính xác bằng cách di chuyển chậm, đồng thời cho phép con trỏ băng qua toàn bộ màn hình bằng một chuyển động ngắn nhanh. Cụ thể, với cùng một khoảng cách vật lý mà bạn di chuyển chuột, con trỏ trên màn hình sẽ di chuyển xa hơn nếu khoảng cách đó di chuyển nhanh hơn.
Theo mặc định, hệ điều hành bật tính năng tăng tốc chuột. Đối với một số trò chơi góc nhìn của bên thứ nhất, các trò chơi thường gặp ở góc nhìn thứ nhất (FPS), dữ liệu nhập bằng chuột thô được dùng để kiểm soát việc xoay máy ảnh mà không cần điều chỉnh gia tốc. Cùng một chuyển động vật lý, chậm hay nhanh, đều dẫn đến cùng một chuyển động xoay. Điều này mang lại trải nghiệm chơi tốt hơn và độ chính xác cao hơn theo đánh giá của những người chơi chuyên nghiệp.
Kể từ Chrome 88, các ứng dụng web có thể chuyển đổi qua lại giữa dữ liệu di chuyển chuột có tăng tốc và không tăng tốc nhờ API Khoá con trỏ mới cập nhật.
Các nền tảng trò chơi dựa trên web như Google Stadia và Nvidia GeForce Now đã sử dụng những tính năng mới này để làm hài lòng những người chơi trò chơi FPS.
Sử dụng API
Yêu cầu khoá con trỏ
Khoá con trỏ là thuật ngữ chính tắc khi một ứng dụng dành cho máy tính ẩn biểu tượng con trỏ và diễn giải chuyển động của chuột cho một mục đích khác, chẳng hạn như nhìn xung quanh trong thế giới 3D.
Các thuộc tính movementX và movementY trong các sự kiện tài liệu mousemove cho bạn biết con trỏ chuột đã di chuyển bao nhiêu kể từ sự kiện di chuyển gần đây nhất. Tuy nhiên, các thẻ đó không được cập nhật khi con trỏ di chuyển ra ngoài trang web.
document.addEventListener("mousemove", (event) => {
console.log(`movementX: ${event.movementX} movementY: ${event.movementY}`);
});
Việc nắm bắt con trỏ chuột (hoặc yêu cầu khoá con trỏ) cho phép bạn không còn lo lắng về việc con trỏ di chuyển ra bên ngoài. Điều này đặc biệt hữu ích đối với các trò chơi sống động trên web. Khi con trỏ bị khoá, mọi sự kiện chuột sẽ chuyển đến phần tử mục tiêu của khoá con trỏ.
Gọi requestPointerLock() trên phần tử mục tiêu để yêu cầu khoá con trỏ, đồng thời theo dõi các sự kiện pointerlockchange và pointerlockerror để theo dõi các thay đổi về khoá con trỏ.
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");
});
Tắt tính năng tăng tốc chuột
Gọi requestPointerLock() bằng { unadjustedMovement: true } để tắt tính năng điều chỉnh cấp hệ điều hành nhằm tăng tốc chuột và truy cập dữ liệu đầu vào thô bằng chuột.
Bằng cách này, dữ liệu chuyển động của chuột từ các sự kiện mousemove sẽ không bao gồm tốc độ tăng tốc chuột khi con trỏ bị khoá.
Sử dụng lời hứa mới được trả về từ requestPointerLock() để biết liệu yêu cầu có thành công hay không.
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();
}
});
}
Bạn có thể chuyển đổi giữa dữ liệu di chuyển chuột được tăng tốc và không được tăng tốc mà không cần nhả khoá con trỏ. Chỉ cần yêu cầu khoá con trỏ một lần nữa với tuỳ chọn mong muốn. Nếu yêu cầu đó không thành công, khoá ban đầu sẽ vẫn còn nguyên và lời hứa được trả về sẽ bị từ chối. Không có sự kiện khoá con trỏ nào kích hoạt khi yêu cầu thay đổi không thành công.
Hỗ trợ trình duyệt
Pointer Lock API được hỗ trợ tốt trên các trình duyệt. Tuy nhiên, kể từ tháng 10 năm 2020, các trình duyệt dựa trên Chromium (ví dụ: Chrome, Edge, v.v.) là những trình duyệt duy nhất hỗ trợ tắt tính năng điều chỉnh ở cấp hệ điều hành để tăng tốc chuột. Xem bảng Khả năng tương thích với trình duyệt của MDN để biết thông tin cập nhật.
Hỗ trợ hệ điều hành
Việc tắt tính năng điều chỉnh ở cấp hệ điều hành để tăng tốc chuột được hỗ trợ trên ChromeOS, MacOS Catalina 10.15.1 và Windows. Linux sẽ làm theo.
Mẫu
Bạn có thể chơi với Pointer Lock API bằng cách chạy mẫu trên Glitch. Hãy nhớ xem mã nguồn.
Các đường liên kết hữu ích
- Thông tin giải thích
- Thông tin quan hệ công chúng
- Kho lưu trữ GitHub
- Mục ChromeStatus
- Lỗi theo dõi trên Chrome
- Ý định vận chuyển
- Vị trí của Mozilla
- Vị trí của WebKit
Xác nhận
Cảm ơn James Hollyer, Thomas Steiner, Joe Medley, Kayce Basques và Vincent Scheib đã đánh giá bài viết này.