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

O movimento acelerado é um recurso ergonômico ao usar um mouse ou trackpad para mover o ponteiro na tela. Ele permite movimento preciso, movendo-se lentamente, além de permitir que o ponteiro cruze toda a tela com um movimento curto e rápido. Especificamente, para a mesma distância física em que você move o mouse, o ponteiro na tela percorre mais se a distância foi percorrida mais rápido.

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 (FPS, na sigla em inglês), 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 melhor e mais precisão de acordo com os 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 movimento do mouse acelerado e não acelerado graças à API Pointer Lock atualizada.

As plataformas de jogos baseadas na Web, como o Google Stadia e a Nvidia GeForce Now, já usam esses novos recursos para agradar os jogadores de QPS.

Compatibilidade com navegadores

  • Chrome: 37.
  • Edge: 13.
  • Firefox: 50.
  • Safari: 10.1.

Origem

Como usar a API

Solicitar um bloqueio de ponteiro

O bloqueio do ponteiro é o termo canônico para quando um aplicativo para 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 se move para fora da página da Web.

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

A captura do ponteiro do mouse (ou a solicitação de um bloqueio do ponteiro) permite que você não se preocupe mais com o movimento do ponteiro para fora. Isso é especialmente útil para jogos imersivos na Web. 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 os 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 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 movimento do mouse acelerado e não acelerado sem liberar o bloqueio do ponteiro. Basta solicitar o bloqueio do ponteiro novamente com a opção desejada. Se a solicitação falhar, a trava original vai permanecer intacta, 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 bom suporte em vários 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 a tabela Compatibilidade do navegador da MDN para ver as atualizações.

Suporte ao sistema operacional

No ChromeOS, no macOS Catalina 10.15.1 e Windows, é possível desativar o ajuste no nível do SO para aceleração do mouse. O Linux será lançado em breve.

Exemplo

Você pode testar a API Pointer Lock executando a amostra no Glitch. Não se esqueça de consultar o código-fonte.

Links úteis

Agradecimentos

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