Tắt tính năng tăng tốc chuột để mang lại trải nghiệm chơi trò chơi FPS tốt hơn

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ỏ.

François Beaufort
François Beaufort

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.

Ảnh chụp màn hình chế độ điều khiển chuyển động con trỏ trong phần cài đặt của Windows 10.
Chế độ điều khiển chuyển động con trỏ trong phần cài đặt Windows 10.

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 StadiaNvidia 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.

Hỗ trợ trình duyệt

  • Chrome: 37.
  • Edge: 13.
  • Firefox: 50.
  • Safari: 10.1.

Nguồn

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 movementXmovementY 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 pointerlockchangepointerlockerror để 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

Lời cảm ơn

Cảm ơn James Hollyer, Thomas Steiner, Joe Medley, Kayce BasquesVincent Scheib đã xem xét bài viết này.