Отключите ускорение мыши, чтобы улучшить игровой процесс 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 хорошо поддерживается во многих браузерах . Однако по состоянию на октябрь 2020 года отключение настройки ускорения мыши на уровне ОС поддерживают только браузеры на базе Chromium (например, Chrome, Edge и т. д.). Актуальную информацию см. в таблице совместимости браузеров MDN.

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

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

Образец

Вы можете поэкспериментировать с Pointer Lock API, запустив пример .

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

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

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

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