Esta página foi traduzida pela API Cloud Translation.

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 ao se mover lentamente, mas também permite que o ponteiro atravesse toda a tela com um movimento curto e rápido. Especificamente, para a mesma distância física que você move o mouse, o ponteiro na tela se move 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 de jogo melhor e maior 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 movimento de mouse acelerados e não acelerados, graças à API Pointer Lock atualizada.

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

Compatibilidade com navegadores

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, elas não são atualizadas 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 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 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 dos 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 acelerados e não acelerados 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 de compatibilidade de navegador do MDN para conferir 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 breve.

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 revisões deste artigo.