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

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ể, trong 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.

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ý, dù chậm hay nhanh, đều dẫn đến cùng một sự chuyển động. Đ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 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 tăng tốc và không tăng tốc nhờ API Khoá con trỏ được cập nhật.

Các nền tảng trò chơi 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ữ 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 dữ liệu đó sẽ 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 chụp con trỏ chuột (hoặc yêu cầu khoá con trỏ) cho phép bạn không lo con trỏ di chuyển ra bên 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ả các sự kiện chuột đều 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 đối với 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 để tăng tốc chuột và truy cập vào thao tác đầ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 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. Không có sự kiện khoá con trỏ nào kích hoạt cho một yêu cầu thay đổi không thành công.

Hỗ trợ trình duyệt

Pointer Lock API (API Khoá con trỏ) đượ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ợ 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. 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 để 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.

Các đường liên kết hữu ích

• Giải thích
• Thông số kỹ thuật PR
• Kho lưu trữ GitHub
• Mục nhập ChromeStatus
• Lỗi theo dõi trên Chrome
• Ý định vận chuyển
• Vị trí 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.