Giờ đây, các ứng dụng web có thể tắt tính năng tăng tốc chuột khi ghi lại các sự kiện con trỏ.
Di chuyển tăng tốc là một tính năng tiện lợi khi sử dụng chuột hoặc bàn di chuột để di chuyển con trỏ trên màn hình. Tính năng 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ỏ di chuyển trên toàn bộ màn hình bằng một chuyển động ngắn nhanh. Cụ thể, đối với cùng một khoảng cách thực tế 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 được di chuyển nhanh hơn.
Hệ điều hành bật tính năng tăng tốc chuột theo mặc định. Đối với một số trò chơi góc nhìn của bên thứ nhất, thường là trò chơi bắn súng góc nhìn người thứ nhất (FPS), dữ liệu đầu vào thô của chuột đượ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 vòng quay. Theo các game thủ chuyên nghiệp, điều này giúp mang lại trải nghiệm chơi tốt hơn và độ chính xác cao hơn.
Kể từ Chrome 88, các ứng dụng web có thể chuyển đổi qua lại giữa dữ liệu chuyển động chuột tăng tốc và không tăng tốc nhờ API Khoá con trỏ đã 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 các tính năng mới này để làm hài lòng người chơi FPS.
Sử dụng API
Yêu cầu khoá con trỏ
Khoá con trỏ là thuật ngữ chuẩn cho trường hợp 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.
Thuộc tính movementX
và movementY
từ các sự kiện tài liệu mousemove
cho bạn biết con trỏ chuột đã di chuyển bao xa kể từ sự kiện di chuyển gần đây nhất. Tuy nhiên, các giá trị đó sẽ không được cập nhật khi con trỏ di chuyển ra khỏi trang web.
document.addEventListener("mousemove", (event) => {
console.log(`movementX: ${event.movementX} movementY: ${event.movementY}`);
});
Việc chụp con trỏ chuột (hoặc yêu cầu khoá con trỏ) giúp bạn không còn phải lo lắng về việc con trỏ di chuyển ra ngoài nữa. Điều này đặc biệt hữu ích đối với các trò chơi web sống động. Khi con trỏ bị khoá, tất cả 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ỏ và
nghe 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 cho tính năng tăng tốc chuột và truy cập vào dữ liệu đầu vào thô của 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 gia 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 chuyển động chuột tăng tốc và không tăng tốc mà không cần nhả khoá con trỏ. Bạn chỉ cần yêu cầu khoá con trỏ một lần nữa bằng tuỳ chọn mong muốn. Nếu yêu cầu đó không thành công, khoá ban đầu sẽ vẫn nguyên vẹn và lời hứa được trả về sẽ từ chối. Sẽ không có sự kiện khoá con trỏ nào kích hoạt đối với 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, 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 cho tính năng tăng tốc chuột kể từ tháng 10 năm 2020. Hãy 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
Tính năng tắt tính năng điều chỉnh ở cấp hệ điều hành cho tính năng tăng tốc chuột được hỗ trợ trên ChromeOS, macOS Catalina 10.15.1 và Windows. Linux sẽ tuân 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.
Đường liên kết hữu ích
- Giải thích
- Thông số kỹ thuật về 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
- Quan điểm của Mozilla
- Vị trí của WebKit
Lời cảm ơn
Cảm ơn James Hollyer, Thomas Steiner, Joe Medley, Kayce Basques và Vincent Scheib đã xem xét bài viết này.