Desative a aceleração do mouse para melhorar a experiência de jogo com QPS

Os apps da Web agora podem desativar a aceleração do mouse ao capturar eventos de ponteiro.

François Beaufort
François Beaufort
GitHub

O movimento acelerado é um recurso ergonômico usado com mouse ou trackpad para mover o ponteiro na tela. Ele permite movimentos precisos, movendo-se lentamente, ao mesmo tempo que permite que o ponteiro percorra toda a tela com um movimento curto rápido. Especificamente, para a mesma distância física que você move o mouse, o ponteiro na tela se deslocará mais se a distância for percorrida mais rapidamente.

Os sistemas operacionais ativam a aceleração do mouse por padrão. Em alguns jogos de perspectiva própria, geralmente jogos de tiro em primeira pessoa (QPS), os dados brutos de entrada do mouse são usados para controlar a rotação da câmera sem um ajuste de aceleração. O mesmo movimento físico, lento ou rápido, resulta na mesma rotação. Isso resulta em uma experiência de jogo melhor e mais precisão, de acordo com jogadores profissionais.

Captura de tela do controle de movimento do ponteiro nas configurações do Windows 10.
Controle de movimento do ponteiro nas configurações do Windows 10.

A partir do Chrome 88, os apps da Web podem alternar entre dados de movimentos de mouse acelerados e não acelerados graças à API Pointer Lock atualizada.

Plataformas de jogos baseadas na Web, como Google Stadia e Nvidia GeForce Now, já usam esses novos recursos para agradar gamers com QPS.

Compatibilidade com navegadores

  • 37
  • 13
  • 50
  • 10.1

Origem

Como usar a API

Solicitar um bloqueio de ponteiro

Um bloqueio de ponteiro é o termo canônico quando um app para computador oculta o ícone de ponteiro e interpreta o movimento do mouse para outra coisa, por exemplo, olhar ao redor em um mundo 3D.

Os atributos movementX e movementY dos eventos de documento mousemove informam quanto o ponteiro do mouse se moveu desde o último evento de movimento. No entanto, eles não são atualizados quando o ponteiro se move para fora da página da Web.

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

Capturar o ponteiro do mouse (ou solicitar um bloqueio de ponteiro) permite que você não se preocupe mais com o movimento do ponteiro para fora dele. Isso é especialmente útil para jogos imersivos na Web. Quando o ponteiro está bloqueado, todos os eventos de mouse vão para o elemento de destino do bloqueio do ponteiro.

Chame requestPointerLock() no elemento de destino para solicitar um bloqueio de ponteiro e detecte eventos pointerlockchange e pointerlockerror para monitorar as mudanças de bloqueio do ponteiro.

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

Desativar a aceleração do mouse

Chame requestPointerLock() com { unadjustedMovement: true } para desativar o ajuste no nível do SO para aceleração do mouse e acessar a entrada bruta do mouse. Dessa forma, os dados de movimento do mouse de eventos mousemove não vão incluir a aceleração do mouse quando o ponteiro estiver bloqueado.

Use a nova promessa retornada de requestPointerLock() para saber se a solicitação foi bem-sucedida.

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

É possível alternar entre dados de movimentos do mouse acelerados e não acelerados sem liberar o bloqueio do ponteiro. Basta solicitar o bloqueio do ponteiro novamente com a opção desejada. Se essa solicitação falhar, o bloqueio original permanecerá intacto e a promessa retornada será rejeitada. Nenhum evento de bloqueio de ponteiro será disparado para uma solicitação de mudança com falha.

Suporte ao navegador

A API Pointer Lock tem suporte em todos os navegadores. No entanto, os navegadores baseados no Chromium (por exemplo, Chrome, Edge etc.) são os únicos que oferecem suporte à desativação do ajuste no nível do SO para aceleração do mouse a partir de outubro de 2020. Consulte as atualizações na tabela Compatibilidade de navegadores do MDN.

Suporte ao sistema operacional

A desativação do ajuste no nível do SO para aceleração do mouse tem suporte no ChromeOS, no macOS Catalina 10.15.1 e no Windows. O Linux virá depois.

Exemplo

Você pode testar a API Pointer Lock executando o exemplo no Glitch. Confira o código-fonte.

Links úteis

Agradecimentos

Agradecemos a James Hollyer, Thomas Steiner, Joe Medley, Kayce Basques e Vincent Scheib pelas avaliações deste artigo.