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

O movimento acelerado é um recurso ergonômico ao usar um mouse ou trackpad para mover o ponteiro na tela. Ele permite movimentos precisos movendo-se lentamente, mas também permite que o ponteiro atravesse toda a tela com um movimento rápido e curto. Especificamente, para a mesma distância física que você move o mouse, o ponteiro na tela viaja mais se a distância for percorrida mais rápido.

Os sistemas operacionais ativam a aceleração do mouse por padrão. Em alguns jogos de perspectiva em primeira pessoa, geralmente jogos de tiro em primeira pessoa (FPS), 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 melhor experiência de jogo e maior precisão, de acordo com jogadores profissionais.

A partir do Chrome 88, os apps da Web podem alternar entre dados de movimento do 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 os jogadores de FPS.

Como usar a API

Solicitar um bloqueio do ponteiro

O bloqueio de ponteiro é o termo canônico para quando um aplicativo de computador oculta o ícone do 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 sai da página da Web.

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

Ao capturar o ponteiro do mouse (ou solicitar um bloqueio de ponteiro), você não precisa mais se preocupar com o movimento dele para fora da tela. Isso é especialmente útil para jogos da Web imersivos. Quando o ponteiro está bloqueado, todos os eventos do 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 mudanças de bloqueio de 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. Assim, os dados de movimento do mouse de eventos mousemove não incluem a aceleração do mouse quando o ponteiro está 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 movimento do mouse acelerado e não acelerado sem liberar o bloqueio do ponteiro. Basta solicitar o bloqueio de ponteiro novamente com a opção desejada. Se essa solicitação falhar, o bloqueio original vai permanecer intacto, e a promessa retornada será rejeitada. Nenhum evento de bloqueio de ponteiro será acionado para uma solicitação de mudança com falha.

Suporte ao navegador

A API Pointer Lock tem boa compatibilidade com vários navegadores. No entanto, navegadores baseados no Chromium (por exemplo, Chrome, Edge etc.) são os únicos que permitem desativar o ajuste no nível do SO para aceleração do mouse desde outubro de 2020. Consulte a tabela Compatibilidade com navegadores da MDN para atualizações.

Suporte ao sistema operacional

A desativação do ajuste no nível do SO para aceleração do mouse é compatível com o ChromeOS, o macOS Catalina 10.15.1 e o Windows. O Linux será lançado em seguida.

Exemplo

Para testar a API Pointer Lock, execute o exemplo.

Links úteis

• Explicação
• RP de especificação
• Repositório do GitHub
• Entrada do ChromeStatus
• Bug de rastreamento do Chrome
• Intenção de enviar
• Posição da Mozilla
• Posição do WebKit

Agradecimentos

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