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

Chuyển động tăng tốc là một tính năng công thái học khi bạn dùng chuột hoặc bàn di chuột để di chuyển con trỏ trên màn hình. Chế độ 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 và nhanh. Cụ thể, đối 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 đó đượ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 thứ nhất (FPS), dữ liệu đầu vào thô của chuột được dùng để kiểm soát chuyển động xoay của camera 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 chuyển động xoay. Điều này giúp mang lại trải nghiệm chơi trò chơi tốt hơn và độ chính xác cao hơn theo đánh giá của các game thủ 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 chuyển động chuột được tăng tốc và không được tăng tốc nhờ Pointer Lock API (API khoá con trỏ) mới cập nhật.

Các nền tảng chơi 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 có tốc độ khung hình cao.

Sử dụng API

Yêu cầu khoá con trỏ

Khoá con trỏ là thuật ngữ chính tắc cho trường hợp ứ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, ví dụ: nhìn xung quanh trong thế giới 3D.

Các thuộc tính movementX và movementY từ các sự kiện mousemove của tài liệu cho 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, những giá trị này 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ỏ) giúp bạn không còn 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 trên web sống động. Khi con trỏ bị khoá, tất cả sự kiện chuột sẽ chuyển đến phần tử đích của chế độ khoá con trỏ.

Gọi requestPointerLock() trên phần tử đích để yêu cầu khoá con trỏ và theo dõi các sự kiện pointerlockchange và pointerlockerror để giám sát 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 chế độ đ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 về 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 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 được tăng tốc và không được 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ỏ lại bằng lựa 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ẽ bị từ chối. Không có sự kiện khoá con trỏ nào sẽ kích hoạt cho 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 nhiều 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ợ việc tắt chế độ điều chỉnh ở cấp hệ điều hành đối với 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 của trình duyệt của MDN để biết thông tin cập nhật.

Hỗ trợ hệ điều hành

ChromeOS, macOS Catalina 10.15.1 và Windows đều hỗ trợ việc tắt chế độ điều chỉnh gia tốc chuột ở cấp hệ điều hành. Linux sẽ được cài đặt sau.

Mẫu

Bạn có thể thử nghiệm với Pointer Lock API bằng cách chạy mẫu.

Đường liên kết hữu ích

• Thông tin giải thích
• Quy cách kỹ thuật PR
• 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.