Отключите ускорение мыши, чтобы обеспечить лучший игровой процесс FPS.

Веб-приложения теперь могут отключать ускорение мыши при захвате событий указателя.

François Beaufort

Ускоренное движение — это эргономичная функция при использовании мыши или трекпада для перемещения указателя по экрану. Он обеспечивает точное перемещение за счет медленного перемещения, а также позволяет указателю пересекать весь экран быстрым коротким движением. В частности, на том же физическом расстоянии, на которое вы перемещаете мышь, указатель на экране перемещается дальше, если расстояние было пройдено быстрее.

Операционные системы по умолчанию включают ускорение мыши. В некоторых сторонних играх с перспективой , обычно в шутерах от первого лица (FPS), необработанные входные данные мыши используются для управления вращением камеры без регулировки ускорения. Одно и то же физическое движение, медленное или быстрое, приводит к одному и тому же вращению. По мнению профессиональных геймеров, это приводит к улучшению игрового процесса и повышению точности.

Начиная с Chrome 88, веб-приложения могут переключаться между ускоренными и неускоренными данными о движении мыши благодаря обновленному API Pointer Lock .

Игровые веб-платформы, такие как Google Stadia и Nvidia GeForce Now, уже используют эти новые возможности, чтобы порадовать любителей шутеров от первого лица.

Использование API

Запросить блокировку указателя

Блокировка указателя — это канонический термин, обозначающий ситуацию, когда настольное приложение скрывает значок указателя и интерпретирует движение мыши для чего-то другого, например, для просмотра в трехмерном мире.

Атрибуты movementX и movementY из событий документа mousemove сообщают вам, насколько переместился указатель мыши с момента последнего события перемещения. Однако они не обновляются, когда указатель выходит за пределы веб-страницы.

document.addEventListener("mousemove", (event) => {
  console.log(`movementX: ${event.movementX} movementY: ${event.movementY}`);
});

Захват указателя мыши (или запрос блокировки указателя) позволяет вам больше не беспокоиться о перемещении указателя наружу. Это особенно полезно для захватывающих веб-игр. Когда указатель заблокирован, все события мыши передаются целевому элементу блокировки указателя.

Вызовите requestPointerLock() для целевого элемента, чтобы запросить блокировку указателя, и прослушайте события pointerlockchange и pointerlockerror чтобы отслеживать изменения блокировки указателя.

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");
});

Отключить ускорение мыши

Вызовите requestPointerLock() с { unadjustedMovement: true } , чтобы отключить настройку ускорения мыши на уровне ОС и получить доступ к необработанному вводу мыши. Таким образом, данные о движении мыши из событий mousemove не будут включать ускорение мыши, когда указатель заблокирован.

Используйте новое обещание, возвращенное функцией requestPointerLock() чтобы узнать, был ли запрос успешным.

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();
      }
    });
}

Можно переключаться между ускоренными и неускоренными данными о движении мыши, не снимая блокировки указателя. Просто запросите блокировку указателя еще раз с желаемой опцией. Если этот запрос не удастся, исходная блокировка останется нетронутой, а возвращенное обещание будет отклонено. В случае неудачного запроса на изменение не будут срабатывать события блокировки указателя.

Поддержка браузера

API Pointer Lock хорошо поддерживается во всех браузерах . Однако браузеры на базе Chromium (например, Chrome, Edge и т. д.) — единственные, которые поддерживают отключение настройки ускорения мыши на уровне ОС по состоянию на октябрь 2020 года. Обновления см. в таблице совместимости браузеров MDN.

Поддержка операционной системы

Отключение настройки ускорения мыши на уровне ОС поддерживается в ChromeOS, macOS Catalina 10.15.1 и Windows. Linux будет следовать.

Образец

Вы можете поиграть с API Pointer Lock, запустив пример на Glitch. Обязательно ознакомьтесь с исходным кодом .

Полезные ссылки

• Объяснитель
• Спецификация PR
• Репозиторий GitHub
• Запись ChromeStatus
• Ошибка отслеживания Chrome
• Намерение отправить
• Позиция Mozilla
• Позиция WebKit

Благодарности

Благодарим Джеймса Холлиера , Томаса Штайнера , Джо Медли , Кейси Басков и Винсента Шейба за рецензии на эту статью.