Inhabilita la aceleración del mouse para brindar una mejor experiencia de juego FPS

Las apps web ahora pueden inhabilitar la aceleración del mouse cuando capturan eventos del puntero.

François Beaufort

El movimiento acelerado es una función ergonómica cuando se usa un mouse o un panel táctil para mover el puntero en la pantalla. Permite un movimiento preciso moviéndose lentamente y, al mismo tiempo, permite que el puntero cruce toda la pantalla con un movimiento corto y rápido. Específicamente, para la misma distancia física que mueves el mouse, el puntero en la pantalla se desplaza más si la distancia se recorrió más rápido.

Los sistemas operativos habilitan la aceleración del mouse de forma predeterminada. En algunos juegos con perspectiva en primera persona, como los juegos de disparos en primera persona (FPS), los datos de entrada del mouse sin procesar se usan para controlar la rotación de la cámara sin un ajuste de aceleración. El mismo movimiento físico, ya sea lento o rápido, genera la misma rotación. Esto se traduce en una mejor experiencia de juego y mayor precisión, según los jugadores profesionales.

A partir de Chrome 88, las apps web pueden alternar entre datos de movimiento del mouse acelerados y no acelerados gracias a la API de Pointer Lock actualizada.

Las plataformas de videojuegos basadas en la Web, como Google Stadia y Nvidia GeForce Now, ya usan estas nuevas capacidades para complacer a los jugadores de FPS.

Usa la API

Cómo solicitar un bloqueo del puntero

El bloqueo del puntero es el término canónico para cuando una aplicación de escritorio oculta el ícono del puntero y, en su lugar, interpreta el movimiento del mouse para otra cosa, p.ej., mirar alrededor en un mundo 3D.

Los atributos movementX y movementY de los eventos del documento mousemove te indican cuánto se movió el puntero del mouse desde el último evento de movimiento. Sin embargo, no se actualizan cuando el puntero se mueve fuera de la página web.

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

Capturar el puntero del mouse (o solicitar un bloqueo del puntero) te permite dejar de preocuparte por que el puntero se mueva fuera de la ventana. Esto es especialmente útil para los juegos web envolventes. Cuando el puntero está bloqueado, todos los eventos del mouse se dirigen al elemento objetivo del bloqueo del puntero.

Llama a requestPointerLock() en el elemento objetivo para solicitar un bloqueo del puntero y escucha los eventos pointerlockchange y pointerlockerror para supervisar los cambios en el bloqueo del puntero.

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

Inhabilita la aceleración del mouse

Llama a requestPointerLock() con { unadjustedMovement: true } para inhabilitar el ajuste a nivel del SO para la aceleración del mouse y acceder a la entrada sin procesar del mouse. De esta manera, los datos de movimiento del mouse de los eventos mousemove no incluirán la aceleración del mouse cuando el puntero esté bloqueado.

Usa la nueva promesa devuelta de requestPointerLock() para saber si la solicitud se realizó correctamente.

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

Es posible alternar entre los datos de movimiento del mouse acelerado y no acelerado sin liberar el bloqueo del puntero. Simplemente vuelve a solicitar el bloqueo del puntero con la opción deseada. Si esa solicitud falla, el bloqueo original permanecerá intacto y la promesa devuelta se rechazará. No se activarán eventos de bloqueo del puntero para una solicitud de cambio fallida.

Navegadores compatibles

La API de Pointer Lock es compatible con la mayoría de los navegadores. Sin embargo, a partir de octubre de 2020, los navegadores basados en Chromium (p.ej., Chrome, Edge, etc.) son los únicos que admiten la inhabilitación del ajuste a nivel del SO para la aceleración del mouse. Consulta la tabla Compatibilidad del navegador de MDN para ver las actualizaciones.

Compatibilidad con el sistema operativo

Se admite la inhabilitación del ajuste a nivel del SO para la aceleración del mouse en ChromeOS, macOS Catalina 10.15.1 y Windows. Luego se agregará Linux.

Muestra

Puedes experimentar con la API de Pointer Lock ejecutando la muestra.

Vínculos útiles

• Explicación
• PR de especificación
• Repositorio de GitHub
• Entrada de ChromeStatus
• Error de seguimiento de Chrome
• Intención de enviar
• La postura de Mozilla
• Posición de WebKit

Agradecimientos

Gracias a James Hollyer, Thomas Steiner, Joe Medley, Kayce Basques y Vincent Scheib por revisar este artículo.